Skeleton: Position the drawer below the navbar + allow toggling between them

src/routes/+layout.svelte

@@ -33,12 +33,36 @@
   // Drawer config
   initializeStores();
   const drawerStore: DrawerStore = getDrawerStore();
+  let drawerOpen: boolean = false;
+  let drawerId: string = "";
+  drawerStore.subscribe((settings: DrawerSettings) => {
+    drawerOpen = settings.open ?? false;
+    drawerId = settings.id ?? "";
+  });
+
+  const toggle_drawer = (settings: DrawerSettings) => {
+    if (drawerOpen) {
+      if (drawerId === settings.id) {
+        // We clicked the same button to close the drawer
+        drawerStore.close();
+      } else {
+        // We clicked another button to open another drawer
+        drawerStore.close();
+        setTimeout(() => drawerStore.open(settings), 200);
+      }
+    } else {
+      drawerStore.open(settings);
+    }
+  };
+
+  const close_drawer = () => drawerStore.close();
 
   const drawer_settings_base: DrawerSettings = {
     position: "top",
     height: "auto",
-    padding: "lg:px-96",
+    padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
     bgDrawer: "bg-surface-100",
+    duration: 150,
   };
 
   const menu_drawer = () => {
@@ -46,7 +70,7 @@
       id: "menu_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const data_drawer = () => {
@@ -54,7 +78,7 @@
       id: "data_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const login_drawer = () => {
@@ -62,7 +86,7 @@
       id: "login_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const profile_drawer = () => {
@@ -70,11 +94,9 @@
       id: "profile_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
-  const close_drawer = () => drawerStore.close();
-
   // Popups config
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -93,11 +115,12 @@
 <LoadingIndicator />
 
 <Drawer>
+  <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
+  <div class="flex flex-col gap-2 p-3">
     {#if $drawerStore.id === "menu_drawer"}
       <!-- Menu Drawer -->
       <!-- Menu Drawer -->
       <!-- Menu Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
       <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
         >Season Picks
@@ -109,51 +132,46 @@
         >Statistics
       </Button>
       <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
-    </div>
     {:else if $drawerStore.id === "data_drawer"}
       <!-- Data Drawer -->
       <!-- Data Drawer -->
       <!-- Data Drawer -->
-    <div class="flex flex-col gap-2 p-2">
+      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
-      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth>
+        >Race Results
-        Race Results
       </Button>
       <Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button>
       <Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button>
-    </div>
     {:else if $drawerStore.id === "login_drawer"}
       <!-- Login Drawer -->
       <!-- Login Drawer -->
       <!-- Login Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <h4 class="h4 select-none">Enter Username and Password</h4>
       <form method="POST" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->
         <input type="hidden" name="redirect_url" value={$page.url.pathname} />
-        <Input name="username" placeholder="Username" autocomplete="username" required>
+        <Input name="username" placeholder="Username" autocomplete="username" required
-          <UserIcon />
+          ><UserIcon />
         </Input>
-        <Input name="password" type="password" placeholder="Password" autocomplete="off" required>
+        <Input name="password" type="password" placeholder="Password" autocomplete="off" required
-          <PasswordIcon />
+          ><PasswordIcon />
         </Input>
         <div class="flex justify-end gap-2">
-          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit>
+          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit
-            Login
+            >Login
           </Button>
           <Button
             formaction="/profile?/create_profile"
             onclick={close_drawer}
             color="tertiary"
-            submit>Register</Button
+            submit
-          >
+            >Register
+          </Button>
         </div>
       </form>
-    </div>
     {:else if $drawerStore.id === "profile_drawer" && data.user}
       <!-- Profile Drawer -->
       <!-- Profile Drawer -->
       <!-- Profile Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <h4 class="h4 select-none">Edit Profile</h4>
       <form method="POST" enctype="multipart/form-data" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->
@@ -187,12 +205,12 @@
           </Button>
         </div>
       </form>
-    </div>
     {/if}
+  </div>
 </Drawer>
 
 <nav>
-  <!-- TODO: Make this stick to the top somehow (fixed/sticky). -->
+  <div class="fixed left-0 right-0 top-0 z-50">
     <AppBar
       slotDefault="place-self-center"
       slotTrail="place-content-end"
@@ -210,7 +228,8 @@
           </div>
 
           <!-- Site logo -->
-        <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button>
+          <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button
+          >
         </div>
       </svelte:fragment>
 
@@ -250,9 +269,10 @@
         </div>
       </svelte:fragment>
     </AppBar>
+  </div>
 </nav>
 
 <!-- Each child's contents will be inserted here -->
-<div class="p-2">
+<div class="p-2" style="margin-top: 60px;">
   {@render children()}
 </div>