99 lines
3.1 KiB
Vue
99 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import {
|
|
GitBranch,
|
|
KeyRound,
|
|
Palette,
|
|
ShieldCheck,
|
|
UserRound,
|
|
} from 'lucide-vue-next';
|
|
import Heading from '@/components/Heading.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
|
import { toUrl } from '@/lib/utils';
|
|
import { edit as editAppearance } from '@/routes/appearance/index';
|
|
import { edit as editApplications } from '@/routes/applications/index';
|
|
import { edit as editGitConnections } from '@/routes/git-connections/index';
|
|
import { edit as editProfile } from '@/routes/profile/index';
|
|
import { edit as editSecurity } from '@/routes/security/index';
|
|
import type { NavItem } from '@/types';
|
|
|
|
const sidebarNavItems: NavItem[] = [
|
|
{
|
|
title: 'Profile',
|
|
href: editProfile(),
|
|
icon: UserRound,
|
|
},
|
|
{
|
|
title: 'Security',
|
|
href: editSecurity(),
|
|
icon: ShieldCheck,
|
|
},
|
|
{
|
|
title: 'Git connections',
|
|
href: editGitConnections(),
|
|
icon: GitBranch,
|
|
},
|
|
{
|
|
title: 'Applications',
|
|
href: editApplications(),
|
|
icon: KeyRound,
|
|
},
|
|
{
|
|
title: 'Appearance',
|
|
href: editAppearance(),
|
|
icon: Palette,
|
|
},
|
|
];
|
|
|
|
const { isCurrentOrParentUrl } = useCurrentUrl();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-page-narrow">
|
|
<Heading
|
|
title="Settings"
|
|
description="Manage your profile, security, and Git integration settings"
|
|
/>
|
|
|
|
<div class="grid gap-6 lg:grid-cols-[14rem_minmax(0,1fr)]">
|
|
<aside class="w-full">
|
|
<nav
|
|
class="border-outline-variant bg-surface-container-lowest shadow-xs flex gap-1 overflow-x-auto rounded-xl border p-2 lg:flex-col"
|
|
aria-label="Settings"
|
|
>
|
|
<Button
|
|
v-for="item in sidebarNavItems"
|
|
:key="toUrl(item.href)"
|
|
variant="ghost"
|
|
:class="[
|
|
'shrink-0 justify-start lg:w-full',
|
|
{
|
|
'bg-primary/12 text-on-primary-container hover:bg-primary/16 dark:text-primary-fixed':
|
|
isCurrentOrParentUrl(item.href),
|
|
},
|
|
]"
|
|
as-child
|
|
>
|
|
<Link :href="item.href">
|
|
<component :is="item.icon" class="h-4 w-4" />
|
|
{{ item.title }}
|
|
</Link>
|
|
</Button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<Separator class="lg:hidden" />
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<section
|
|
class="border-outline-variant bg-surface-container-lowest shadow-xs space-y-12 rounded-xl border p-5 sm:p-7"
|
|
>
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|