Initial Version

core/src/layouts/menus/LayoutSystemMenu.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLayoutStore } from '@KTXC/stores/layoutStore';
+import { useIntegrationStore } from '@KTXC/stores/integrationStore';
+import Logo from '@KTXC/layouts/logo/LogoDark.vue';
+import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
+import SystemMenuGroupDynamic from './LayoutSystemMenuGroupDynamic.vue';
+import SystemMenuItem from './LayoutSystemMenuItem.vue';
+
+const layoutStore = useLayoutStore();
+const integrationStore = useIntegrationStore();
+
+// Get all entries based on current menu mode
+const menuEntries = computed(() => {
+  switch (layoutStore.menuMode) {
+    case 'user-settings':
+      return integrationStore.getPoint('user_settings_menu');
+    case 'admin-settings':
+      return integrationStore.getPoint('admin_settings_menu');
+    case 'apps':
+    default:
+      return integrationStore.getPoint('app_menu');
+  }
+});
+
+// Menu mode display info
+const menuModeInfo = computed(() => {
+  switch (layoutStore.menuMode) {
+    case 'user-settings':
+      return {
+        icon: 'mdi-account-cog',
+        label: 'Personal Settings',
+        toggleLabel: 'Admin',
+        toggleIcon: 'mdi-shield-crown',
+      };
+    case 'admin-settings':
+      return {
+        icon: 'mdi-shield-crown',
+        label: 'Administration',
+        toggleLabel: 'Apps',
+        toggleIcon: 'mdi-view-dashboard',
+      };
+    case 'apps':
+    default:
+      return {
+        icon: 'mdi-view-dashboard',
+        label: 'Applications',
+        toggleLabel: 'Settings',
+        toggleIcon: 'mdi-account-cog',
+      };
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  methods: {
+  }
+};
+</script>
+
+<template>
+  <v-navigation-drawer
+    left
+    v-model="layoutStore.sidebarDrawer"
+    elevation="0"
+    rail-width="60"
+    mobile-breakpoint="lg"
+    app
+    class="leftSidebar"
+    :rail="layoutStore.miniSidebar"
+    expand-on-hover
+  >
+    <div class="pa-5">
+      <Logo />
+    </div>
+    <!-- ---------------------------------------------- -->
+    <!---Navigation -->
+    <!-- ---------------------------------------------- -->
+    <perfect-scrollbar class="scrollnavbar">
+      <v-list aria-busy="true" aria-label="menu list">
+        <!---Menu Loop -->
+        <template v-for="entry in menuEntries" :key="entry.id">
+          <!-- Group with dynamic style (collapsible) -->
+          <SystemMenuGroupDynamic 
+            v-if="'items' in entry && entry.style === 'dynamic'" 
+            class="leftPadding" 
+            :group="entry" 
+          />
+          <!-- Group with static style (subheader) -->
+          <SystemMenuGroupStatic 
+            v-else-if="'items' in entry" 
+            :group="entry" 
+          />
+          <!-- Single item (no group) -->
+          <SystemMenuItem 
+            v-else 
+            :item="entry" 
+          />
+        </template>
+      </v-list>
+    </perfect-scrollbar>
+    
+    <!-- Menu Mode Toggle -->
+    <template v-slot:append>
+      <v-divider />
+      <v-list density="compact" class="pa-2">
+        <v-list-item
+          rounded
+          color="primary"
+          @click="layoutStore.toggleMenuMode()"
+          :prepend-icon="menuModeInfo.toggleIcon"
+          class="menu-mode-toggle"
+        >
+          <v-list-item-title class="text-body-2">{{ menuModeInfo.toggleLabel }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>