feat: add settings routes and SettingsLayout sub-nav

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>