Merge pull request #327 from PR0M3TH3AN/codex/extend-sidebar-styles-for-media-query

Adjust desktop sidebar collapse behavior

AGENTS.md

@@ -69,6 +69,7 @@ Document the run in PR descriptions so QA can cross-reference results.
 * **Nostr interoperability:** Keep kind `30078` events as the source of truth and optionally mirror to kind `1063` so external clients see the hosted URL.
 * **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
 * **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
+* **Sidebar layering:** Keep the fixed sidebar below every modal and overlay. Respect the `--z-sidebar*` tokens so dialogs always render on top of the navigation.
 
 ---
 

css/style.css

@@ -14,8 +14,9 @@
   --scrollbar-track: rgba(255, 255, 255, 0.1);
   --scrollbar-thumb: rgba(255, 255, 255, 0.3);
   --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
-  --z-sidebar: 40;
-  --z-sidebar-overlay: 30;
+  /* Sidebar stack must remain below modal overlays. */
+  --z-sidebar: 30;
+  --z-sidebar-overlay: 20;
   --z-modal-root: 80;
   --z-modal-overlay: 70;
   --z-modal-content: 90;
@@ -1506,6 +1507,9 @@ body.sidebar-open #sidebarOverlay {
 @media (min-width: 768px) {
   #sidebar {
     transform: translateX(0) !important;
+    width: 16rem;
+    overflow-x: hidden;
+    transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   }
 
   #sidebar.sidebar-open {
@@ -1515,17 +1519,73 @@ body.sidebar-open #sidebarOverlay {
   #sidebarOverlay {
     display: none;
   }
-}
 
-/* Collapsed/expanded classes if needed on desktop */
-.sidebar-collapsed {
-  width: 4rem;
-}
-.sidebar-expanded {
-  width: 16rem;
-}
-.sidebar-collapsed .sidebar-text {
-  display: none;
+  body.sidebar-collapsed #sidebar,
+  #sidebar.sidebar-collapsed {
+    width: 4rem;
+  }
+
+  body.sidebar-expanded #sidebar,
+  #sidebar.sidebar-expanded {
+    width: 16rem;
+  }
+
+  body.sidebar-collapsed #sidebar a,
+  #sidebar.sidebar-collapsed a {
+    justify-content: center;
+    padding-inline: 1rem;
+  }
+
+  body.sidebar-expanded #sidebar a,
+  #sidebar.sidebar-expanded a {
+    justify-content: flex-start;
+    padding-inline: 1rem;
+  }
+
+  body.sidebar-collapsed #sidebar a > img,
+  body.sidebar-collapsed #sidebar a svg,
+  #sidebar.sidebar-collapsed a > img,
+  #sidebar.sidebar-collapsed a svg {
+    margin-right: 0;
+    margin-inline-end: 0;
+  }
+
+  body.sidebar-expanded #sidebar a > img,
+  body.sidebar-expanded #sidebar a svg,
+  #sidebar.sidebar-expanded a > img,
+  #sidebar.sidebar-expanded a svg {
+    margin-right: 0.75rem;
+    margin-inline-end: 0.75rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-text,
+  body.sidebar-collapsed #sidebar .sidebar-toggle-label,
+  #sidebar.sidebar-collapsed .sidebar-text,
+  #sidebar.sidebar-collapsed .sidebar-toggle-label {
+    display: none;
+  }
+
+  #sidebar.sidebar-expanded .sidebar-toggle-label {
+    display: inline;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
+  #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
+    transform: rotate(0deg);
+  }
+
+  body.sidebar-expanded #sidebar .sidebar-toggle-icon--rotated,
+  #sidebar.sidebar-expanded .sidebar-toggle-icon--rotated {
+    transform: rotate(180deg);
+  }
+
+  body.sidebar-collapsed #app {
+    margin-left: 4rem !important;
+  }
+
+  body.sidebar-expanded #app {
+    margin-left: 16rem !important;
+  }
 }
 
 /* Example: customizing the border & background in the sidebar */