From e47d0ed619ad8e78404726a5fe3861cb532c24b2 Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Sun, 26 Jul 2026 18:20:40 -0400
Subject: [PATCH] feat: improve menu section selector

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 core/src/layouts/menus/LayoutSystemMenu.vue | 93 ++++++++++++---------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/core/src/layouts/menus/LayoutSystemMenu.vue b/core/src/layouts/menus/LayoutSystemMenu.vue
index c7a6a58..68ce5b1 100644
--- a/core/src/layouts/menus/LayoutSystemMenu.vue
+++ b/core/src/layouts/menus/LayoutSystemMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useLayoutStore } from '@KTXC/stores/layoutStore';
+import { useLayoutStore, type MenuMode } from '@KTXC/stores/layoutStore';
 import { useIntegrationStore } from '@KTXC/stores/integrationStore';
 import { useL10n } from '@KTXC/composables/useL10n';
 import Logo from '@KTXC/layouts/logo/LogoDark.vue';
@@ -25,33 +25,12 @@ const menuEntries = computed(() => {
   }
 });
 
-// Menu mode display info
-const menuModeInfo = computed(() => {
-  switch (layoutStore.menuMode) {
-    case 'user-settings':
-      return {
-        icon: 'mdi-account-cog',
-        label: t('systemMenu.personalSettings', 'Settings'),
-        toggleLabel: t('systemMenu.adminSettings', 'System'),
-        toggleIcon: 'mdi-shield-crown',
-      };
-    case 'admin-settings':
-      return {
-        icon: 'mdi-shield-crown',
-        label: t('systemMenu.adminSettings', 'System'),
-        toggleLabel: t('systemMenu.apps', 'Applications'),
-        toggleIcon: 'mdi-view-dashboard',
-      };
-    case 'apps':
-    default:
-      return {
-        icon: 'mdi-view-dashboard',
-        label: t('systemMenu.apps', 'Applications'),
-        toggleLabel: t('systemMenu.userSettings', 'Settings'),
-        toggleIcon: 'mdi-account-cog',
-      };
-  }
-});
+// Static list of menu modes shown as icon buttons
+const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => [
+  { value: 'apps', icon: 'mdi-view-dashboard', label: t('systemMenu.apps', 'Applications') },
+  { value: 'user-settings', icon: 'mdi-account-cog', label: t('systemMenu.personalSettings', 'Settings') },
+  { value: 'admin-settings', icon: 'mdi-shield-crown', label: t('systemMenu.adminSettings', 'System') },
+]);
 </script>
 
 <script lang="ts">
@@ -103,20 +82,56 @@ export default {
       </v-list>
     </perfect-scrollbar>
     
-    <!-- Menu Mode Toggle -->
+    <!-- Menu Mode Switcher -->
     <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"
+      <div class="menu-mode-switcher d-flex justify-space-around align-center py-2">
+        <v-tooltip
+          v-for="mode in menuModes"
+          :key="mode.value"
+          location="right"
         >
-          <v-list-item-title class="text-body-2">{{ menuModeInfo.toggleLabel }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="props"
+              icon
+              variant="text"
+              density="comfortable"
+              :color="layoutStore.menuMode === mode.value ? 'primary' : undefined"
+              :class="['menu-mode-btn', { 'menu-mode-btn--active': layoutStore.menuMode === mode.value }]"
+              @click="layoutStore.setMenuMode(mode.value)"
+            >
+              <v-icon>{{ mode.icon }}</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ mode.label }}</span>
+        </v-tooltip>
+      </div>
     </template>
   </v-navigation-drawer>
 </template>
+
+<style scoped>
+.menu-mode-btn {
+  opacity: 0.6;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.menu-mode-btn:hover {
+  opacity: 1;
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+}
+
+.menu-mode-btn--active {
+  opacity: 1;
+}
+
+/* Collapsed rail: only the active mode icon fits without crowding */
+.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .menu-mode-switcher {
+  justify-content: center;
+}
+
+.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .menu-mode-btn:not(.menu-mode-btn--active) {
+  display: none;
+}
+</style>