Left navigation — design vs. shipped
Side-by-side of the left-nav rail as designed (the left-nav-compact Storybook prototype) versus what actually shipped to the product. Screenshots are the real rendered pixels of each — the shipped column is the live <LeftNavigation/> component, not a mockup.
01The two rails, side by side
The destinations, icons, labels, Beta tags, and the v2 badge match. The divergence is in the rail's chrome and behavior — most visible at the bottom of the rail and in how it collapses. Switch states to compare.
02What actually differs
Four real differences. Everything else — the destination list and its ordering, iconography, labels, Beta tags, the version badge — is identical.
| Aspect | Design | Shipped |
|---|---|---|
| How it collapses | Automatic — collapses to icon-only when the viewport gets short (≈≤700 px tall). No button. Biggest delta |
Manual — a user-clicked “Less” / expand toggle, remembered as a saved preference. |
| Bottom slot | Dedicated tenant-logo slot pinned at the bottom (dashed placeholder when none). Missing in shipped |
No logo slot; the bottom hosts the collapse toggle. Customer branding only appears if a tenant logo is configured. |
| Overflow | All destinations scroll inside the rail (slim scrollbar + fade). Explicitly no “More” menu. Behavioral |
Standard NeoSideNav overflow behavior. |
| What it's built on | A bespoke rail hand-assembled from NeoNavigationItem + NeoTooltip — a one-off exploration. | The shared design-system NeoSideNav component. Deliberate — reuse |
03Reading the divergence
For the “it differs greatly” conversation — what's real, what's a fair trade, and what's worth pushing back into the design system.
The one substantive behavior change: auto → manual collapse
The design was a responsive rail that collapsed itself when space got tight; engineering shipped a manual, user-toggled, persisted collapse. That's the change that makes it “feel different,” even though the contents match. Worth an explicit decision on which model we want.
Adopting NeoSideNav was the right call
The prototype was bespoke; the shipped rail uses the shared design-system component. That's less code to own and it stays consistent as Neo evolves — a win, not drift. The flip side: behaviors the prototype invented (auto-collapse, the tenant-logo slot) only exist if we add them to NeoSideNav.
The genuine gaps to close
If the auto-collapse and the pinned tenant-logo slot matter, those are the two things to add back — ideally into NeoSideNav so every product surface gets them, not just this rail.
Fidelity note
The shipped column is the live component rendered in a scoped Storybook (no backend), so capability-gated items like Moddy and Changelog are forced visible and the customer logo uses a generic “ACME” stand-in. Layout, states, and chrome are faithful.