Hive
feat(noora, server): improve sidebar dropdowns, add overlay scrollbar…
GitHub issue · Closed
What changed
Sidebar dropdowns
-
Clicking a group’s chevron now only expands/collapses the group; clicking the label/icon navigates. Previously the whole row was a single link that did both, so it was impossible to peek into a group without leaving the current page. The trigger is now a real
<button>with an aria-label, which also gives the toggle proper keyboard and screen-reader semantics. -
The dashboard layouts previously worked around the single-element design by disabling each group’s collapsible on every page except its own
(disabled={@current_path != ...})and only rendering the link conditionally. Those workarounds are removed, groups are always navigable and always toggleable. The Runners group had this logic inverted, which is also fixed by the removal. -
The chevron is now an animated icon (right → down, crossfade-rotate).
-
Expanding/collapsing animates using zag.js’s measured –height variable: open is a 250ms grow with fade-in; close is a faster (160ms) fade-dominant sweep, where items are fully faded by the halfway point so closing reads as a fade rather than a reversed slide.
https://github.com/user-attachments/assets/86097bfd-889a-4c3f-b4b5-632849b2f209
Overlay scrollbar for the sidebar (new NooraScrollArea hook)
-
The sidebar’s native scrollbar is replaced with a overlay: a 3px thumb that thickens to 6px on hover or drag, with drag-to-scroll and click-to-jump on the track.
-
A bottom gradient hints that there’s more to scroll, and fades out when the bottom is reached so it never permanently obscures the last item.
https://github.com/user-attachments/assets/ae75ef7e-1376-4745-b87f-1f682ce62981
Dashboard app-shell layout (server)
-
The dashboard no longer scrolls the document. The shell is a fixed 100dvh column — headerbar on top, sidebar and content below — and the content pane scrolls in its own container, like the sidebar already does.
-
The divider under the headerbar is now a border-bottom on the header itself rather than a separate element after it, so it moves (or rather, stays) as one unit with the header. Header vertical padding tightened to spacing-4.
Visual tweaks
The navigation loading bar is now Noora purple instead of topbar’s default blue — purple-500 in light mode, purple-400 in dark.