From 2859f5768119750e8e7730e2f4c82df395d3af19 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Fri, 9 Sep 2022 07:51:40 -0400
Subject: [PATCH] Better hamburger menu.

---
 src/lib/header/NavBar.svelte | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/lib/header/NavBar.svelte b/src/lib/header/NavBar.svelte
index c437e8d..2ccdf6c 100644
--- a/src/lib/header/NavBar.svelte
+++ b/src/lib/header/NavBar.svelte
@@ -1,5 +1,6 @@
 <script>
   import { page } from '$app/stores';
+  import { fade } from 'svelte/transition'
 
   let dropdownVisible = false
 </script>
@@ -29,7 +30,8 @@
 <nav class="mobile">
     <button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
     {#if dropdownVisible}
-        <ul class="mobile">
+        <!-- TODO: Click-away layer -->
+        <ul class="mobile" transition:fade={{duration: 300}}>
             <li class:active={$page.url.pathname === '/'}>
                 <a sveltekit:prefetch href="/">Topic Search</a>
             </li>
@@ -83,14 +85,14 @@
     ul.mobile {
         flex-direction: column;
         position: absolute;
-        padding: 128px 0 0;
+        padding: 256px 0 1em;
         margin: 0;
-        height: 3em;
+        width: 50vw;
         display: flex;
         justify-content: center;
         align-items: center;
         list-style: none;
-        background: var(--background);
+        background-color: rgba(255, 255, 255);
         background-size: contain;
     }
 
@@ -125,6 +127,16 @@
       transition: color 0.2s linear;
     }
 
+    @media (max-width: 719px) {
+        nav a {
+            font-size: 1rem;
+            line-height: 200%;
+        }
+        li {
+            margin-top: 1em;
+        }
+    }
+
     a:hover {
       color: var(--accent-color);
     }
@@ -138,5 +150,8 @@
         border-radius: 0;
         border-style: none;
     }
+    button:hover {
+        background-color: white;
+    }
 
 </style>
\ No newline at end of file