diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 6738768..5fe39ee 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -16,18 +16,22 @@
-
- {{ item.title }}
-
+
+ {{ group.label }}
+
+
+ {{ item.title }}
+
+
@@ -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