edit sidebars

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

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}