50 lines
1.6 KiB
Svelte
50 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import { toUrl } from '@/lib/utils';
|
|
import type { NavItem } from '@/types';
|
|
|
|
let {
|
|
items = [],
|
|
class: className = '',
|
|
}: {
|
|
items: NavItem[];
|
|
class?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<SidebarGroup class={`group-data-[collapsible=icon]:p-0 ${className}`}>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{#each items as item (toUrl(item.href))}
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
|
|
asChild
|
|
>
|
|
{#snippet children(props)}
|
|
<a
|
|
{...props}
|
|
href={toUrl(item.href)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class={props.class}
|
|
>
|
|
{#if item.icon}
|
|
<item.icon class="size-4 shrink-0" />
|
|
{/if}
|
|
<span>{item.title}</span>
|
|
</a>
|
|
{/snippet}
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
{/each}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|