60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { KeyRound, Palette, User } from '@lucide/vue';
|
|
import { computed } from 'vue';
|
|
import AdminLayout from '@/layouts/AdminLayout.vue';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const page = usePage();
|
|
|
|
const currentPath = computed(() => page.url.split('?')[0]);
|
|
|
|
const navItems = [
|
|
{
|
|
href: '/admin/setting/profile',
|
|
label: 'Profil',
|
|
icon: User,
|
|
},
|
|
{
|
|
href: '/admin/setting/password',
|
|
label: 'Kata Sandi',
|
|
icon: KeyRound,
|
|
},
|
|
{
|
|
href: '/admin/setting/appearance',
|
|
label: 'Tampilan',
|
|
icon: Palette,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Pengaturan">
|
|
<div class="space-y-6">
|
|
<div class="space-y-1">
|
|
<h2 class="text-2xl font-bold tracking-tight">
|
|
Pengaturan
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6 lg:flex-row">
|
|
<nav class="flex shrink-0 flex-row gap-1 overflow-x-auto lg:w-56 lg:flex-col lg:overflow-visible">
|
|
<Link v-for="item in navItems" :key="item.href" :href="item.href" :class="cn(
|
|
'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
|
|
currentPath === item.href
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground',
|
|
)">
|
|
<component :is="item.icon" class="size-4 shrink-0" />
|
|
{{ item.label }}
|
|
</Link>
|
|
</nav>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|