From 7fbb0c3838e188ba3b810156ff6546239e89923e Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Sat, 14 Feb 2026 09:59:56 -0800
Subject: fix: ensure neko toggle button is always accessible (fixing
 NK-zvt8hi)

---
 frontend/src/App.css                 | 65 +++++++++---------------------------
 frontend/src/App.tsx                 |  9 +++++
 frontend/src/components/FeedList.css |  5 +++
 3 files changed, 29 insertions(+), 50 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 97b7d65..7478777 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -16,45 +16,7 @@ body {
   /* Prevent body scroll */
 }
 
-.dashboard-header {
-  /* Legacy didn't really have a top header, but we need one for settings/logout. 
-     Keeping it minimal/flat or matching sidebar bg if we want to blend in. 
-     For now, let's make it dark gray to stand out less or match legacy dark mode if applicable.
-     Actually, let's keep it distinct but apply the font styles. */
-  background: #222;
-  color: white;
-  padding: 0.5rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: bold;
-}
-
-.dashboard-header .logo {
-  margin: 0;
-  font-size: 2rem;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.nav-link,
-.logout-btn {
-  font-weight: bold;
-  font-variant: small-caps;
-  text-transform: lowercase;
-  font-size: 1rem;
-  background: transparent;
-  border: none;
-  color: #ccc;
-  cursor: pointer;
-  margin-left: 1rem;
-}
-
-.nav-link:hover,
-.logout-btn:hover {
-  color: white;
-  text-decoration: underline;
-}
+/* Header styles removed as we moved to sidebar navigation */
 
 .dashboard-content {
   display: flex;
@@ -70,8 +32,8 @@ body {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 1rem;
   transition: margin-left 0.4s ease;
+  /* No padding here, handled in FeedList */
 }
 
 .dashboard-sidebar.hidden {
@@ -91,18 +53,21 @@ body {
   margin: 0 auto;
 }
 
-.logout-btn {
+.fixed-toggle {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1000;
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
+  border: none;
+  font-size: 2rem;
+  line-height: 1;
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.9rem;
+  padding: 0;
+  color: var(--text-color);
+  /* Inherit didn't work well if parent is transparent */
 }
 
-.logout-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.5);
+.fixed-toggle:hover {
+  transform: scale(1.1);
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 732d9ef..74ae89e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -44,6 +44,15 @@ function Dashboard({ theme, setTheme }: { theme: string; setTheme: (t: string) =
       className={`dashboard ${sidebarVisible ? 'sidebar-visible' : 'sidebar-hidden'} theme-${theme}`}
     >
       <div className="dashboard-content">
+        {!sidebarVisible && (
+          <button
+            className="sidebar-toggle fixed-toggle"
+            onClick={() => setSidebarVisible(true)}
+            title="Show Sidebar"
+          >
+            🐱
+          </button>
+        )}
         <aside className={`dashboard-sidebar ${sidebarVisible ? '' : 'hidden'}`}>
           <FeedList theme={theme} setTheme={setTheme} setSidebarVisible={setSidebarVisible} />
         </aside>
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index 1b83aed..41b8f73 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -9,6 +9,11 @@
   margin: 0 0 1rem 0;
   line-height: 1;
   cursor: pointer;
+  position: sticky;
+  top: 0;
+  background: var(--sidebar-bg);
+  z-index: 10;
+  padding-bottom: 0.5rem;
 }
 
 .search-section {
-- 
cgit v1.2.3