add the stats and the menu

src/lib/directives/clickOutside.js

@@ -0,0 +1,15 @@
+export default function clickOutside(node) {
+    const handleClick = (event) => {
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('click_outside', node));
+        }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+}

src/routes/+layout.svelte

@@ -2,16 +2,19 @@
     <title>Ottawa board games, trades and sales</title>
 </svelte:head>
 <main class="responsive">
+    <AppTop />
     <slot />
 </main>
 
 <script>
     import 'beercss/dist/cdn/beer.min.css';
+    // import 'beercss/dist/cdn/beer.min.js';
     import { setContext } from 'svelte';
     import { dev, browser } from '$app/environment';
     import { readable, writable } from 'svelte/store';
     import { persisted } from 'svelte-persisted-store';
     import u from '@yanick/updeep-remeda';
+    import AppTop from './AppTop.svelte';
 
     const prefix = dev ? '/dev/' : '/db/';
 

src/routes/+page.svelte

@@ -1,12 +1,3 @@
-<header>
-    <nav>
-        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
-        <a class="button circle transparent" href="/about/">
-            <i>question_mark</i>
-        </a>
-    </nav>
-</header>
-
 <article>
     {#await $games}
         <div class="medium-height middle-align center-align">

src/routes/AppTop.svelte

@@ -0,0 +1,50 @@
+<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>

src/routes/about/+page.svelte

@@ -1,12 +1,3 @@
-<header>
-    <nav>
-        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
-        <a class="button circle transparent" href="/">
-            <i>arrow_back</i>
-        </a>
-    </nav>
-</header>
-
 <article>
     <p>
         <code>bgg.babyl.ca</code> is an aggregation of board games for sale or

src/routes/stats/+page.svelte

@@ -1,12 +1,3 @@
-<header>
-    <nav>
-        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
-        <a class="button circle transparent" href="/">
-            <i>arrow_back</i>
-        </a>
-    </nav>
-</header>
-
 <article>
     <p>Currently listing {nbr_games} games from {nbr_sellers} sellers.</p>
 
@@ -27,7 +18,6 @@
 
 <script>
     // TODO avatars?
-    // TODO BggUser component
     import { getContext } from 'svelte';
 
     import BggUser from '$lib/components/BggUser.svelte';
@@ -53,4 +43,8 @@
         margin-left: 2em;
         margin-right: 2em;
     }
+
+    article {
+        font-size: var(--font-size-10);
+    }
 </style>