49 lines
1.7 KiB
Svelte
49 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { NavItem } from '../types/nav';
|
|
import * as Accordion from '$lib/components/ui/accordion'; // Assuming Shadcn Accordion is in $lib/components/ui/accordion
|
|
import { Button } from '$lib/components/ui/button'; // Assuming Shadcn Button is in $lib/components/ui/button
|
|
import { ChevronDown } from 'lucide-svelte'; // Assuming lucide-svelte is installed for icons
|
|
|
|
export let navData: NavItem[];
|
|
|
|
function renderNavItem(item: NavItem): any {
|
|
if (item.children && item.children.length > 0) {
|
|
return Accordion.Item;
|
|
} else {
|
|
return 'a'; // Render as a link
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<nav class="w-64 bg-gray-800 text-white h-full">
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-semibold mb-4">OurWorld</h2>
|
|
</div>
|
|
<Accordion.Root class="w-full">
|
|
{#each navData as item}
|
|
{#if item.children && item.children.length > 0}
|
|
<Accordion.Item value={item.label}>
|
|
<Accordion.Trigger class="flex justify-between items-center w-full text-left p-4 hover:bg-gray-700">
|
|
{item.label}
|
|
<ChevronDown class="h-4 w-4 transition-transform duration-200" />
|
|
</Accordion.Trigger>
|
|
<Accordion.Content>
|
|
<ul class="pl-4">
|
|
{#each item.children as child}
|
|
<li>
|
|
<a href={child.link} class="block p-2 hover:bg-gray-700">
|
|
{child.label}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
{:else}
|
|
<a href={item.link} class="block p-4 hover:bg-gray-700">
|
|
{item.label}
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
</Accordion.Root>
|
|
</nav> |