Edit sidebar

Signed-off-by: Hadi <hadi@example.com>

src/components/NoteNavSidebar.svelte

@@ -19,6 +19,36 @@
 
   let search = $state("");
 
+  $effect(() => {
+    const navDrawer = document.getElementById("nav-drawer") as HTMLInputElement | null;
+    if (!navDrawer) return;
+
+    const lgQuery = window.matchMedia("(min-width: 1024px)");
+
+    const overlay = document.createElement("div");
+    overlay.style.cssText =
+      "position:fixed;inset:0 0 0 14rem;background:oklch(0% 0 0/.4);z-index:51;display:none;cursor:pointer";
+    document.body.appendChild(overlay);
+
+    function update() {
+      overlay.style.display =
+        navDrawer.checked && !lgQuery.matches ? "block" : "none";
+    }
+
+    navDrawer.addEventListener("change", update);
+    lgQuery.addEventListener("change", update);
+    overlay.addEventListener("click", () => {
+      navDrawer.checked = false;
+      navDrawer.dispatchEvent(new Event("change"));
+    });
+
+    return () => {
+      navDrawer.removeEventListener("change", update);
+      lgQuery.removeEventListener("change", update);
+      overlay.remove();
+    };
+  });
+
   function getCategory(n: Note): string {
     if (n.data.category) return n.data.category;
     const parts = n.id.split("/");
@@ -66,7 +96,7 @@
 </script>
 
 <aside
-  class="w-56 shrink-0 flex flex-col border-r border-base-300/60 h-[calc(100vh-3rem)]"
+  class="w-56 shrink-0 flex flex-col border-r border-base-300/60 h-full pt-2 lg:pt-0"
   style="background: oklch(4% 0 0);"
 >
   <!-- Mobile close bar -->

src/pages/notes/[...slug].astro

@@ -64,11 +64,13 @@ const headings = extractHeadings(entry.body ?? "");
 ---
 
 <style>
+  @media (min-width: 1024px) {
     .drawer.lg\:drawer-open > .drawer-side,
     .drawer.xl\:drawer-open > .drawer-side {
       top: 3rem;
       height: calc(100vh - 3rem);
     }
+  }
 </style>
 
 <Layout
@@ -76,13 +78,13 @@ const headings = extractHeadings(entry.body ?? "");
   description={entry.data.description}
 >
   <main class="max-w-screen-2xl mx-auto">
-    <div class="drawer drawer-end xl:drawer-open min-h-[calc(100vh-3rem)]">
+    <div class="drawer lg:drawer-open min-h-[calc(100vh-3rem)]">
-      <input id="graph-drawer" type="checkbox" class="drawer-toggle" />
-
-      <div class="drawer-content flex min-h-[calc(100vh-3rem)]">
-        <div class="drawer lg:drawer-open w-full">
       <input id="nav-drawer" type="checkbox" class="drawer-toggle" />
 
+      <div class="drawer-content flex min-h-[calc(100vh-3rem)] min-w-0">
+        <div class="drawer drawer-end xl:drawer-open w-full">
+          <input id="graph-drawer" type="checkbox" class="drawer-toggle" />
+
           <div class="drawer-content flex flex-col min-w-0">
             <main class="flex-1 px-4 sm:px-6 lg:px-10 py-6 lg:py-10 min-w-0">
               <div class="max-w-3xl mx-auto lg:mx-0">
@@ -204,21 +206,6 @@ const headings = extractHeadings(entry.body ?? "");
             </main>
           </div>
 
-          <div class="drawer-side z-50">
-            <label
-              for="nav-drawer"
-              aria-label="close sidebar"
-              class="drawer-overlay"></label>
-            <NoteNavSidebar
-              client:load
-              notes={sortedNotes}
-              currentEntry={entry}
-              categories={categories}
-            />
-          </div>
-        </div>
-      </div>
-
           <div class="drawer-side z-40">
             <label
               for="graph-drawer"
@@ -233,6 +220,17 @@ const headings = extractHeadings(entry.body ?? "");
             />
           </div>
         </div>
+      </div>
+
+      <div class="drawer-side z-50">
+        <NoteNavSidebar
+          client:load
+          notes={sortedNotes}
+          currentEntry={entry}
+          categories={categories}
+        />
+      </div>
+    </div>
   </main>
 </Layout>
 

src/pages/notes/[category].astro

@@ -41,10 +41,12 @@ if (!categoryNotes) {
 ---
 
 <style>
+  @media (min-width: 1024px) {
     .drawer.lg\:drawer-open > .drawer-side {
       top: 3rem;
       height: calc(100vh - 3rem);
     }
+  }
 </style>
 
 <Layout
@@ -162,10 +164,6 @@ if (!categoryNotes) {
       </div>
 
       <div class="drawer-side z-50">
-        <label
-          for="nav-drawer"
-          aria-label="close sidebar"
-          class="drawer-overlay"></label>
         <NoteNavSidebar
           client:load
           notes={allNotes}