Responsive admin sidebar + navbar dropdown fix
Responsive admin sidebar + navbar dropdown fix
#30 in Riparion/riparion-cms — merged 2026-06-01
Summary
Two related UI changes to the catalog-component chrome:
- Fix account dropdown clipping at the viewport right edge.
- Rework the admin shell as a responsive catalog sidebar, installing the supporting catalog components.
1. Navbar dropdown clipping
.dx-navbar-content was positioned position: absolute; left: 0, so the panel always grew rightward from the trigger's left edge. The account menu sits at the far right of the bar, so its panel overflowed the viewport and got clipped.
Fix: anchor the trailing nav's dropdown (.dx-navbar-nav:last-child .dx-navbar-content) to the trigger's right edge so it grows leftward. The search form is the first child and the account NavbarNav is the last, so :last-child cleanly targets only this menu and :first-child never matches the nav.
2. Responsive admin sidebar
- Install the
separator,sheet,sidebar,skeleton, andtooltipcatalog components (modules +#[css_module]stylesheets wired intoLocalStylesheets). - Rebuild
AdminShellon the catalogSidebarin Offcanvas mode: collapsible on desktop (viaSidebarTrigger/ ⌘-B) and an automatic slide-in overlay drawer on narrow screens. - Nav entries become a reusable
AdminNavItemcomponent — each aSidebarMenuButtonrendered as a routerLink, permission-gated by the exact token its section requires and highlighted when active.
Commits
542f47dFix account dropdown clipping at viewport right edge46f4cfaAdd catalog sidebar/sheet/tooltip components; rework admin shell as responsive sidebar
🤖 Generated with Claude Code
Last updated 2026-06-02
Links to this note
Credits
Merged pull requests, newest first.