92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
import Heading from '@/components/Heading.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
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 { t } = useLocalization();
|
|
const sidebarNavItems = computed<NavItem[]>(() => [
|
|
{
|
|
title: t('navigation.profile'),
|
|
href: editProfile(),
|
|
},
|
|
{
|
|
title: t('navigation.security'),
|
|
href: editSecurity(),
|
|
},
|
|
{
|
|
title: t('navigation.gitConnections'),
|
|
href: editGitConnections(),
|
|
},
|
|
{
|
|
title: t('navigation.applications'),
|
|
href: editApplications(),
|
|
},
|
|
{
|
|
title: t('navigation.appearance'),
|
|
href: editAppearance(),
|
|
},
|
|
]);
|
|
|
|
const { isCurrentOrParentUrl } = useCurrentUrl();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-4 py-6">
|
|
<Heading
|
|
:title="t('navigation.settings')"
|
|
:description="t('navigation.settingsDescription')"
|
|
/>
|
|
|
|
<div class="flex min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
|
|
<aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
|
|
<nav
|
|
class="flex gap-1 overflow-x-auto lg:flex-col"
|
|
:aria-label="t('navigation.settings')"
|
|
>
|
|
<Button
|
|
v-for="item in sidebarNavItems"
|
|
:key="toUrl(item.href)"
|
|
variant="ghost"
|
|
:class="[
|
|
'shrink-0 justify-start lg:w-full',
|
|
{ 'bg-muted': isCurrentOrParentUrl(item.href) },
|
|
]"
|
|
as-child
|
|
>
|
|
<Link
|
|
:href="item.href"
|
|
:aria-current="
|
|
isCurrentOrParentUrl(item.href)
|
|
? 'page'
|
|
: undefined
|
|
"
|
|
>
|
|
<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 md:max-w-2xl">
|
|
<section class="max-w-xl space-y-12">
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|