En-/decryption fixed

frontend/src/components/AppNavigation.vue

@@ -1,13 +1,14 @@
 <template>
   <nav>
     <ul>
-      <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>
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null)">
+        <span v-if="item.icon" :style="`background-image:url('/images/icons/${item.icon}')`"
+          class="menu-icon">&nbsp;</span>
+        <span>{{ $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 v-for="(subitem, subkey) in item.children" :key="subitem.text" @click="openPage(subitem.path ?? null)">
+            <span v-if="subitem.icon" :style="`background-image:url('/images/icons/${subitem.icon}')`" class="submenu-icon">&nbsp;</span>
+            <span>{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
           </li>
         </ul>
       </li>
@@ -37,6 +38,11 @@ export default {
   },
   methods: {
     ...mapActions(['loadMenu', 'logout']),
+    openPage(url) {
+      if (url) {
+        this.$router.push(url);
+      }
+    }
   }
 };
 </script>
@@ -71,11 +77,12 @@ nav>ul>li:hover {
   background-color: #D37C06;
   white-space: nowrap;
 }
-nav>ul>li:hover > span {
+
+nav>ul>li:hover>span {
   color: #000000;
 }
 
-nav>ul>li:hover > ul{
+nav>ul>li:hover>ul {
   display: inline-block;
 }
 
@@ -119,13 +126,33 @@ a {
   left: 0;
   top: 2.5em;
 }
-.submenu1 > li {
+
+.submenu1>li {
   padding: 0.5em;
   line-height: 1em;
   color: #7E471B;
 }
+
 .submenu1>li:hover {
   color: #000000;
   background-color: #D37C06;
 }
+
+.menu-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 3px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  line-height: 1.6em;
+}
+.submenu-icon {
+width: 1.2em;
+  height: 1em;
+  margin-right: 3px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  line-height: 1em;
+  background-size: 1.2em 1.2em;
+}
 </style>