more progress on refactor

client/src/components/header.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="header">
+    <div class="neko">
+      <img src="@/assets/logo.svg" alt="n.eko" />
+      <span><b>n</b>.eko</span>
+    </div>
+    <ul class="menu">
+      <li>
+        <i
+          :class="[{ disabled: !admin }, { 'fa-lock-open': !locked }, { 'fa-lock': locked }, 'fas', 'lock']"
+          @click="toggleLock"
+        />
+      </li>
+      <li>
+        <i class="fas fa-bars toggle" @click="toggleMenu" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .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;
+        }
+      }
+    }
+
+    .menu {
+      justify-self: flex-end;
+      margin-right: 10px;
+      white-space: nowrap;
+
+      li {
+        display: inline-block;
+        margin-right: 10px;
+
+        i {
+          display: block;
+          width: 30px;
+          height: 30px;
+          text-align: center;
+          line-height: 32px;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+
+        .disabled {
+          cursor: default;
+          opacity: 0.8;
+        }
+
+        .fa-lock {
+          color: rgba($color: $style-error, $alpha: 0.5);
+        }
+
+        .toggle {
+          background: $background-primary;
+        }
+      }
+    }
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
+
+  @Component({ name: 'neko-settings' })
+  export default class extends Vue {
+    get admin() {
+      return this.$accessor.user.admin
+    }
+
+    get locked() {
+      return this.$accessor.locked
+    }
+
+    toggleMenu() {
+      this.$accessor.client.toggleSide()
+    }
+
+    toggleLock() {
+      if (this.admin) {
+        if (this.locked) {
+          this.$accessor.remote.unlock()
+        } else {
+          this.$accessor.remote.lock()
+        }
+      }
+    }
+  }
+</script>