Add a proper setting menu

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Settings/SettingMenuItem.vue

@@ -0,0 +1,54 @@
+<template>
+    <li class="setting-menu-item" :class="{ active: isActive }">
+        <router-link v-if="menuItem.to" :to="menuItem.to">
+            <span>{{ menuItem.title }}</span>
+        </router-link>
+        <span v-else>{{ menuItem.title }}</span>
+    </li>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { ISettingMenuSection } from '@/types/setting-menu.model';
+
+@Component
+export default class SettingMenuItem extends Vue {
+  @Prop({ required: true, type: Object }) menuItem!: ISettingMenuSection;
+
+  get isActive() {
+    if (!this.menuItem.to) return false;
+    if (this.menuItem.to.name === this.$route.name) {
+      if (this.menuItem.to.params) {
+        return this.menuItem.to.params.identityName === this.$route.params.identityName;
+      }
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
+    li.setting-menu-item {
+        font-size: 1.05rem;
+        background-color: #fff1de;
+        color: $primary;
+        margin: auto;
+
+        span {
+            padding: 5px 15px;
+            display: block;
+        }
+
+        a {
+            display: block;
+            color: inherit;
+        }
+
+        &:hover, &.active {
+            cursor: pointer;
+            background-color: lighten(#fea72b, 10%);
+        }
+    }
+</style>