131 lines
2.7 KiB
Svelte
131 lines
2.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import * as Sidebar from '$lib/components/ui/sidebar/index';
|
||
|
|
import { onDestroy, type ComponentProps } from 'svelte';
|
||
|
|
import { asset } from '$app/paths';
|
||
|
|
import AppAccountSelect from './app-account-select.svelte';
|
||
|
|
import {
|
||
|
|
Code,
|
||
|
|
LayoutDashboard,
|
||
|
|
LucideEye,
|
||
|
|
CherryIcon,
|
||
|
|
DiamondIcon,
|
||
|
|
BugIcon,
|
||
|
|
CupSodaIcon
|
||
|
|
} from '@lucide/svelte/icons';
|
||
|
|
import TaobinLogo from '$lib/assets/logo.svelte';
|
||
|
|
import { goto } from '$app/navigation';
|
||
|
|
import Button from '$lib/components/ui/button/button.svelte';
|
||
|
|
import { get } from 'svelte/store';
|
||
|
|
import { sidebarStore } from '$lib/core/stores/sidebar';
|
||
|
|
|
||
|
|
let sideBar: HTMLElement | null = $state(null);
|
||
|
|
let isSideBarOpen: boolean = $state(true);
|
||
|
|
|
||
|
|
const data = {
|
||
|
|
navMain: [
|
||
|
|
{
|
||
|
|
title: 'Home',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
title: 'Dashboard',
|
||
|
|
url: '/dashboard',
|
||
|
|
icon: LayoutDashboard
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Recipe',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
title: 'Overview',
|
||
|
|
url: '/recipe/overview',
|
||
|
|
icon: LucideEye
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Topping',
|
||
|
|
url: '/recipe/topping',
|
||
|
|
icon: CherryIcon
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Material',
|
||
|
|
url: '/recipe/material',
|
||
|
|
icon: DiamondIcon
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Tools',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
title: 'Brew',
|
||
|
|
url: '/tools/brew',
|
||
|
|
icon: CupSodaIcon
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Debug',
|
||
|
|
url: '/tools/debug',
|
||
|
|
icon: BugIcon
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
// more to add here
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
function onClickLogoIcon() {
|
||
|
|
goto('/departments');
|
||
|
|
}
|
||
|
|
|
||
|
|
let unsubSidebar = sidebarStore.subscribe((state) => {
|
||
|
|
isSideBarOpen = state;
|
||
|
|
});
|
||
|
|
|
||
|
|
onDestroy(() => {
|
||
|
|
unsubSidebar();
|
||
|
|
});
|
||
|
|
|
||
|
|
let {
|
||
|
|
ref = sideBar,
|
||
|
|
collapsible = 'icon',
|
||
|
|
...restProps
|
||
|
|
}: ComponentProps<typeof Sidebar.Root> = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Sidebar.Root {collapsible} {...restProps}>
|
||
|
|
<Sidebar.Header>
|
||
|
|
<div class="flex items-center justify-center">
|
||
|
|
<button class="hover:cursor-pointer" onclick={onClickLogoIcon}>
|
||
|
|
<TaobinLogo size={isSideBarOpen ? 96 : 24} fillColor={'#FFFFFF'} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Sidebar.Header>
|
||
|
|
<Sidebar.Content>
|
||
|
|
{#each data.navMain as nav}
|
||
|
|
<Sidebar.Group>
|
||
|
|
<Sidebar.GroupLabel>{nav.title}</Sidebar.GroupLabel>
|
||
|
|
<Sidebar.GroupContent>
|
||
|
|
<Sidebar.Menu>
|
||
|
|
{#each nav.items as sub}
|
||
|
|
<Sidebar.MenuItem>
|
||
|
|
<Sidebar.MenuButton>
|
||
|
|
{#snippet child({ props })}
|
||
|
|
<a href={sub.url} {...props}>
|
||
|
|
{#if sub.icon}
|
||
|
|
<sub.icon />
|
||
|
|
{/if}
|
||
|
|
<span>{sub.title}</span>
|
||
|
|
</a>
|
||
|
|
{/snippet}
|
||
|
|
</Sidebar.MenuButton>
|
||
|
|
</Sidebar.MenuItem>
|
||
|
|
{/each}
|
||
|
|
</Sidebar.Menu>
|
||
|
|
</Sidebar.GroupContent>
|
||
|
|
</Sidebar.Group>
|
||
|
|
{/each}
|
||
|
|
</Sidebar.Content>
|
||
|
|
<Sidebar.Footer>
|
||
|
|
<AppAccountSelect />
|
||
|
|
</Sidebar.Footer>
|
||
|
|
</Sidebar.Root>
|