519175f9fd
Move the nav badge from the physical right-2 to the logical end-2 so it sits at the end of the row in both directions (right in LTR, left in RTL). Replace the hardcoded 'Beta' string with a global common.beta translation key across all 15 locales.
50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import { useActiveUrl } from '@/composables/useActiveUrl';
|
|
import { type NavItem } from '@/types';
|
|
|
|
defineProps<{
|
|
items: NavItem[];
|
|
label?: string;
|
|
}>();
|
|
|
|
const { urlIsActive } = useActiveUrl();
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarGroup class="px-2 py-0">
|
|
<SidebarGroupLabel v-if="label">
|
|
{{ label }}
|
|
</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem v-for="item in items" :key="item.title">
|
|
<SidebarMenuButton
|
|
as-child
|
|
:is-active="urlIsActive(item.activePattern ?? item.href, { exact: item.exact, exclude: item.excludeActive })"
|
|
:tooltip="item.title"
|
|
>
|
|
<Link :href="item.href">
|
|
<component :is="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
<Badge
|
|
v-if="item.badge"
|
|
variant="warning"
|
|
class="pointer-events-none absolute top-1/2 end-2 -translate-y-1/2 px-1.5 group-data-[collapsible=icon]:hidden"
|
|
>
|
|
{{ item.badge }}
|
|
</Badge>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</template>
|