Add active sidebar item indicator with aria-current support - #126
Merged
Merged
Conversation
…five activeItemStyle variants The sidebar now highlights the item for the current page. The current page comes from the new `activeHref` prop, or from `usePathname` when supplied; the longest item url that the path equals or is nested beneath wins. The active link gets aria-current="page" and its <li> data-active="true". `activeItemStyle` picks the treatment: highlight (default), right-border, color-shift, tinted, solid, or none. Stories for each, plus a story where the marker follows client-side navigation, and unit tests for the matcher. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01LEDndwAbCg9BHyK3WRGCkX
Drops the `activeItemStyle` prop and the highlight, right-border, color-shift, solid and none styles. The active sidebar item always gets a blue tint, a left-edge bar and a bold blue label (red in an adminOnly group). The per-style stories collapse into a single ActiveItem story. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01LEDndwAbCg9BHyK3WRGCkX
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The active row now gets a gradient wash, a glowing gradient bar down its left edge that grows in, and a bold gradient label. The two colours come from --sidebar-active-start / --sidebar-active-end, falling back to the SchemaVaults brand blue and brand red, so any ancestor (or a future theme token) can re-colour it. Icon and label use each colour mixed 60/40 with the foreground to stay readable in both modes. Admin rows keep their red label and icon. Adds an ActiveItemCustomGradient story. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01LEDndwAbCg9BHyK3WRGCkX
…e gradient tokens Theme 0.30.0 defines --sidebar-active-start / --sidebar-active-end (brand blue / brand red by default, overridable via --sv-theme-*-sidebar-active-* and THEME_*_SIDEBAR_ACTIVE_* env vars), which the active sidebar item already reads. Docs now point at the theme tokens, the brand-colour fallbacks stay for apps on an older theme's globals.css, and the ActiveItem story asserts the bar follows the theme defaults and a deployment override. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01LEDndwAbCg9BHyK3WRGCkX
This branch was successfully deployed
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
2 participants
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
Adds visual and semantic indicators for the currently active sidebar item in the DashboardLayout. The active item is determined by matching the current pathname against sidebar item URLs, with the longest matching path winning. The active state is shown with a two-colour gradient treatment (a gradient wash across the row, a glowing gradient bar down its left edge, and a bold gradient label) and exposed through
aria-current="page"on the link.Key Changes
New active item detection system (
dashboard-sidebar-active-item.ts):normalizeDashboardSidebarPath()- Normalizes hrefs by dropping query strings, fragments, and trailing slashes; only matches root-relative pathsisDashboardSidebarPathWithin()- Checks if a current path equals or is nested beneath an item pathresolveActiveDashboardSidebarItemPath()- Resolves the best matching sidebar item for a given pathname using longest-match logicContext providers (
dashboard-sidebar-active-item-context.tsx):DashboardSidebarActiveItemProvider- Accepts explicitcurrentPathnamepropDashboardSidebarActiveItemFromPathnameHookProvider- Reads current pathname from consumer'susePathnamehookuseIsDashboardSidebarItemActive()- Hook for sidebar items to check if they are activeGradient styling for the active item (
dashboard-sidebar-active-item-indicator.tsx,dashboard-sidebar-item-renderer.tsx):--sidebar-active-start/--sidebar-active-endtokens from@schemavaults/theme0.30.0, which default to the SchemaVaults brand blue and red. Deployments re-theme them with--sv-theme-{light,dark}-sidebar-active-{start,end}or theTHEME_{LIGHT,DARK}_SIDEBAR_ACTIVE_{START,END}environment variables; setting the tokens on an ancestor re-colours a single layout. Brand-colour fallbacks keep the gradient intact for apps still loading an older theme'sglobals.cssdata-active="true"attribute to active item<li>elementsaria-current="page"to active item linksDashboardLayout integration (
dashboard-layout.tsx):activeHrefprop to explicitly set the current page pathnameusePathnamehook is suppliedDependencies:
@schemavaults/theme0.29.0 → 0.30.0 (adds the twosidebar-active-*tokens and their Tailwind colours; no other changes)Type updates:
LinkComponentPropsto include optionalaria-currentattributeDashboardLayoutPropsdocumentation forusePathnameand newactiveHrefpropStorybook stories (
DashboardLayout.stories.tsx):activeHrefcontrol to component argsActiveItem- Shows active item with explicitactiveHref; its play test checks the gradient bar resolves to the theme tokens' brand defaults and follows--sv-theme-*-sidebar-active-*overrides on<html>ActiveAdminItem- Shows an active admin item (red label on the gradient backdrop)ActiveItemCustomGradient- Re-colours one layout by setting--sidebar-active-start/--sidebar-active-endon a wrapperActiveItemFollowsNavigation- Demonstrates active item following client-side navigation viausePathnamehookUnit tests (
dashboard-sidebar-active-item.test.ts):Implementation Details
/settings/billingis more specific than/settings, so only "Billing" lights up on that path/only matches itself to prevent a "Home" item from claiming every page/) participate in matching; external links and fragments are never marked activeplayfunctions) that verify the correct link hasaria-current="page"and the item hasdata-active="true"https://claude.ai/code/session_01LEDndwAbCg9BHyK3WRGCkX