Enh(viewer): Allow to hide ToC

Author: klieret

codeclash/viewer/static/css/style.css

@@ -1500,6 +1500,37 @@ summary:focus {
     -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
 }
 
+.toc-toggle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 3rem;
+  height: 3rem;
+  background-color: var(--accent-color);
+  color: #000000;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-lg);
+  transition: all 0.2s ease;
+  z-index: 1001;
+}
+
+.toc-toggle:hover {
+  background-color: var(--accent-hover);
+  transform: scale(1.05);
+}
+
+.toc-toggle.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .toc-menu {
   position: absolute;
   bottom: 0;
@@ -1624,6 +1655,19 @@ summary:focus {
     width: 14rem;
     max-height: 20rem;
   }
+
+  /* Hide TOC menu by default on mobile, but keep toggle button visible */
+  .toc-menu {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(1rem);
+  }
+
+  .toc-menu.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
 }
 
 /* Hide floating TOC on very small screens */

codeclash/viewer/static/js/app.js

@@ -295,11 +295,29 @@ function scrollToElement(selector) {
 function initializeFloatingToc() {
   const tocMenu = document.getElementById("toc-menu");
   const tocClose = document.getElementById("toc-close");
+  const tocToggle = document.getElementById("toc-toggle");
 
-  if (!tocMenu || !tocClose) {
+  if (!tocMenu || !tocClose || !tocToggle) {
     return;
   }
 
+  // Check if we're on mobile
+  const isMobile = window.innerWidth <= 768;
+
+  // Hide menu by default on mobile
+  if (isMobile) {
+    tocMenu.classList.add("hidden");
+  }
+
+  // Set initial visibility state
+  updateTocVisibility();
+
+  // Toggle button click
+  tocToggle.addEventListener("click", function (e) {
+    e.stopPropagation();
+    toggleTocMenu();
+  });
+
   // Close TOC menu
   tocClose.addEventListener("click", function (e) {
     e.stopPropagation();
@@ -311,20 +329,67 @@ function initializeFloatingToc() {
     e.stopPropagation();
   });
 
+  // Handle window resize to update mobile state
+  window.addEventListener("resize", function () {
+    const isMobileNow = window.innerWidth <= 768;
+    if (isMobileNow && !tocMenu.classList.contains("hidden")) {
+      // On mobile, ensure proper visibility class
+      updateTocVisibility();
+    }
+  });
+
   // TOC keyboard shortcuts are now handled in the main keyboard handler
 }
 
 function toggleTocMenu() {
   const tocMenu = document.getElementById("toc-menu");
-  if (tocMenu) {
-    tocMenu.classList.toggle("hidden");
+  const tocToggle = document.getElementById("toc-toggle");
+
+  if (tocMenu && tocToggle) {
+    const isMobile = window.innerWidth <= 768;
+
+    if (isMobile) {
+      // On mobile, use 'visible' class to override default hidden state
+      tocMenu.classList.toggle("visible");
+      tocMenu.classList.toggle("hidden");
+    } else {
+      // On desktop, use 'hidden' class
+      tocMenu.classList.toggle("hidden");
+    }
+
+    updateTocVisibility();
   }
 }
 
 function closeTocMenu() {
   const tocMenu = document.getElementById("toc-menu");
-  if (tocMenu) {
+  const tocToggle = document.getElementById("toc-toggle");
+
+  if (tocMenu && tocToggle) {
+    const isMobile = window.innerWidth <= 768;
+
     tocMenu.classList.add("hidden");
+    if (isMobile) {
+      tocMenu.classList.remove("visible");
+    }
+
+    updateTocVisibility();
+  }
+}
+
+function updateTocVisibility() {
+  const tocMenu = document.getElementById("toc-menu");
+  const tocToggle = document.getElementById("toc-toggle");
+
+  if (!tocMenu || !tocToggle) return;
+
+  const isMenuHidden = tocMenu.classList.contains("hidden");
+
+  // Show toggle button when menu is hidden, hide it when menu is shown
+  if (isMenuHidden) {
+    tocToggle.classList.remove("hidden");
+  } else {
+    tocToggle.classList.add("hidden");
   }
 }
 

codeclash/viewer/templates/index.html

@@ -28,6 +28,9 @@
 
     <!-- Floating Table of Contents -->
     <div id="floating-toc" class="floating-toc">
+        <button id="toc-toggle" class="toc-toggle" title="Toggle Navigation (Press t)">
+            <i class="bi bi-list"></i>
+        </button>
         <div id="toc-menu" class="toc-menu">
             <div class="toc-header">
                 <span>Navigation</span>