From b6b4b5c8f5d75dd591e4e0c8a36a0fb45452907c Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Sat, 28 Jan 2023 09:48:42 +0000
Subject: [PATCH] Mobile nav bar improvements

---
 src/App.svelte | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6122871..6baf20d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,6 +18,8 @@
       profileStore.set(undefined);
     }
   }
+
+  let mobileNavOpen = false;
 </script>
 
 <svelte:head>
@@ -34,13 +36,16 @@
           <h1>{import.meta.env.VITE_TITLE}</h1>
         </a>
 
-        <button class="mobile-nav-toggle">
+        <div class="mobile-shade {mobileNavOpen ? 'mobile-open' : ''}" />
+        <button class="mobile-nav-toggle {mobileNavOpen ? 'mobile-active' : ''}" on:click={() => (mobileNavOpen = !mobileNavOpen)}>
           <Menu size={32} />
         </button>
 
-        <nav>
+        <nav class={mobileNavOpen ? "mobile-open" : ""}>
           {#if $profileStore !== undefined}
-            <HeaderDropdown profile={$profileStore} />
+            <div style="height:50px;">
+              <HeaderDropdown profile={$profileStore} />
+            </div>
           {:else}
             <a href="/register" use:link>Register</a>
             <a href="/login" use:link>Login</a>
@@ -151,6 +156,10 @@
             aspect-ratio: 1/1;
             align-items: center;
             justify-content: center;
+
+            &.mobile-active {
+              background-color: var(--primary-hover);
+            }
           }
 
           > nav {
@@ -158,9 +167,25 @@
             top: 50px;
             left: 0;
             right: 0;
-            bottom: 0;
+            height: auto;
             z-index: 9998;
             display: none;
+
+            &.mobile-open {
+              display: block;
+              background-color: var(--bg-panel-action);
+            }
+          }
+
+          > .mobile-shade.mobile-open {
+            position: fixed;
+            top: 50px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            content: "";
+            z-index: 9997;
           }
         }
       }