diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-14 09:59:56 -0800 |
|---|---|---|
| committer | Adam Mathes <adam@adammathes.com> | 2026-02-14 09:59:56 -0800 |
| commit | 7fbb0c3838e188ba3b810156ff6546239e89923e (patch) | |
| tree | 857f8e86a7796cdb0e1c4c4dac5c1d4ea7bd71b2 /frontend/src | |
| parent | c9c3469ce90f5e1cf624a9a97d66fd6db3aba8cb (diff) | |
| download | neko-7fbb0c3838e188ba3b810156ff6546239e89923e.tar.gz neko-7fbb0c3838e188ba3b810156ff6546239e89923e.tar.bz2 neko-7fbb0c3838e188ba3b810156ff6546239e89923e.zip | |
fix: ensure neko toggle button is always accessible (fixing NK-zvt8hi)
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/App.css | 65 | ||||
| -rw-r--r-- | frontend/src/App.tsx | 9 | ||||
| -rw-r--r-- | frontend/src/components/FeedList.css | 5 |
3 files changed, 29 insertions, 50 deletions
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 { |
