Add a proper setting menu

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

js/src/components/NavBar.vue

@@ -52,7 +52,7 @@
 <!--            {{ $t('Create group') }}-->
 <!--          </b-navbar-item>-->
 
-          <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.DASHBOARD }">
+          <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.ADMIN_DASHBOARD }">
             {{ $t('Administration') }}
           </b-navbar-item>
 

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>

js/src/components/Settings/SettingMenuSection.vue

@@ -0,0 +1,48 @@
+<template>
+    <li :class="{ active: sectionActive }">
+        <router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link>
+        <b v-else>{{ menuSection.title }}</b>
+        <ul>
+            <setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" />
+        </ul>
+    </li>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { ISettingMenuSection } from '@/types/setting-menu.model';
+import SettingMenuItem from '@/components/Settings/SettingMenuItem.vue';
+@Component({
+  components: { SettingMenuItem },
+})
+export default class SettingMenuSection extends Vue {
+  @Prop({ required: true, type: Object }) menuSection!: ISettingMenuSection;
+
+  get sectionActive(): boolean|undefined {
+    return this.menuSection.items && this.menuSection.items.some((({ to }) => to && to.name === this.$route.name));
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
+    li {
+        font-size: 1.3rem;
+        background-color: $secondary;
+        color: $primary;
+        margin: 2px auto;
+
+        &.active {
+            background-color: #fea72b;
+        }
+
+        a, b {
+            cursor: pointer;
+            margin: 5px 0;
+            display: block;
+            padding: 5px 10px;
+            color: inherit;
+            font-weight: 500;
+        }
+    }
+</style>

js/src/components/Settings/SettingsMenu.vue

@@ -0,0 +1,18 @@
+<template>
+    <ul>
+        <SettingMenuSection v-for="section in menuValue" :key="section.title" :menu-section="section" />
+    </ul>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import SettingMenuSection from '@/components/Settings/SettingMenuSection.vue';
+import { ISettingMenuSection } from '@/types/setting-menu.model';
+@Component({
+  components: { SettingMenuSection },
+})
+export default class SettingsMenu extends Vue {
+  @Prop({ required: true, type: Array }) menu!: ISettingMenuSection[];
+
+  get menuValue() { return this.menu; }
+}
+</script>