Refactored client side with vue cli

chameleon-client/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="app">
+      <div class="layout">
+        <Layout :style="{minHeight: '100vh'}">
+            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
+                <Menu @on-open-change="onOpenChange" active-name="vision-input" :open-names="['vision']" theme="dark" width="auto" :class="menuitemClasses">
+                    <Submenu name="vision">
+                      <template slot="title">
+                        <Icon type="ios-videocam"/>
+                        <span v-if="!isCollapsed">Vision</span>
+                      </template>
+                      <MenuItem name="vision-input">Input</MenuItem>
+                      <MenuItem name="vision-3D">3D</MenuItem>
+                    </Submenu>
+                    <Submenu name="settings">
+                      <template slot="title">
+                        <Icon type="ios-settings"/>
+                        <span v-if="!isCollapsed">Settings</span>
+                      </template>
+                      <MenuItem name="settings-color">Color</MenuItem>
+                      <MenuItem name="settings-brightness">Brightness</MenuItem>
+                    </Submenu>
+                </Menu>
+            </Sider>
+        </Layout>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'app',
+  data () {
+    return {
+        isCollapsed: false
+    };
+  },
+  methods: { 
+    onOpenChange() {
+      this.isCollapsed = false;
+    }
+  },
+  computed: {
+    menuitemClasses: function () {
+        return [
+            'menu-item',
+            this.isCollapsed ? 'collapsed-menu' : ''
+        ]
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.layout-con{
+    height: 100%;
+    width: 100%;
+}
+.menu-item span{
+    display: inline-block;
+    overflow: hidden;
+    width: 69px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+    transition: width .2s ease .2s;
+}
+.menu-item i{
+    transform: translateX(0px);
+    transition: font-size .2s ease, transform .2s ease;
+    vertical-align: middle;
+    font-size: 16px;
+}
+.collapsed-menu span{
+    width: 0px;
+    transition: width .2s ease;
+}
+.collapsed-menu i{
+    transform: translateX(5px);
+    transition: font-size .2s ease .2s, transform .2s ease .2s;
+    vertical-align: middle;
+    font-size: 22px;
+}
+</style>

chameleon-client/src/components/InputTab.vue

@@ -0,0 +1,23 @@
+<template>
+    <div id="InputTab">
+        <Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
+    </div>
+</template>
+    
+<script> 
+    export default {
+        name: 'InputTab',
+        data () {
+            return {
+                 sliders: [
+                    { id: 'lightning', value: 25 },
+                    { id: 'saturation', value: 30 }
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+ 
+</style>

chameleon-client/src/components/Settings.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>

chameleon-client/src/components/Vision.vue

@@ -0,0 +1,14 @@
+<template>
+    <div id="vision">
+        <nav class="nav">
+            <router-link to="/input"><a>Input</a></router-link>
+        </nav>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Vision'
+    }
+</script>

chameleon-client/src/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+import iView from 'iview';
+import 'iview/dist/styles/iview.css'
+
+Vue.use(VueRouter);
+Vue.use(iView);
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')