From 214c8144a3d80418a3c3d43f87d491faaed542e0 Mon Sep 17 00:00:00 2001
From: MacRimi <123239993+MacRimi@users.noreply.github.com>
Date: Mon, 17 Feb 2025 23:16:45 +0100
Subject: [PATCH] Update DocSidebar.tsx

---
 web/components/DocSidebar.tsx | 46 ++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/web/components/DocSidebar.tsx b/web/components/DocSidebar.tsx
index 9fa5e2a..e9232c7 100644
--- a/web/components/DocSidebar.tsx
+++ b/web/components/DocSidebar.tsx
@@ -126,28 +126,30 @@ export default function DocSidebar() {
     }
   }
 
-  return (
-    <>
-      <div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200">
-        <button
-          className="w-full p-4 text-left flex items-center justify-between"
-          onClick={toggleMobileMenu}
-          aria-label="Toggle menu"
-        >
-          <span className="font-semibold">Documentation</span>
-          {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
-        </button>
-      </div>
-      <nav
-        className={`fixed md:static top-[104px] left-0 w-full h-[calc(100vh-104px)] md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${
-          isMobileMenuOpen ? "translate-y-0" : "-translate-y-full"
-        } md:translate-y-0 transition-transform duration-300 ease-in-out overflow-y-auto z-30`}
+return (
+  <>
+    
+    <div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200">
+      <button
+        className="w-full p-4 text-left flex items-center justify-between"
+        onClick={toggleMobileMenu}
+        aria-label="Toggle menu"
       >
-        <h2 className="text-lg font-semibold mb-4 text-gray-900 md:mt-0 sr-only md:not-sr-only">Documentation</h2>
-        <ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul>
-      </nav>
-    </>
-  )
-}
+        <span className="font-semibold">Documentation</span>
+        {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+      </button>
+    </div>
+
+    <nav
+      className={`fixed md:static top-[104px] left-0 w-full md:min-w-[200px] md:max-w-[260px] h-[calc(100vh-104px)] md:h-auto bg-gray-100 p-4 md:p-6 transform ${
+        isMobileMenuOpen ? "translate-y-0" : "-translate-y-full"
+      } md:translate-y-0 transition-transform duration-300 ease-in-out overflow-y-auto z-30`}
+    >
+      <h2 className="text-lg font-semibold mb-4 text-gray-900 md:mt-0 sr-only md:not-sr-only">Documentation</h2>
+      <ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul>
+    </nav>
+  </>
+)
+