46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<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>
|