90 lines
3.4 KiB
Vue
90 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { ChevronDown, Settings2 } from 'lucide-vue-next';
|
|
import { computed } from 'vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { useAppNavigation } from '@/composables/useAppNavigation';
|
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
|
|
const { projectItems, projectSettingsItems } = useAppNavigation();
|
|
const { isCurrentUrl } = useCurrentUrl();
|
|
const { t } = useLocalization();
|
|
const settingsActive = computed(() =>
|
|
projectSettingsItems.value.some((item) => isCurrentUrl(item.href)),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="projectItems.length"
|
|
class="bg-card md:px-page flex min-w-0 items-center gap-2 border-b px-4"
|
|
>
|
|
<nav
|
|
:aria-label="t('navigation.project')"
|
|
class="flex min-w-0 flex-1 gap-4 overflow-x-auto"
|
|
>
|
|
<Link
|
|
v-for="item in projectItems"
|
|
:key="item.title"
|
|
:href="item.href"
|
|
:aria-current="isCurrentUrl(item.href) ? 'page' : undefined"
|
|
:class="[
|
|
'min-h-control text-body flex shrink-0 items-center gap-2 border-b-2 px-1 py-3 font-medium outline-offset-[-3px]',
|
|
isCurrentUrl(item.href)
|
|
? 'border-brand text-primary'
|
|
: 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
|
|
]"
|
|
>
|
|
<component
|
|
:is="item.icon"
|
|
class="size-4"
|
|
aria-hidden="true"
|
|
/>{{ item.title }}
|
|
</Link>
|
|
</nav>
|
|
<DropdownMenu v-if="projectSettingsItems.length">
|
|
<DropdownMenuTrigger as-child>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
:aria-label="t('navigation.projectSettings')"
|
|
:class="{
|
|
'bg-accent text-accent-foreground': settingsActive,
|
|
}"
|
|
>
|
|
<Settings2 aria-hidden="true" /><span
|
|
class="hidden sm:inline"
|
|
>{{ t('navigation.projectSettings') }}</span
|
|
><ChevronDown class="hidden sm:block" aria-hidden="true" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
v-for="item in projectSettingsItems"
|
|
:key="item.title"
|
|
as-child
|
|
>
|
|
<Link
|
|
:href="item.href"
|
|
:aria-current="
|
|
isCurrentUrl(item.href) ? 'page' : undefined
|
|
"
|
|
:class="{ 'bg-accent': isCurrentUrl(item.href) }"
|
|
>
|
|
<component :is="item.icon" aria-hidden="true" />{{
|
|
item.title
|
|
}}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|