aboutsummaryrefslogtreecommitdiffstats
path: root/frontend
diff options
context:
space:
mode:
authorAdam Mathes <adam@adammathes.com>2026-02-14 09:59:56 -0800
committerAdam Mathes <adam@adammathes.com>2026-02-14 09:59:56 -0800
commit7fbb0c3838e188ba3b810156ff6546239e89923e (patch)
tree857f8e86a7796cdb0e1c4c4dac5c1d4ea7bd71b2 /frontend
parentc9c3469ce90f5e1cf624a9a97d66fd6db3aba8cb (diff)
downloadneko-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')
-rw-r--r--frontend/src/App.css65
-rw-r--r--frontend/src/App.tsx9
-rw-r--r--frontend/src/components/FeedList.css5
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 {