From 188454667a242475b42a4bacf106b7bf4c28dadb Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Fri, 8 May 2026 04:05:16 +0000
Subject: [PATCH] Fix navigation styles

---
 frontend.html          | 46 +++++++++++++++++++++++++++++++++++-------
 main.py                |  6 ++++++
 tests/test_navigate.py | 45 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 90 insertions(+), 7 deletions(-)
diff --git a/frontend.html b/frontend.html
index af755ff..2375a3d 100644
--- a/frontend.html
+++ b/frontend.html
@@ -65,11 +65,6 @@
             font-family: monospace;
             font-size: 14px;
             z-index: 100;
-            transform: translateX(-100%);
-            transition: transform 0.2s;
-        }
-        #sidebar.open {
-            transform: translateX(0);
         }
         #sidebar a {
             color: #aaa;
@@ -105,13 +100,36 @@
             background: #444;
             color: #fff;
         }
+        #sidebar-toggle {
+            position: fixed;
+            top: 12px;
+            left: 280px;
+            z-index: 200;
+            font-size: 24px;
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            text-decoration: none;
+            padding: 6px 10px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 4px;
+            transition: left 0.2s;
+            display: none;
+        }
+        #sidebar-toggle.collapsed {
+            left: 12px;
+        }
+        #sidebar-toggle:hover {
+            color: #fff;
+            background: rgba(0, 0, 0, 0.7);
+        }
     </style>
 </head>
 <body>
-    <div id="sidebar" class="hidden">
+    <div id="sidebar" class="$sidebar_class">
         $folder_index
     </div>
-    <div id="container">
+    <a id="sidebar-toggle" href="#" title="Toggle index (i)">☰</a>
+    <div id="container" class="$container_class">
         <a href="$image_click_url"><div id="img" title="$filename" data-hash="$file_hash" data-path="$file_path"></div></a>
         <a href="$prev_url" class="chevron left" id="prev-btn">&#8249;</a>
         <a href="$next_url" class="chevron right" id="next-btn">&#8250;</a>
@@ -169,6 +187,20 @@
                 document.getElementById('sidebar').classList.toggle('hidden');
             }
         });
+
+        // Show sidebar toggle button when there is folder index content
+        (function() {
+            var sidebar = document.getElementById('sidebar');
+            var toggle = document.getElementById('sidebar-toggle');
+            if (sidebar && sidebar.textContent.trim()) {
+                toggle.style.display = 'block';
+                toggle.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    sidebar.classList.toggle('hidden');
+                    toggle.classList.toggle('collapsed');
+                });
+            }
+        })();
     </script>
 </body>
 </html>
diff --git a/main.py b/main.py
index 764082f..9e631ac 100644
--- a/main.py
+++ b/main.py
@@ -393,6 +393,7 @@ def _render_page(
 
     # Build folder index sidebar if in navigate mode
     folder_index = ""
+    sidebar_class = "hidden"
     if navigate_enabled and use_navigate_urls:
         current_path = file_path
         folder_index = _render_folder_index_html(
@@ -400,6 +401,7 @@ def _render_page(
             current_order=current_order,
             current_delay=current_delay,
         )
+        sidebar_class = ""
 
     content = template.substitute(
         img_url="/api/{file_hash}/data".format(file_hash=navigation_data["file_hash"]),
@@ -413,6 +415,8 @@ def _render_page(
         extra_meta=extra_meta,
         play_button=play_button,
         folder_index=folder_index,
+        sidebar_class=sidebar_class,
+        container_class="",
     )
 
     return HTMLResponse(content=content)
@@ -838,6 +842,8 @@ def _render_folder_index_page(
         extra_meta="",
         play_button="",
         folder_index=folder_index_html,
+        sidebar_class="",
+        container_class="hidden",
     )
 
     return HTMLResponse(content=content)
diff --git a/tests/test_navigate.py b/tests/test_navigate.py
index 7c633a4..56f58c9 100644
--- a/tests/test_navigate.py
+++ b/tests/test_navigate.py
@@ -92,6 +92,51 @@ class TestNavigatePage:
         response = await client_zip_navigate.get("/navigate/folder/")
         assert "breadcrumb" in response.text
 
+    async def test_folder_index_shows_subfolder_links(
+        self, client_zip_navigate: AsyncClient
+    ) -> None:
+        """Root folder index shows subfolder links."""
+        response = await client_zip_navigate.get("/navigate/")
+        assert "/navigate/folder/" in response.text
+
+    async def test_folder_index_shows_file_links(
+        self, client_zip_navigate: AsyncClient
+    ) -> None:
+        """Folder index shows file links."""
+        response = await client_zip_navigate.get("/navigate/")
+        assert "/navigate/top.txt" in response.text
+
+    async def test_file_page_has_sidebar(
+        self, client_zip_navigate: AsyncClient
+    ) -> None:
+        """File page in navigate mode has folder index sidebar."""
+        response = await client_zip_navigate.get("/navigate/top.txt")
+        assert "sidebar" in response.text
+        assert "index-item" in response.text
+
+    async def test_hash_page_has_no_sidebar(
+        self, client_zip_navigate: AsyncClient
+    ) -> None:
+        """Hash page does not show folder index sidebar content."""
+        # Get a valid hash from the zip
+        response = await client_zip_navigate.get("/navigate/top.txt")
+        assert response.status_code == 200
+        # Extract hash from the response
+        import re
+
+        match = re.search(r'data-hash="([^"]+)"', response.text)
+        assert match is not None
+        file_hash = match.group(1)
+
+        # Now visit the hash page
+        hash_response = await client_zip_navigate.get(f"/{file_hash}")
+        assert hash_response.status_code == 200
+        # Sidebar should be hidden on hash pages
+        assert 'id="sidebar" class="hidden"' in hash_response.text
+        # No folder index content in sidebar
+        assert "📁" not in hash_response.text
+        assert "📄" not in hash_response.text
+
     async def test_returns_404_on_directory_indexer(
         self, client_dir: AsyncClient
     ) -> None:
