069a85cf11
Replace all hardcoded hex color values with semantic Tailwind design tokens: - `#bb5b3e` → `accent` - `#a34a31` → `accent-content` / `primary-dark` - `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500` - `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50` - `#8
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-zinc-800">Settings</h1>
|
|
<p class="text-zinc-500 mt-1">Manage your account and preferences.</p>
|
|
</div>
|
|
|
|
<div class="flex gap-6">
|
|
<!-- Settings sub-nav -->
|
|
<aside class="w-44 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-accent text-white'
|
|
: 'text-zinc-500 hover:bg-white hover:text-zinc-800'"
|
|
>
|
|
<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>
|