feat: add settings routes and SettingsLayout sub-nav

resources/js/router/index.js

@@ -4,6 +4,10 @@ import DashboardLayout from '../views/dashboard/DashboardLayout.vue'
 import Overview from '../views/dashboard/Overview.vue'
 import SavedStations from '../views/dashboard/SavedStations.vue'
 import Preferences from '../views/dashboard/Preferences.vue'
+import SettingsLayout from '../views/dashboard/settings/SettingsLayout.vue'
+import Profile from '../views/dashboard/settings/Profile.vue'
+import Security from '../views/dashboard/settings/Security.vue'
+import Appearance from '../views/dashboard/settings/Appearance.vue'
 
 const routes = [
     { path: '/', component: Home, name: 'home' },
@@ -14,6 +18,16 @@ const routes = [
             { path: '', component: Overview, name: 'dashboard' },
             { path: 'saved-stations', component: SavedStations, name: 'dashboard.saved-stations' },
             { path: 'preferences', component: Preferences, name: 'dashboard.preferences' },
+            {
+                path: 'settings',
+                component: SettingsLayout,
+                redirect: '/dashboard/settings/profile',
+                children: [
+                    { path: 'profile', component: Profile, name: 'dashboard.settings.profile' },
+                    { path: 'security', component: Security, name: 'dashboard.settings.security' },
+                    { path: 'appearance', component: Appearance, name: 'dashboard.settings.appearance' },
+                ],
+            },
         ],
     },
 ]

resources/js/views/dashboard/settings/Appearance.vue

@@ -0,0 +1 @@
+<template><div></div></template>

resources/js/views/dashboard/settings/Profile.vue

@@ -0,0 +1 @@
+<template><div></div></template>

resources/js/views/dashboard/settings/Security.vue

@@ -0,0 +1 @@
+<template><div></div></template>

resources/js/views/dashboard/settings/SettingsLayout.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="space-y-6">
+        <div>
+            <h1 class="text-2xl font-black text-[#4a3f3b]">Settings</h1>
+            <p class="text-[#89726c] mt-1">Manage your account and preferences.</p>
+        </div>
+
+        <div class="flex gap-6">
+            <!-- Settings sub-nav -->
+            <aside class="w-44 flex-shrink-0">
+                <nav class="space-y-1">
+                    <RouterLink
+                        v-for="item in settingsNav"
+                        :key="item.to"
+                        :to="item.to"
+                        class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-bold transition-colors"
+                        :class="$route.path === item.to
+                            ? 'bg-[#bb5b3e] text-white'
+                            : 'text-[#89726c] hover:bg-white hover:text-[#4a3f3b]'"
+                    >
+                        <iconify-icon :icon="item.icon"></iconify-icon>
+                        {{ item.label }}
+                    </RouterLink>
+                </nav>
+            </aside>
+
+            <!-- Settings content -->
+            <div class="flex-1 min-w-0">
+                <RouterView />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+
+const $route = useRoute()
+
+const settingsNav = [
+    { to: '/dashboard/settings/profile', label: 'Profile', icon: 'lucide:user' },
+    { to: '/dashboard/settings/security', label: 'Security', icon: 'lucide:shield' },
+    { to: '/dashboard/settings/appearance', label: 'Appearance', icon: 'lucide:sun-moon' },
+]
+</script>