67 lines
1.7 KiB
Svelte
67 lines
1.7 KiB
Svelte
<header>
|
|
<nav>
|
|
<button
|
|
class="circle transparent"
|
|
on:click={() => (show_menu = !show_menu)}>
|
|
<i>menu</i>
|
|
</button>
|
|
<h5 class="max left-align">
|
|
<a href="/">Ottawa board games for sale and trade</a>
|
|
</h5>
|
|
|
|
<a class="" href="/cart/">
|
|
{#if cart_size}
|
|
<span class="badge circle">{cart_size}</span>
|
|
{/if}
|
|
|
|
<i>shopping_cart</i></a>
|
|
</nav>
|
|
</header>
|
|
<dialog
|
|
class="left primary-container"
|
|
open={show_menu}
|
|
use:clickOutside
|
|
on:click_outside={() => (show_menu = false)}>
|
|
<nav class="drawer primary-container">
|
|
<header></header>
|
|
<a href="/" on:click={hide_menu}>
|
|
<i>list</i>
|
|
<span class="max">listing</span>
|
|
</a>
|
|
<a href="/cart/" on:click={hide_menu}>
|
|
<i>shopping_cart</i>
|
|
<span>cart</span>
|
|
</a>
|
|
<a href="/stats/" on:click={hide_menu}>
|
|
<i>numbers</i>
|
|
<span>stats</span>
|
|
</a>
|
|
<a href="/about/" on:click={hide_menu}>
|
|
<i>question_mark</i>
|
|
<span>about</span>
|
|
</a>
|
|
<a class="backsie" on:click={hide_menu}>
|
|
<i>arrow_back</i>
|
|
<span class="max">back</span>
|
|
</a>
|
|
</nav>
|
|
</dialog>
|
|
|
|
<script>
|
|
import clickOutside from '$lib/directives/clickOutside.js';
|
|
let show_menu = false;
|
|
const hide_menu = () => (show_menu = false);
|
|
|
|
export let cart = [];
|
|
$: cart_size = Object.values(cart).filter((x) => x).length;
|
|
</script>
|
|
|
|
<style>
|
|
.backsie {
|
|
margin-top: 2em;
|
|
}
|
|
dialog {
|
|
font-size: var(--font-size-10);
|
|
}
|
|
</style>
|