<!-- Navigation with Buttons -->
<Drawer direction="left" palette="accent" rounded open={open}
    onclose={() => { open = false; }}>
    {#snippet leading()}
        <div style="display:flex; align-items:center; gap:.5rem; width:100%">
            <span class="material-symbols-outlined">layers</span>
            <strong>My App</strong>
        </div>
    {/snippet}

    <Button variant="ghost" palette="accent" rounded direction="row"
        active={active === "Dashboard"}
        onclick={() => { active = "Dashboard"; }}>
        <span class="nav-icon"><span class="material-symbols-outlined">home</span></span>
        <span class="nav-label">Dashboard</span>
    </Button>
    <Button variant="ghost" palette="accent" rounded direction="row"
        active={active === "Settings"}
        onclick={() => { active = "Settings"; }}>
        <span class="nav-icon"><span class="material-symbols-outlined">settings</span></span>
        <span class="nav-label">Settings</span>
    </Button>
</Drawer>