Initial Version

core/src/layouts/menus/LayoutUserMenu.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+import { useUserStore } from '@KTXC/stores/userStore';
+import { useIntegrationStore } from '@KTXC/stores/integrationStore';
+import { useLayoutStore } from '@KTXC/stores/layoutStore';
+import { useRouter } from 'vue-router';
+
+const theme = useTheme();
+const router = useRouter();
+const userStore = useUserStore();
+const integrationStore = useIntegrationStore();
+const layoutStore = useLayoutStore();
+
+const identityData = computed(() => userStore.user);
+const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
+
+// Theme toggle
+const isDarkMode = computed(() => theme.global.name.value === 'dark');
+const toggleTheme = () => {
+  const newTheme = theme.global.name.value === 'light' ? 'dark' : 'light';
+  theme.global.name.value = newTheme;
+  localStorage.setItem('theme', newTheme);
+};
+
+// Navigate to settings
+const goToSettings = () => {
+  layoutStore.setMenuMode('settings');
+  // Navigate to first settings item or a default settings route
+  router.push('/modules'); // TODO: Make this dynamic based on first settings menu item
+};
+</script>
+
+<template>
+  <!-- ---------------------------------------------- -->
+  <!-- Profile Dropdown -->
+  <!-- ---------------------------------------------- -->
+  <div>
+    <!-- User Info Header -->
+    <div class="d-flex align-center pa-5">
+      <v-avatar size="32" class="mr-2">
+        <img src="@KTXC/assets/images/users/avatar-1.png" width="32" />
+      </v-avatar>
+      <div>
+        <h6 class="text-h6 mb-0">
+          {{ identityData?.label || 'User Name' }}
+        </h6>
+        <p class="text-caption mb-0">{{ identityData?.email || '' }}</p>
+      </div>
+    </div>
+    <v-divider />
+    
+    <perfect-scrollbar style="max-height: 280px">
+      <v-list class="py-0" aria-label="profile menu" aria-busy="true">
+        <!-- Dynamic Profile Menu Items (from modules) -->
+        <v-list-item
+          v-for="item in profileMenuItems"
+          :key="item.id"
+          :to="item.toType === 'external' ? undefined : item.to"
+          :href="item.toType === 'external' ? item.to : undefined"
+          :target="item.toType === 'external' ? '_blank' : undefined"
+          color="primary"
+          rounded="0"
+        >
+          <template v-slot:prepend>
+            <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
+          </template>
+          <v-list-item-title class="text-h6">{{ item.label }}</v-list-item-title>
+        </v-list-item>
+
+        <v-divider v-if="profileMenuItems.length" class="my-2" />
+
+        <!-- Theme Toggle -->
+        <v-list-item @click="toggleTheme" color="primary" rounded="0">
+          <template v-slot:prepend>
+            <v-icon>{{ isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
+          </template>
+          <v-list-item-title class="text-h6">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</v-list-item-title>
+        </v-list-item>
+
+        <!-- Go to Settings -->
+        <v-list-item @click="goToSettings" color="primary" rounded="0">
+          <template v-slot:prepend>
+            <v-icon>mdi-cog-outline</v-icon>
+          </template>
+          <v-list-item-title class="text-h6">Settings</v-list-item-title>
+        </v-list-item>
+
+        <v-divider class="my-2" />
+
+        <!-- Logout -->
+        <v-list-item @click="userStore.logout()" color="secondary" rounded="0">
+          <template v-slot:prepend>
+            <v-icon>mdi-logout</v-icon>
+          </template>
+          <v-list-item-title class="text-h6">Logout</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </perfect-scrollbar>
+  </div>
+</template>