more progress on refactor

client/src/app.vue

@@ -2,11 +2,7 @@
   <div id="neko">
     <main class="neko-main">
       <div class="header-container">
-        <div class="neko">
-          <img src="@/assets/logo.svg" alt="n.eko" />
-          <span><b>n</b>.eko</span>
-        </div>
-        <i class="fas fa-bars toggle" @click="toggle" />
+        <neko-header />
       </div>
       <div class="video-container">
         <neko-video ref="video" />
@@ -20,8 +16,8 @@
           <div class="controls">
             <neko-controls />
           </div>
-          <div class="emoji">
-            <neko-emoji />
+          <div class="emotes">
+            <neko-emotes />
           </div>
         </div>
       </div>
@@ -29,7 +25,7 @@
     <neko-side v-if="side" />
     <neko-connect v-if="!connected" />
     <neko-about v-if="about" />
-    <notifications group="neko" position="top left" />
+    <notifications group="neko" position="top left" style="top: 50px;" />
   </div>
 </template>
 
@@ -55,44 +51,6 @@
         height: $menu-height;
         flex-shrink: 0;
         display: flex;
-
-        .toggle {
-          display: block;
-          width: 30px;
-          height: 30px;
-          text-align: center;
-          line-height: 32px;
-          background: $background-primary;
-          justify-self: flex-end;
-          border-radius: 3px;
-          margin: 5px 10px 0 0;
-          cursor: pointer;
-        }
-
-        .neko {
-          flex: 1;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          width: 150px;
-          margin-left: 20px;
-
-          img {
-            display: block;
-            float: left;
-            height: 30px;
-            margin-right: 10px;
-          }
-
-          span {
-            font-size: 30px;
-            line-height: 30px;
-
-            b {
-              font-weight: 900;
-            }
-          }
-        }
       }
 
       .video-container {
@@ -130,7 +88,7 @@
             display: flex;
           }
 
-          .emoji {
+          .emotes {
             margin-right: 10px;
             flex: 1;
             justify-content: flex-end;
@@ -152,8 +110,9 @@
   import Side from '~/components/side.vue'
   import Controls from '~/components/controls.vue'
   import Members from '~/components/members.vue'
-  import Emoji from '~/components/emoji.vue'
+  import Emotes from '~/components/emotes.vue'
   import About from '~/components/about.vue'
+  import Header from '~/components/header.vue'
 
   @Component({
     name: 'neko',
@@ -164,8 +123,9 @@
       'neko-side': Side,
       'neko-controls': Controls,
       'neko-members': Members,
-      'neko-emoji': Emoji,
+      'neko-emotes': Emotes,
       'neko-about': About,
+      'neko-header': Header,
     },
   })
   export default class extends Vue {
@@ -182,9 +142,5 @@
     get connected() {
       return this.$accessor.connected
     }
-
-    toggle() {
-      this.$accessor.client.toggleSide()
-    }
   }
 </script>