<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>
