Style sidebar active gradient with theme colors - #238
Merged
Merged
Conversation
…server-sdk:0.31.2, trpc-backend-init:0.9.68, openapi-docs-ui:0.1.9, auth-server:0.46.3, example-nextjs-resource-server:0.5.10 - @schemavaults/ui 0.111.0 + theme 0.30.0; mark the active dashboard sidebar item
Update @schemavaults/ui (0.110.1 -> 0.111.0) and @schemavaults/theme
(0.29.0 -> 0.30.0) everywhere. The new DashboardLayout marks the sidebar
item for the current page (longest matching url wins, so /admin/users
lights up "Users" rather than "Admin Dashboard", and /orgs/new falls back
to "Organizations") with a gradient wash, a glowing gradient bar and a
gradient label, and sets aria-current="page" on its link. The auth server
already passes usePathname, so it only needed the link to forward it:
- The sidebar's Link component is now a module-level component that
forwards aria-current (and the onClick ui uses to close the mobile
sidebar on tap) to next/link. It was an inline arrow before, which also
gave DashboardLayout a new component type on every render and remounted
every sidebar link.
- The gradient runs between the theme's --sidebar-active-start/-end
tokens, which default to the brand blue and red. The root layout now
points them at SCHEMAVAULTS_AUTH_SERVER_THEME_COLOR_1/2 (same defaults)
through the theme's --sv-theme-{light,dark}-sidebar-active-* overrides
on <html>, so white-label deployments get a gradient matching their
wordmark and backgrounds, including in the portalled mobile sidebar.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vuugr5xmMe4QPKM1wFBkWW
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
Apply the auth server's white-label theme colors to the dashboard sidebar's active-item gradient, ensuring the active link indicator matches the deployment's branding (Wordmark and page background gradients).
Changes
sidebar-active-gradient-style.ts: Creates CSS custom property overrides for the sidebar active-item gradient (--sidebar-active-startand--sidebar-active-end) in both light and dark modes, using the configured theme colorsapp/layout.tsx): Apply the sidebar gradient style to the<html>element so it reaches the mobile sidebar (which renders in a portal outside the layout)app/(client)/(authenticated)/layout.tsx): Extract the inlineLinkcomponent to module scope asDashboardSidebarLinkto prevent remounting on every render; now properly forwards thearia-currentattribute thatDashboardLayoutsets for the current page.env.example): Clarify that theme colors now also style the sidebar active-item gradient, with guidance on color selection for legibility@schemavaults/themeto 0.30.0 and@schemavaults/uito 0.111.0 to support the new gradient token overridesImplementation Details
The sidebar gradient style is set on
<html>rather than the layout component so it applies to the mobile sidebar, which renders in a React portal outside the layout tree. The theme tokens default to the same brand colors as the theme colors, so this change is transparent unlessSCHEMAVAULTS_AUTH_SERVER_THEME_COLOR_1/2are configured.https://claude.ai/code/session_01Vuugr5xmMe4QPKM1wFBkWW