51 lines
1.3 KiB
Svelte
51 lines
1.3 KiB
Svelte
<header>
|
|
<nav>
|
|
<button
|
|
class="circle transparent"
|
|
on:click={() => (show_menu = !show_menu)}>
|
|
<i>menu</i>
|
|
</button>
|
|
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
|
|
</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="/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);
|
|
</script>
|
|
|
|
<style>
|
|
.backsie {
|
|
margin-top: 2em;
|
|
}
|
|
dialog {
|
|
font-size: var(--font-size-10);
|
|
}
|
|
</style>
|