102 lines
3.3 KiB
Svelte
102 lines
3.3 KiB
Svelte
<script lang="ts">
|
||
import { page } from "$app/state";
|
||
import favicon from "$lib/assets/favicon.svg";
|
||
import "../app.css";
|
||
|
||
const groups = [
|
||
{
|
||
name: "Calculator",
|
||
path: "/calculator",
|
||
links: [
|
||
{ name: "Configurations", path: "/configurations" },
|
||
{ name: "Datasets", path: "/datasets" },
|
||
],
|
||
},
|
||
{
|
||
name: "Apparel",
|
||
path: "/apparel",
|
||
links: [
|
||
{ name: "Products", path: "/products" },
|
||
{ name: "Orders", path: "/orders" },
|
||
],
|
||
},
|
||
{
|
||
name: "Activity",
|
||
path: "/activity",
|
||
links: [{ name: "Events", path: "/events" }],
|
||
},
|
||
{
|
||
name: "Verification",
|
||
path: "/verification",
|
||
links: [{ name: "Requests", path: "/requests" }],
|
||
},
|
||
];
|
||
|
||
let { children } = $props();
|
||
let collapsed = $state(false);
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<link rel="icon" href={favicon} />
|
||
</svelte:head>
|
||
|
||
<div class="drawer lg:drawer-open">
|
||
<input id="sidebar" type="checkbox" class="drawer-toggle" />
|
||
<div class="drawer-content px-10 flex flex-col items-center">
|
||
{@render children?.()}
|
||
</div>
|
||
<div class="drawer-side">
|
||
<label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
|
||
></label>
|
||
<div
|
||
class={[
|
||
"bg-base-200 min-h-full flex flex-col overflow-hidden transition-[width] duration-200",
|
||
collapsed ? "w-0" : "w-72",
|
||
]}
|
||
>
|
||
<ul class="menu menu-lg text-base-content w-72 p-4">
|
||
{#each groups as group}
|
||
<li>
|
||
<h2 class="menu-title">{group.name}</h2>
|
||
<ul>
|
||
{#each group.links as link}
|
||
{@const fullPath = group.path + link.path}
|
||
<li>
|
||
<a
|
||
class={{
|
||
"menu-active":
|
||
page.url.pathname === fullPath,
|
||
}}
|
||
href={fullPath}>{link.name}</a
|
||
>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
<div class="flex justify-end p-2 mt-auto">
|
||
<button
|
||
class="btn btn-ghost btn-sm btn-square"
|
||
title="Collapse sidebar"
|
||
aria-label="Collapse sidebar"
|
||
onclick={() => (collapsed = true)}
|
||
>
|
||
<span class="text-lg leading-none">‹</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{#if collapsed}
|
||
<button
|
||
class="btn btn-ghost btn-sm btn-square fixed left-0 bottom-4 z-50 rounded-l-none border border-l-0 border-base-300 bg-base-200"
|
||
title="Expand sidebar"
|
||
aria-label="Expand sidebar"
|
||
onclick={() => (collapsed = false)}
|
||
>
|
||
<span class="text-lg leading-none">›</span>
|
||
</button>
|
||
{/if}
|