personal memory agent
fix: improve menu bar styling for active states and opacity
- Unify hover and current app states to use consistent 5% black tint
- Layer tint over facet background in collapsed mode for visibility
- Make expanded sidebar fully opaque to prevent content bleed-through
- Remove font-weight change for current app in favor of background tint
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+10
-13
+10
-13
convey/static/app.css
+10
-13
convey/static/app.css
···
238
238
239
239
body.sidebar-open .menu-bar {
240
240
width: var(--menu-bar-width-expanded);
241
-
background: var(--facet-bg, white);
241
+
background: linear-gradient(var(--facet-bg, transparent), var(--facet-bg, transparent)), white;
242
242
border-right: 1px solid var(--facet-border, #e0e0e0);
243
243
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
244
244
border-bottom-right-radius: 0; /* Remove rounded corner when expanded */
···
301
301
background: var(--facet-bg, white);
302
302
}
303
303
304
-
.menu-bar .menu-item:hover {
305
-
background: rgba(0,0,0,0.05);
306
-
}
307
-
304
+
/* Consistent active/hover state for menu items */
305
+
.menu-bar .menu-item:hover,
308
306
.menu-bar .menu-item.current {
309
-
font-weight: 500;
307
+
background: rgba(0, 0, 0, 0.05);
310
308
}
311
309
312
-
/* In expanded mode, only highlight on hover and current */
313
-
body.sidebar-open .menu-bar .menu-item:hover {
314
-
background: var(--facet-bg);
315
-
}
316
-
317
-
body.sidebar-open .menu-bar .menu-item.current {
318
-
background: var(--facet-bg);
310
+
/* When collapsed, layer the tint over facet background */
311
+
body:not(.sidebar-open) .menu-bar .menu-item:hover,
312
+
body:not(.sidebar-open) .menu-bar .menu-item.current {
313
+
background:
314
+
linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
315
+
var(--facet-bg, white);
319
316
}
320
317
321
318
.menu-bar .menu-item .icon {