add mobile nav toggle

src/lib/components/nav-toggle.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  export let navOpen: boolean;
+
+  // if nav is open, we should "hide" it on press. if not, we should "show" it.
+  let action: string;
+  $: action = navOpen ? 'hide' : 'show';
+
+  function toggle() {
+    navOpen = !navOpen;
+  }
+</script>
+
+<button on:click={toggle}>{action} navigation</button>
+
+<style lang="less">
+  button {
+    background-color: lighten(@color-dark, 10%);
+    border: none;
+    color: @color-light;
+    font-size: @font-s-md;
+    font-weight: @weight-semibold;
+    padding: @padding-sm;
+    width: 100%;
+
+    @media screen and (min-width: @sizes[lg]) {
+      display: none;
+    }
+  }
+</style>

src/lib/components/nav-tree.svelte

@@ -1,5 +1,15 @@
+<script lang="ts">
+  import NavToggle from './nav-toggle.svelte';
+
+  let open: boolean = false;
+
+  let hidden: boolean;
+  $: hidden = !open;
+</script>
+
 <nav>
-  <ul id="nav-tree" role="tablist">
+  <NavToggle bind:navOpen={open} />
+  <ul class:hidden role="tablist">
     <slot />
   </ul>
 </nav>
@@ -11,9 +21,13 @@
     margin: 0;
     padding: 0;
 
+    &.hidden {
+      display: none;
+    }
+
     @media screen and (min-width: @sizes[lg]) {
       align-items: center;
-      display: flex;
+      display: flex !important;
       flex-direction: row;
       justify-content: space-evenly;
     }

src/styles.less

@@ -20,6 +20,9 @@
 @padding-lg: @padding-lg-y @padding-lg-x;
 @padding-lg-x: 1.5em;
 @padding-lg-y: 1em;
+@padding-sm: @padding-sm-y @padding-sm-x;
+@padding-sm-x: 0.875em;
+@padding-sm-y: 0.375em;
 @padding-xl: @padding-xl-y @padding-xl-x;
 @padding-xl-x: 2em;
 @padding-xl-y: 1.5em;