Organize nav menu into grouped sections with dividers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/layout/AppLayout.vue

@@ -16,18 +16,22 @@
     <v-divider />
 
     <v-list density="compact" nav>
-      <v-list-item
-        v-for="item in navItems"
-        :key="item.route"
-        :prepend-icon="item.icon"
-        :title="item.title"
-        :to="item.route"
-        :value="item.route"
-        :active="isNavActive(item.route)"
-        rounded="xl"
-      >
-        <v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
-      </v-list-item>
+      <template v-for="(group, gi) in navGroups" :key="gi">
+        <v-list-subheader v-if="group.label && !rail" class="text-uppercase text-caption mt-2">{{ group.label }}</v-list-subheader>
+        <v-divider v-if="group.label && rail" class="my-1" />
+        <v-list-item
+          v-for="item in group.items"
+          :key="item.route"
+          :prepend-icon="item.icon"
+          :title="item.title"
+          :to="item.route"
+          :value="item.route"
+          :active="isNavActive(item.route)"
+          rounded="xl"
+        >
+          <v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
+        </v-list-item>
+      </template>
     </v-list>
 
     <template v-slot:append>
@@ -141,22 +145,49 @@ const { notifications, unreadCount, markAllAsRead, markAsRead } = useNotificatio
 
 const isDark = computed(() => theme.global.current.value.dark)
 
-const navItems = [
-  { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' },
-  { title: 'Accounts', icon: 'mdi-bank', route: '/accounts' },
-  { title: 'Transactions', icon: 'mdi-swap-horizontal', route: '/transactions' },
-  { title: 'Categories', icon: 'mdi-tag-multiple', route: '/categories' },
-  { title: 'Payees', icon: 'mdi-account-group', route: '/payees' },
-  { title: 'Budgets', icon: 'mdi-calculator', route: '/budgets' },
-  { title: 'Scheduled', icon: 'mdi-clock-outline', route: '/scheduled' },
-  { title: 'Reconciliation', icon: 'mdi-scale-balance', route: '/reconciliation' },
-  { title: 'Imports', icon: 'mdi-file-upload', route: '/imports' },
-  { title: 'Loans', icon: 'mdi-home-city', route: '/loans' },
-  { title: 'Reports', icon: 'mdi-chart-bar', route: '/reports' },
-  { title: 'Investments', icon: 'mdi-finance', route: '/investments' },
-  { title: 'Settings', icon: 'mdi-cog', route: '/settings' },
+const navGroups = [
+  {
+    label: null,
+    items: [
+      { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' },
+    ],
+  },
+  {
+    label: 'Money',
+    items: [
+      { title: 'Accounts', icon: 'mdi-bank', route: '/accounts' },
+      { title: 'Transactions', icon: 'mdi-swap-horizontal', route: '/transactions' },
+      { title: 'Loans', icon: 'mdi-home-city', route: '/loans' },
+      { title: 'Investments', icon: 'mdi-finance', route: '/investments' },
+    ],
+  },
+  {
+    label: 'Planning',
+    items: [
+      { title: 'Budgets', icon: 'mdi-calculator', route: '/budgets' },
+      { title: 'Scheduled', icon: 'mdi-clock-outline', route: '/scheduled' },
+      { title: 'Categories', icon: 'mdi-tag-multiple', route: '/categories' },
+      { title: 'Payees', icon: 'mdi-account-group', route: '/payees' },
+    ],
+  },
+  {
+    label: 'Tools',
+    items: [
+      { title: 'Reconciliation', icon: 'mdi-scale-balance', route: '/reconciliation' },
+      { title: 'Imports', icon: 'mdi-file-upload', route: '/imports' },
+      { title: 'Reports', icon: 'mdi-chart-bar', route: '/reports' },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
+      { title: 'Settings', icon: 'mdi-cog', route: '/settings' },
+    ],
+  },
 ]
 
+const navItems = navGroups.flatMap(g => g.items)
+
 function isNavActive(navRoute: string) {
   if (route.path === navRoute) return true
   // Highlight "Transactions" when viewing account-scoped transactions