feat: sidebar structure — header-pinned collapse, rail parity, identity footer - #42
Merged
Conversation
…ty footer Bump 0.42.1 -> 0.43.0. - Collapse toggle moves from a floating row below the brand into the sidebar header, pinned to the trailing edge; collapsed rail keeps it as the sole top-of-rail control. - Section captions collapse to a subtle divider instead of vanishing, and drop to a quieter font-weight/spacing treatment when expanded. - UserMenu variant="full" is the canonical identity footer (avatar + name + email), with new themeToggle and badges props — the theme toggle now lives inside the popover instead of a loose footer icon. - NotificationBell gets a variant="row" sidebar presentation (mounted via the new SidebarItem.render escape hatch) with a portal-based popover so it isn't clipped by the sidebar's own overflow, plus SidebarItem.badge for unread counts that degrade to a dot on the collapsed rail. Bell convention: nav row on desktop/rail, NavigationBar trailing on mobile — never the footer, never paired with the theme toggle. - Showcase dogfoods all of the above; e2e updated for the moved theme toggle and extended to cover the mobile bell + rail-collapsed badge dot and portaled popover. Closes etamong-playground/planning#1133
…nu dropdown, unified popover positioning Applies the consolidated review findings for planning#1133 (ui#42): - SidebarItem badge is now folded into the row's aria-label instead of being silently dropped by the unconditional aria-label override; the visible pill is aria-hidden once folded in. - UserMenu's dropdown now portals to <body> with viewport-fixed coordinates, like NotificationBell's row popover, so it isn't clipped by Sidebar's overflow-y: auto as the variant="full" footer control. - NotificationBell + UserMenu popover positioning is unified into a shared usePopoverPosition hook: one useLayoutEffect pass (not two effects racing on a stale closure), both axes clamped to the viewport against the panel's real measured size, recomputed on scroll too. - NotificationBell row variant no longer opens a mobile sheet (and body scroll lock) if left open while the viewport crosses below 720px — the sidebar is CSS-hidden there, not unmounted. - NotificationBell row variant always has an accessible name (including at 0 unread) and carries the same title tooltip Item() sets. - Collapsed-rail captions are aria-hidden; a caption-turned-divider no longer doubles up with the first secondary section's own border. - Rail collapse toggle restored to 40x40 (was shrunk to 32x32). - Dev-only warning when SidebarItem.render is combined with fields it ignores. - Docs: themeToggle adoption hazard (porygon/webui dual-control conflict), caption-collapse behavioral note, dead label dropped from the render() example.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Sidebar structure pass against the reference UI (planning#1133): the desktop
collapse affordance, rail parity, the identity footer, and where the
notification bell/theme toggle live all move. Presentation + placement, not
new state — existing props/behavior are unchanged, new capability arrives
via new optional props.
floating below the brand into the sidebar header, pinned to the trailing
edge and vertically aligned with the app name/icon. Collapsed rail: the
app name/icon hide and the toggle becomes the sole visible header
control — the top item of the rail.
secondarySectionscaptions,secondaryCaption) collapse to a subtle 1px divider instead of vanishingoutright (a second-or-later
secondarySectionsgroup otherwise has noborder of its own and loses all separation once collapsed). Expanded
captions get a quieter treatment (
--etu-fw-medium, more space above).<UserMenu variant="full">is the new canonical<Sidebar footer>control: a single full-width avatar + name + emailrow opening the same popover. New
themeToggle={{ appKey }}adds alight/dark row to the popover (backed by
getTheme/setTheme); newbadgesadds role/permission pills under the name.footer into the
UserMenupopover.<NotificationBell variant="row">isa new full-width sidebar-row presentation, mounted via a new
SidebarItem.renderescape hatch; it reuses.etu-sidebar-item*classesso it inherits rail-collapse (icon-only, badge → dot) for free. Its
desktop popover renders through a portal to
<body>so it isn't clippedby the sidebar's own
overflow: autoat any rail width, including the64px collapsed column. New
SidebarItem.badgegives any plain nav row atrailing indicator that degrades to a dot on the collapsed rail. On
mobile (sidebar hidden < 720px) the bell mounts in
<NavigationBar trailing>instead.NotificationBellitself is notdeprecated — only the footer-icon-cluster placement is; nothing in the
showcase mounts it there.
a nav row + mobile trailing edge, theme row inside the popover) and adds
a
notification-bellregistry entry (pre-existing gap — the componenthad no registry entry before this PR).
Full behavioral-change list: CHANGELOG.md 0.43.0, "Behavioral notes for 0.43".
Test plan
pnpm typecheck && pnpm build && pnpm testpnpm --filter @etamong-playground/ui-showcase buildCI=1 pnpm e2e— 13/13 passing, including two new specs (mobile bellon
NavigationBar trailing, and rail-collapsed bell badge-dot +portaled popover)
vite preview) at1280×900 expanded, 1280×900 collapsed/rail, and 390×844 mobile, in
both themes; iterated once after catching that the pre-existing
"notifications" (toast/dialog) nav item and the new bell row both
used a bell glyph and read as a duplicate destination — the toast
page now uses a distinct message-square icon
Closes etamong-playground/planning#1133