Console layout: collapsible sidebar + new swirl-sidebar-navigation - #1731
Draft
lukasballier wants to merge 1 commit into
Draft
Console layout: collapsible sidebar + new swirl-sidebar-navigation#1731lukasballier wants to merge 1 commit into
lukasballier wants to merge 1 commit into
Conversation
…avigation - Add swirl-sidebar-navigation: reusable 296px sidebar shell (logo slot with Flip fallback, appName, collapse button, scrollable nav with scroll-state header/footer dividers, user footer slot, elevated variant) - Redesign swirl-console-layout: hideable/collapsible desktop sidebar with a floating reopen button, localStorage persistence, ambient-glow shell, 296px nav, internal scroll (no min-height overflow) - Backward-compatible API; adds sidebarVisibilityChange event, logo slot, and sidebarVisibilityStateStorageKey prop ACT-3612 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://icy-water-049ec4003-1731.westeurope.3.azurestaticapps.net |
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
1 participant
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.
Console layout: collapsible sidebar + new
swirl-sidebar-navigationLinear: ACT-3612 — Update the Swirl console layout
What this does
Adds a hideable/collapsible navigation to
swirl-console-layout(expanded ↔ hidden) and extracts the sidebar chrome into a new reusableswirl-sidebar-navigationcomponent, so it can be reused in other apps.New component:
swirl-sidebar-navigationA 296px sidebar shell:
logoslot (falls back to the Flip mark),appNamewordmarkcollapseButtonClick(host decides behavior)swirl-console-layoutapp-bar pattern)userfooter slotelevatedshadow variant;focusCollapseButton()methodswirl-console-layout(backward-compatible — additions only)swirl-sidebar-navigationlocalStoragesidebarVisibilityChangeevent,logoslot,sidebarVisibilityStateStorageKeyprop--swirl-console-layout-background), rounded content card, translucent 296px sidebarmin-heightoverflow so the layout fills its container and scrolls internally instead of growing to content heightBehavior change to flag:
toggleSidebar()/showSidebar()/hideSidebar()now affect desktop too (previously mobile-only). If a consumer callshideSidebar()on route change to close the mobile drawer, it should guard with a viewport check. The mobile drawer is now full-height and overlays the app bar.Design
Figma — Web Components 2.0: console layout / background, sidebar nav. Expanded/hidden states from Flip Fusion: expanded, hidden.
Verification
yarn test— full suite green (505+ tests); the two touched components: 22/22yarn lintclean; prettier cleanPreview
Admin / SwirlConsoleLayoutandComponents / SwirlSidebarNavigation.cd packages/swirl-components && yarn stencil:build && yarn storybook:start→ http://localhost:6006Open questions for review
appNameuses"Clash Grotesk Variable"per design, but the font isn't bundled in Swirl; it falls back to Inter unless the host app loads it. Should we add an@font-face, or leave it to consumers?swirl-sidebar-navigationstayswidth: 100%(fills its container; the 296px is set byswirl-console-layoutand the story). Prefer a hardcoded 296px default on the component instead?:host { height: 100vh }— unchanged from the original; if the layout is ever embedded in a sized parent rather than the viewport, this may want to be100%.surface-sunkendark default (no dark design was provided); confirm or supply the dark spec.🤖 Generated with Claude Code