routing improved, settings initialized

frontend/src/components/AppNavigation.vue

@@ -1,42 +1,42 @@
 <template>
   <nav>
     <ul>
-      <li v-for="item in menu" :key="item.text">
-        <a href="#">{{ $t(`navigation.${item.text}`) }}</a>
-        <ul v-if="item.submenu">
-          <li v-for="subitem in item.submenu" :key="subitem.text">
-            <a href="#">{{ $t(`navigation.${subitem.text}`) }}</a>
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem">
+        <a :href="item.path" v-if="item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</a>
+        <span v-if="!item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</span>
+        <ul v-if="item.children" class="submenu1">
+          <li v-for="(subitem, subkey) in item.children" :key="subitem.text">
+            <a :href="subitem.path" v-if="subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</a>
+            <span v-if="!subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
           </li>
         </ul>
       </li>
     </ul>
     <div class="right-block">
-      <button @click="accessMailbox">{{ $t('navigation.mailbox') }}</button>
-      <button @click="logout">{{ $t('navigation.logout') }}</button>
+      <span @click="accessMailbox" class="mailbox"></span>
+      <span class="logoutblock">
+        <span class="username">{{ user.username }} </span>
+        <span @click="logout" class="menuitem">{{ $t('navigation.logout') }}</span>
+      </span>
     </div>
   </nav>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 
 export default {
   name: 'AppNavigation',
   computed: {
-    ...mapGetters('menu'),
+    ...mapGetters(['menu', 'user']),
   },
   created() {
-    if(this.$store.getters.hashedId) {
-      this.$store.dispatch('loadMenu');
+    if (this.user && this.user.hashedId) {
+      this.loadMenu();
     }
   },
   methods: {
-    accessMailbox() {
-      alert('Accessing Mailbox...');
-    },
-    logout() {
-      this.$store.dispatch('logout');
-    }
+    ...mapActions(['loadMenu', 'logout']),
   }
 };
 </script>
@@ -45,37 +45,87 @@ export default {
 @import '../assets/styles.scss';
 
 nav,
-nav > ul{
+nav>ul {
   display: flex;
   justify-content: space-between;
   background-color: #F9A22C;
   color: #000000;
-  padding: 10px;
+  padding: 0;
   flex-direction: row;
+  margin: 0;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
-li {
-  margin: 5px 0;
+
+nav>ul>li {
+  padding: 0 1em;
+  line-height: 2.5em;
+  transition: background-color 0.25s;
 }
-a {
+
+nav>ul>li:hover {
+  background-color: #D37C06;
+  white-space: nowrap;
+}
+nav>ul>li:hover > span {
   color: #000000;
+}
+
+nav>ul>li:hover > ul{
+  display: inline-block;
+}
+
+a {
   text-decoration: none;
 }
+
 .right-block {
   display: flex;
   gap: 10px;
 }
-button {
-  background-color: #495057;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  cursor: pointer;
+
+.logoutblock {
+  display: flex;
+  flex-direction: column;
 }
-button:hover {
-  background-color: #6c757d;
+
+.menuitem {
+  cursor: pointer;
+  color: #7E471B;
+}
+
+.mailbox {
+  background-image: url('@/assets/images/icons/message24.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding-left: 24px;
+  text-align: left;
+}
+
+.mainmenuitem {
+  position: relative;
+}
+
+.submenu1 {
+  position: absolute;
+  border: 1px solid #7E471B;
+  background-color: #F9A22C;
+  display: none;
+  left: 0;
+  top: 2.5em;
+}
+.submenu1 > li {
+  padding: 0.5em;
+  line-height: 1em;
+  color: #7E471B;
+}
+.submenu1>li:hover {
+  color: #000000;
+  background-color: #D37C06;
 }
 </style>