74 lines
3.2 KiB
Vue
74 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { Settings2 } from 'lucide-vue-next';
|
|
import { useAppNavigation } from '@/composables/useAppNavigation';
|
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import { toUrl } from '@/lib/utils';
|
|
|
|
defineProps<{ projectName: string; projectKey: string }>();
|
|
const { projectSettingsItems } = useAppNavigation();
|
|
const { isCurrentUrl } = useCurrentUrl();
|
|
const { t } = useLocalization();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-7xl flex-1 flex-col p-4"
|
|
>
|
|
<header class="gap-stack grid min-w-0">
|
|
<div class="text-primary flex items-center gap-2">
|
|
<Settings2 class="size-4" aria-hidden="true" />
|
|
<p class="text-label text-muted-foreground break-all uppercase">
|
|
{{ projectKey }}
|
|
</p>
|
|
</div>
|
|
<h1 class="text-headline-mobile md:text-headline break-words">
|
|
{{ t('navigation.projectSettings') }}
|
|
</h1>
|
|
<p class="text-muted-foreground break-words">
|
|
{{ t('projectSettings.description', { project: projectName }) }}
|
|
</p>
|
|
</header>
|
|
<div
|
|
class="bg-card grid min-w-0 grid-cols-1 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
|
|
>
|
|
<aside
|
|
class="bg-muted/35 min-w-0 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
|
|
>
|
|
<nav
|
|
class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
|
|
:aria-label="t('navigation.projectSettings')"
|
|
>
|
|
<Link
|
|
v-for="item in projectSettingsItems"
|
|
:key="toUrl(item.href)"
|
|
:href="item.href"
|
|
:aria-current="
|
|
isCurrentUrl(item.href) ? 'page' : undefined
|
|
"
|
|
:class="[
|
|
'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
|
|
isCurrentUrl(item.href)
|
|
? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
|
|
: 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
|
|
]"
|
|
>
|
|
<component
|
|
:is="item.icon"
|
|
class="size-4 shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
<span class="whitespace-nowrap">{{ item.title }}</span>
|
|
</Link>
|
|
</nav>
|
|
</aside>
|
|
<div class="min-w-0 p-4 sm:p-6 lg:p-8">
|
|
<section class="gap-page mx-auto grid w-full min-w-0 max-w-3xl">
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|