Erster Aufbau Forum

frontend/src/components/AppNavigation.vue

@@ -1,14 +1,22 @@
 <template>
   <nav>
     <ul>
-      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null)">
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null, !!item.children)">
         <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" @click="openPage(subitem.path ?? null)">
-            <span v-if="subitem.icon" :style="`background-image:url('/images/icons/${subitem.icon}')`" class="submenu-icon">&nbsp;</span>
+          <li v-for="(subitem, subkey) in item.children" :key="subitem.text"
+            @click="openPage(subitem.path ?? null, !!subitem.children && subkey !== 'forum')">
+            <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>
+            <span v-if="subkey === 'forum'" class="subsubmenu">&#x25B6;</span>
+            <ul v-if="subkey === 'forum' && forumList.length > 0" class="submenu2">
+              <li v-for="forum in forumList" :key="forum.id" @click="openForum(forum.id, $event)">
+                {{ forum.name }}
+              </li>
+            </ul>
           </li>
         </ul>
       </li>
@@ -25,23 +33,60 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';
 
 export default {
   name: 'AppNavigation',
+  data() {
+    return {
+      forumList: []
+    }
+  },
   computed: {
     ...mapGetters(['menu', 'user']),
   },
   created() {
-    if (this.user && this.user.hashedId) {
+    if (this.user && this.user.id) {
       this.loadMenu();
+      this.fetchForums();
+    } else {
+      console.log(this.user);
+    }
+  },
+  mounted() {
+    this.forumInterval = setInterval(() => {
+      this.fetchForums();
+    }, 60000);
+  },
+  beforeDestroy() {
+    if (this.forumInterval) {
+      clearInterval(this.forumInterval);
     }
   },
   methods: {
     ...mapActions(['loadMenu', 'logout']),
-    openPage(url) {
+    openPage(url, hasSubmenu = false) {
+      if (hasSubmenu) {
+        return;
+      }
       if (url) {
+        console.log('openPage', url);
         this.$router.push(url);
       }
+    },
+    openForum(forumId, event) {
+      event.stopPropagation();
+      console.log('openForum', forumId);
+      this.$router.push({ name: 'Forum', params: { id: forumId } });
+    },
+
+    async fetchForums() {
+      try {
+        const response = await apiClient.get('/api/forum');
+        this.forumList = response.data;
+      } catch (error) {
+        console.error('Error fetching forums:', error);
+      }
     }
   }
 };
@@ -127,7 +172,7 @@ a {
   left: 0;
   top: 2.5em;
   max-height: 0;
-  overflow: hidden;
+  overflow: visible;
   opacity: 0;
   visibility: hidden;
   transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
@@ -144,6 +189,7 @@ a {
   padding: 0.5em;
   line-height: 1em;
   color: #7E471B;
+  position: relative;
 }
 
 .submenu1>li:hover {
@@ -159,8 +205,9 @@ a {
   display: inline-block;
   line-height: 1.6em;
 }
+
 .submenu-icon {
-width: 1.2em;
+  width: 1.2em;
   height: 1em;
   margin-right: 3px;
   background-repeat: no-repeat;
@@ -168,4 +215,41 @@ width: 1.2em;
   line-height: 1em;
   background-size: 1.2em 1.2em;
 }
+
+.submenu2 {
+  position: absolute;
+  background-color: #F9A22C;
+  left: 100%;
+  top: 0;
+  border: 1px solid #7E471B;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
+}
+
+.submenu1>li:hover .submenu2 {
+  max-height: 500px;
+  opacity: 1;
+  visibility: visible;
+  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s;
+}
+
+.submenu2>li {
+  padding: 0.5em;
+  line-height: 1em;
+  color: #7E471B;
+}
+
+.submenu2>li:hover {
+  color: #000000;
+  background-color: #D37C06;
+}
+
+.subsubmenu {
+  float: right;
+  font-size: 8pt;
+  margin-right: -4px;
+}
 </style>