Add dropdown to navigation

client/src/components/MainNavigationBar.vue

@@ -1,14 +1,18 @@
 <script setup>
 import * as log from 'loglevel';
 
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, shallowRef } from 'vue';
 import { useUserStore } from '@/stores/user';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useAppStore } from '@/stores/app';
+import IconLogout from "@/components/icons/IconLogout.vue";
+import IconSettings from "@/components/icons/IconSettings.vue";
+import ItDropdown from "@/components/ui/ItDropdown.vue";
 
 log.debug('MainNavigationBar created');
 
 const route = useRoute()
+const router = useRouter()
 const userStore = useUserStore();
 const appStore = useAppStore();
 const state = reactive({showMenu: false});
@@ -37,10 +41,45 @@ function backButtonUrl() {
   return '/';
 }
 
+function handleDropdownSelect(data) {
+  log.debug('Selected action:', data.action)
+  switch (data.action) {
+    case 'settings':
+      router.push('/profile')
+      break
+    case 'logout':
+      router.push('/logout')
+      break
+    default:
+      console.log('no action')
+  }
+}
+
 onMounted(() => {
   log.debug('MainNavigationBar mounted');
 })
 
+const profileDropdownData = shallowRef([
+    [
+      {
+        title: 'Kontoeinstellungen',
+        icon: IconSettings,
+        data: {
+          action: 'settings'
+        }
+      }
+    ],
+    [
+      {
+        title: 'Abmelden',
+        icon: IconLogout,
+        data: {
+          action: 'logout'
+        }
+      },
+    ]
+  ])
+
 </script>
 
 <template>
@@ -142,11 +181,13 @@ onMounted(() => {
           >
             <it-icon-message class="w-8 h-8 mr-2"/>
           </router-link>
-          <router-link
-            to="/profile"
-            class="nav-item flex items-center"
-          >
-            <div v-if="userStore.loggedIn">
+          <div class="nav-item flex items-center" v-if="userStore.loggedIn">
+            <ItDropdown
+              :button-classes="[]"
+              :list-items="profileDropdownData"
+              :align="'right'"
+              @select="handleDropdownSelect"
+            >
               <div v-if="userStore.avatar_url">
                 <img class="inline-block h-8 w-8 rounded-full"
                      :src="userStore.avatar_url"
@@ -155,9 +196,9 @@ onMounted(() => {
               <div v-else>
                 {{ userStore.getFullName }}
               </div>
-            </div>
-            <div v-else><a class="" href="/login">Login</a></div>
-          </router-link>
+            </ItDropdown>
+          </div>
+          <div v-else><a class="" href="/login">Login</a></div>
         </div>
       </nav>
     </div>

client/src/components/ui/ItDropdown.vue

@@ -5,7 +5,6 @@ import {Menu, MenuButton, MenuItems, MenuItem} from '@headlessui/vue'
 
 const props = defineProps<{
   buttonClasses: [string],
-  buttonText: string,
   listItems: [
     [object]
   ],
@@ -24,7 +23,7 @@ const emit = defineEmits<{
       <MenuButton
         :class="buttonClasses"
       >
-        {{buttonText}}
+        <slot></slot>
       </MenuButton>
     </div>
 

client/src/views/StyelGuideView.vue

@@ -337,10 +337,9 @@ function log(data: any) {
       <ItDropdown
         :button-classes="['btn-primary']"
         :list-items="dropdownData"
-        :button-text="'Click me'"
         :align="'left'"
         @select="log"
-      />
+      >Click Me</ItDropdown>
     </div>
 
   </main>