Merge pull request #326 from PR0M3TH3AN/codex/add-sidebar-toggle-button-in-sidebar.html

Add desktop collapse toggle to sidebar

components/sidebar.html

@@ -11,6 +11,31 @@
     <!-- Top Navigation Links -->
     <div class="flex-1 overflow-y-auto px-4">
       <div class="bg-gray-800 rounded-lg shadow-md mt-4 p-4">
+        <div class="hidden md:flex justify-end mb-2">
+          <button
+            id="sidebarCollapseToggle"
+            type="button"
+            class="flex items-center space-x-2 text-sm font-semibold text-gray-100"
+            aria-controls="sidebar"
+            aria-expanded="true"
+          >
+            <span class="sr-only">Toggle sidebar</span>
+            <span class="sidebar-toggle-label">Collapse</span>
+            <svg
+              data-sidebar-chevron
+              class="w-4 h-4 transform transition-transform duration-300"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M10 6l6 6-6 6" />
+            </svg>
+          </button>
+        </div>
         <nav class="flex flex-col space-y-2">
           <a
             href="#view=most-recent-videos"

css/style.css

@@ -14,6 +14,12 @@
   --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;
+  --z-modal-root: 80;
+  --z-modal-overlay: 70;
+  --z-modal-content: 90;
+  --z-modal-player: 120;
 }
 
 html {
@@ -511,11 +517,39 @@ header img {
   margin-bottom: 0.75rem;
 }
 
+/* Ensure modal portals always sit above the sidebar stack */
+#modalContainer {
+  position: relative;
+  z-index: var(--z-modal-root);
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) {
+  z-index: var(--z-modal-root);
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) > .absolute {
+  z-index: var(--z-modal-overlay);
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) .modal-container,
+#modalContainer > [id$="Modal"]:not(#playerModal) .modal-content {
+  z-index: var(--z-modal-content);
+}
+
+#modalContainer > #playerModal {
+  z-index: var(--z-modal-player);
+}
+
+#modalContainer > #playerModal .player-modal__container,
+#modalContainer > #playerModal .player-modal__content {
+  z-index: var(--z-modal-content);
+}
+
 /* Modal Player */
 #playerModal {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--z-modal-player);
   display: none;
   flex-direction: column;
   align-items: stretch;
@@ -1424,8 +1458,8 @@ footer a:hover {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
-  /* Keep below modal stacks (z-50+) so dialogs overlay the drawer. */
-  z-index: 40;
+  /* Keep below modal stacks so dialogs overlay the drawer. */
+  z-index: var(--z-sidebar);
   box-shadow: none;
 }
 
@@ -1444,7 +1478,7 @@ footer a:hover {
   pointer-events: none;
   transition: opacity 0.3s ease;
   /* Sits above page chrome but below modals and the sidebar itself. */
-  z-index: 30;
+  z-index: var(--z-sidebar-overlay);
 }
 
 body.sidebar-open #sidebarOverlay {