Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <script setup lang="ts">
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { toUrl, urlIsActive } from '@/lib/utils';
import { edit as editAppearance } from '@/routes/appearance';
import { edit as editPassword } from '@/routes/password';
import { edit as editProfile } from '@/routes/profile';
import { show } from '@/routes/two-factor';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/vue3';
const sidebarNavItems: NavItem[] = [
{
title: 'Profile',
href: editProfile(),
},
{
title: 'Password',
href: editPassword(),
},
{
title: 'Two-Factor Auth',
href: show(),
},
{
title: 'Appearance',
href: editAppearance(),
},
];
const currentPath = typeof window !== undefined ? window.location.pathname : '';
</script>
<template>
<div class="px-4 py-6">
<Heading
title="Settings"
description="Manage your profile and account settings"
/>
<div class="flex flex-col lg:flex-row lg:space-x-12">
<aside class="w-full max-w-xl lg:w-48">
<nav class="flex flex-col space-y-1 space-x-0">
<Button
v-for="item in sidebarNavItems"
:key="toUrl(item.href)"
variant="ghost"
:class="[
'w-full justify-start',
{ 'bg-muted': urlIsActive(item.href, currentPath) },
]"
as-child
>
<Link :href="item.href">
<component :is="item.icon" class="h-4 w-4" />
{{ item.title }}
</Link>
</Button>
</nav>
</aside>
<Separator class="my-6 lg:hidden" />
<div class="flex-1 md:max-w-2xl">
<section class="max-w-xl space-y-12">
<slot />
</section>
</div>
</div>
</div>
</template>
|