<script>
    import { page } from "$app/stores";
    import "../../app.pcss";
</script>

<div id="wrapper">
    <nav class="flex flex-col">
        <a
            href="/book/alerts"
            class="link"
            class:active={$page.url.pathname.startsWith("/book/alerts")}
            >Alerts</a
        >
        <a
            href="/book/buttons"
            class="link"
            class:active={$page.url.pathname.startsWith("/book/buttons")}
            >Buttons</a
        >
    </nav>
    <main>
        <slot />
    </main>
</div>

<style>
    #wrapper {
        display: flex;
        flex-direction: row;
    }
    nav {
        min-width: 280px;
        padding: 10px;
    }
    main {
        width: 100%;
        padding: 5px;
    }
</style>
