added click outside sidebars handling, fixed some spacing issues

src/styles/docs/nav/nav.css

@@ -13,6 +13,7 @@
   max-height: 500px;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  --width: 30rem;
 
   &::-webkit-scrollbar {
     display: none;
@@ -45,14 +46,15 @@
       display: none;
     }
 
-    transition: width 0.3s ease,
-    height 0.3s ease,
-    background-color 0.3s ease,
-    backdrop-filter 0.3s ease,
-    padding 0.3s ease;
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      background-color 0.3s ease,
+      backdrop-filter 0.3s ease,
+      padding 0.3s ease;
 
     &.shown {
-      width: 100svw;
+      width: var(--width);
       background-color: hsl(var(--bg-900) / 0.6);
       backdrop-filter: blur(3px) saturate(180%);
       display: flex;
@@ -95,7 +97,7 @@
             max-width: 70%;
             margin-left: 3.33em;
 
-            &>div {
+            & > div {
               min-height: 4em;
               display: grid;
 
@@ -113,6 +115,18 @@
   }
 }
 
+@media (max-width: 55rem) {
+  .nav-toggle {
+    --width: 45svw;
+  }
+}
+
+@media (max-width: 38rem) {
+  .nav-toggle {
+    --width: 100svw;
+  }
+}
+
 @media (min-width: 85rem) {
   .nav-wrapper-mobile {
     display: none;