Hive Hive
Sign in

feat(noora, server): improve sidebar dropdowns, add overlay scrollbar…

GitHub issue · Closed

Metadata
Source
tuist/tuist #11264
Updated
Jun 24, 2026
Details

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.

Comments
A
asmitbm Jun 15, 2026

The animation of the chevron should only run when it collapses/expands, right now, it runs every time.

This is fixed

F
fortmarek Jun 15, 2026

The chevron doesn’t seem to be vertically centered with the text

A
asmitbm Jun 15, 2026

The chevron doesn’t seem to be vertically centered with the text

Ahh missed this, fixed now

TA
tuist-atlas[bot] Jun 17, 2026

The changes from this pull request are now available in xcresult-processor-image@0.24.1. Update to this version to get the improved sidebar dropdowns and overlay scrollbar.

TA
tuist-atlas[bot] Jun 17, 2026

This change is now available in server@1.213.1. Update to this version to use the improved sidebar dropdowns and overlay scrollbar.

TA
tuist-atlas[bot] Jun 17, 2026

The sidebar dropdown improvements and overlay scrollbar changes from this pull request are now available in noora@0.82.4. Update to that version to use the new features.