feat: added vue router

client/src/App.vue

@@ -1,26 +1,19 @@
 <template>
   <div id="app">
-    <div class="toggle-button" @click="toggleFullScreen">
-      toggleFullScreen
+    <div id="nav">
+      <div class="nav-item toggle-button" @click="toggleFullScreen">
+        toggleFullScreen
+      </div> |
+      <router-link to="/">Camera</router-link>
     </div>
-    <image-stream/>
-    <Nipple :position="'left'" @move="moveCamera"/>
-    <Nipple :position="'right'" @move="moveWalle"/>
+    <router-view/>
   </div>
 </template>
 
 <script>
-import ImageStream from './components/ImageStream.vue';
-import Nipple from './components/Nipple.vue';
 
 export default {
   name: 'App',
-  mounted() {
-  },
-  data() {
-    return {
-    };
-  },
   methods: {
     toggleFullScreen() {
       if (document.fullscreenElement) {
@@ -29,20 +22,6 @@ export default {
         window.document.body.requestFullscreen();
       }
     },
-    moveCamera({ force, angle }) {
-      this.$socket.emit('camera', {
-        force, angle,
-      });
-    },
-    moveWalle({ force, angle }) {
-      this.$socket.emit('move', {
-        force, angle,
-      });
-    },
-  },
-  components: {
-    ImageStream,
-    Nipple,
   },
 };
 </script>
@@ -53,13 +32,20 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  color: #2c3e50;
 }
 
-.toggle-button {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: #42b983;
-  color: white;
+#nav {
+  padding: 30px;
+
+  a, div.nav-item {
+    display: inline;
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 </style>