edit sidebars

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

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

@@ -3,10 +3,10 @@ import { getCollection, render } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import { List, PanelRight } from "@lucide/astro";
 import NoteTOC from "../../components/NoteTOC.astro";
-import NoteNavSidebar from "../../components/NoteNavSidebar.svelte";
+import NoteNavSidebar from "../../components/NoteNavSidebar.astro";
 import NoteGraphSidebar from "../../components/NoteGraphSidebar.astro";
 import NoteVars from "../../components/NoteVars.svelte";
-import { getCategory, extractLinks, extractHeadings } from "../../utils/notes";
+import { getCategory, extractLinks, extractExternalLinks, extractHeadings } from "../../utils/notes";
 
 export async function getStaticPaths() {
   const notes = await getCollection("notes");
@@ -61,11 +61,17 @@ const noteVars = [
 ];
 
 const headings = extractHeadings(entry.body ?? "");
+const externalLinks = extractExternalLinks(entry.body ?? "");
 ---
 
 <style>
-  @media (min-width: 1024px) {
-    .drawer.lg\:drawer-open > .drawer-side,
+  @media (min-width: 768px) {
+    .drawer.md\:drawer-open > .drawer-side {
+      top: 3rem;
+      height: calc(100vh - 3rem);
+    }
+  }
+  @media (min-width: 1280px) {
     .drawer.xl\:drawer-open > .drawer-side {
       top: 3rem;
       height: calc(100vh - 3rem);
@@ -78,11 +84,11 @@ const headings = extractHeadings(entry.body ?? "");
   description={entry.data.description}
 >
   <main class="max-w-screen-2xl mx-auto">
-    <div class="drawer lg:drawer-open min-h-[calc(100vh-3rem)]">
+    <div class="drawer md:drawer-open min-h-[calc(100vh-3rem)]">
       <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">
+        <div class="drawer drawer-end xl:drawer-open w-full" id="right-drawer">
           <input id="graph-drawer" type="checkbox" class="drawer-toggle" />
 
           <div class="drawer-content flex flex-col min-w-0">
@@ -117,7 +123,7 @@ const headings = extractHeadings(entry.body ?? "");
                   <div class="flex items-center gap-2">
                     <label
                       for="nav-drawer"
-                      class="btn btn-ghost btn-xs lg:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
+                      class="btn btn-ghost btn-xs md:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
                     >
                       <List size={11} />
                       nav
@@ -126,7 +132,7 @@ const headings = extractHeadings(entry.body ?? "");
                     <label
                       for="graph-drawer"
                       id="graph-toggle"
-                      class="btn btn-ghost btn-xs font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
+                      class="btn btn-ghost btn-xs xl:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
                       title="Toggle graph"
                     >
                       <PanelRight size={11} />
@@ -206,25 +212,26 @@ const headings = extractHeadings(entry.body ?? "");
             </main>
           </div>
 
-          <div class="drawer-side z-40">
+          <div class="drawer-side z-[60]">
             <label
               for="graph-drawer"
               aria-label="close sidebar"
-              class="drawer-overlay xl:hidden"></label>
+              class="drawer-overlay"></label>
             <NoteGraphSidebar
               entry={entry}
               graphNodes={graphNodes}
               graphEdges={graphEdges}
               forwardLinks={forwardLinks}
               backlinks={backlinks}
+              externalLinks={externalLinks}
             />
           </div>
         </div>
       </div>
 
-      <div class="drawer-side z-50">
+      <div class="drawer-side z-[70]">
+        <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
         <NoteNavSidebar
-          client:load
           notes={sortedNotes}
           currentEntry={entry}
           categories={categories}
@@ -288,51 +295,7 @@ const headings = extractHeadings(entry.body ?? "");
       });
   }
 
-  function initXlGraphToggle() {
-    const graphDrawer = document.getElementById(
-      "graph-drawer",
-    ) as HTMLInputElement | null;
-    if (!graphDrawer) return;
-
-    const outerDrawer = graphDrawer.closest<HTMLElement>(".drawer.drawer-end");
-    const xlQuery = window.matchMedia("(min-width: 1280px)");
-    const STORAGE_KEY = "notes-graph-sidebar";
-
-    function setXlSidebar(open: boolean) {
-      if (!outerDrawer) return;
-      if (open) {
-        outerDrawer.classList.add("xl:drawer-open");
-      } else {
-        outerDrawer.classList.remove("xl:drawer-open");
-      }
-      localStorage.setItem(STORAGE_KEY, open ? "1" : "0");
-    }
-
-    const graphToggle = document.getElementById("graph-toggle");
-    graphToggle?.addEventListener("click", (e) => {
-      if (!xlQuery.matches) return;
-      e.preventDefault();
-      setXlSidebar(!outerDrawer?.classList.contains("xl:drawer-open"));
-    });
-
-    if (xlQuery.matches) {
-      const saved = localStorage.getItem(STORAGE_KEY);
-      // Open by default unless user explicitly closed it
-      setXlSidebar(saved !== "0");
-    }
-
-    xlQuery.addEventListener("change", (e) => {
-      if (!e.matches) {
-        outerDrawer?.classList.remove("xl:drawer-open");
-      } else {
-        const saved = localStorage.getItem(STORAGE_KEY);
-        setXlSidebar(saved !== "0");
-      }
-    });
-  }
-
   document.addEventListener("astro:page-load", () => {
     injectHeadingAnchors();
-    initXlGraphToggle();
   });
 </script>

src/pages/notes/[category].astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
-import NoteNavSidebar from "../../components/NoteNavSidebar.svelte";
+import NoteNavSidebar from "../../components/NoteNavSidebar.astro";
 import { getCategory } from "../../utils/notes";
 import { List } from "@lucide/astro";
 
@@ -41,8 +41,8 @@ if (!categoryNotes) {
 ---
 
 <style>
-  @media (min-width: 1024px) {
-    .drawer.lg\:drawer-open > .drawer-side {
+  @media (min-width: 768px) {
+    .drawer.md\:drawer-open > .drawer-side {
       top: 3rem;
       height: calc(100vh - 3rem);
     }
@@ -54,7 +54,7 @@ if (!categoryNotes) {
   description={`Notes on ${category}.`}
 >
   <main class="max-w-screen-2xl mx-auto">
-    <div class="drawer lg:drawer-open min-h-[calc(100vh-3rem)]">
+    <div class="drawer md:drawer-open min-h-[calc(100vh-3rem)]">
       <input id="nav-drawer" type="checkbox" class="drawer-toggle" />
 
       <div class="drawer-content flex flex-col min-w-0">
@@ -74,7 +74,7 @@ if (!categoryNotes) {
               </div>
               <label
                 for="nav-drawer"
-                class="btn btn-ghost btn-xs lg:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
+                class="btn btn-ghost btn-xs md:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
               >
                 <List size={11} />
                 nav
@@ -163,9 +163,9 @@ if (!categoryNotes) {
         </main>
       </div>
 
-      <div class="drawer-side z-50">
+      <div class="drawer-side z-[70]">
+        <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
         <NoteNavSidebar
-          client:load
           notes={allNotes}
           currentCategory={category}
           categories={categories}