45 lines
1.0 KiB
Svelte
45 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/state";
|
|
import favicon from "$lib/assets/favicon.svg";
|
|
import "../app.css";
|
|
|
|
const links = [
|
|
{ name: "Calculator", path: "/calculator" },
|
|
{ name: "Commerce", path: "/commerce" },
|
|
];
|
|
|
|
let { children } = $props();
|
|
</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 p-10 flex flex-col items-center">
|
|
{@render children?.()}
|
|
<!-- <label for="sidebar" class="btn btn-primary drawer-button lg:hidden"> -->
|
|
<!-- Open drawer -->
|
|
<!-- </label> -->
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
|
|
></label>
|
|
<ul
|
|
class="menu menu-lg bg-base-200 text-base-content min-h-full w-72 p-4"
|
|
>
|
|
{#each links as link}
|
|
<li>
|
|
<a
|
|
class={{
|
|
"menu-active": page.url.pathname === link.path,
|
|
}}
|
|
href={link.path}>{link.name}</a
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|