Skip to content

Console layout: collapsible sidebar + new swirl-sidebar-navigation #1731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
lukasballier wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Console layout: collapsible sidebar + new swirl-sidebar-navigation #1731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .changeset/sidebar-navigation-console-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@getflip/swirl-components": minor
---

Add `swirl-sidebar-navigation` component and redesign `swirl-console-layout` with a hideable, collapsible sidebar.

**New component `swirl-sidebar-navigation`** — reusable 296px sidebar shell (logo slot with Flip fallback, `appName`, collapse button emitting `collapseButtonClick`, scrollable default slot with scroll-state header/footer dividers, `user` footer slot, `elevated` shadow variant, `focusCollapseButton()` method).

**`swirl-console-layout` changes** (API is backward compatible, behavior notes below):

- New shell styling: an ambient radial-glow background on a sunken surface (themeable via `--swirl-console-layout-background`), a rounded content card, and a translucent 296px sidebar rendered through `swirl-sidebar-navigation`.
- The desktop sidebar can now be hidden via its collapse button and reopened via a floating menu button (or the app bar toggle when an app bar is visible). New event `sidebarVisibilityChange(boolean)`; new slot `logo`.
- The visibility state persists to localStorage. The default key is shared per origin — set `sidebarVisibilityStateStorageKey` per app if multiple Swirl console apps run on the same origin.
- Behavior change: `toggleSidebar()`/`showSidebar()`/`hideSidebar()` now also hide/show the sidebar on desktop viewports (previously mobile-only). If you call `hideSidebar()` on route changes to close the mobile drawer, guard it with a viewport check to keep the desktop sidebar open.
- The mobile drawer is now full-height and overlays the app bar while open.
198 changes: 195 additions & 3 deletions packages/swirl-components/custom-elements.manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6703,6 +6703,14 @@
"default": "\"Show main navigation\"",
"fieldName": "showNavigationButtonLabel"
},
{
"name": "sidebar-visibility-state-storage-key",
"type": {
"text": "string"
},
"default": "\"SWIRL_CONSOLE_LAYOUT_SIDEBAR_STATE\"",
"fieldName": "sidebarVisibilityStateStorageKey"
},
{
"name": "subheading",
"type": {
Expand Down Expand Up @@ -6826,6 +6834,16 @@
"readonly": true,
"attribute": "show-navigation-button-label"
},
{
"kind": "field",
"name": "sidebarVisibilityStateStorageKey",
"type": {
"text": "string"
},
"default": "\"SWIRL_CONSOLE_LAYOUT_SIDEBAR_STATE\"",
"readonly": true,
"attribute": "sidebar-visibility-state-storage-key"
},
{
"kind": "field",
"name": "subheading",
Expand All @@ -6838,7 +6856,7 @@
{
"kind": "method",
"name": "hideSidebar",
"description": "Hide the mobile navigation.",
"description": "Hide the sidebar.",
"return": {
"type": {
"text": "Promise<void>",
Expand All @@ -6854,7 +6872,7 @@
{
"kind": "method",
"name": "showSidebar",
"description": "Show the mobile navigation.",
"description": "Show the sidebar.",
"return": {
"type": {
"text": "Promise<void>",
Expand All @@ -6870,7 +6888,7 @@
{
"kind": "method",
"name": "toggleSidebar",
"description": "Toggle the mobile navigation visibility.",
"description": "Toggle the sidebar visibility.",
"return": {
"type": {
"text": "Promise<void>",
Expand Down Expand Up @@ -6908,6 +6926,12 @@
}
]
}
},
{
"name": "sidebarVisibilityChange",
"type": {
"text": "CustomEvent<boolean>"
}
}
],
"slots": [
Expand All @@ -6931,6 +6955,10 @@
"name": "heading",
"description": "The main content's heading (only rendered if \"heading\" prop is not set)."
},
{
"name": "logo",
"description": "Custom logo (forwarded to the sidebar navigation)"
},
{
"name": "navigation",
"description": "The main navigation"
Expand Down Expand Up @@ -49288,6 +49316,170 @@
}
]
},
{
"kind": "javascript-module",
"path": "src/components/swirl-sidebar-navigation/swirl-sidebar-navigation.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "swirl-sidebar-navigation",
"name": "SwirlSidebarNavigation",
"attributes": [
{
"name": "app-name",
"type": {
"text": "string"
},
"fieldName": "appName"
},
{
"name": "collapse-button-label",
"type": {
"text": "string"
},
"default": "\"Hide navigation\"",
"fieldName": "collapseButtonLabel"
},
{
"name": "elevated",
"type": {
"text": "boolean"
},
"fieldName": "elevated"
},
{
"name": "hide-collapse-button",
"type": {
"text": "boolean"
},
"fieldName": "hideCollapseButton"
},
{
"name": "navigation-label",
"type": {
"text": "string"
},
"default": "\"Main\"",
"fieldName": "navigationLabel"
}
],
"members": [
{
"kind": "field",
"name": "appName",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "app-name"
},
{
"kind": "field",
"name": "collapseButtonLabel",
"type": {
"text": "string"
},
"default": "\"Hide navigation\"",
"readonly": true,
"attribute": "collapse-button-label"
},
{
"kind": "field",
"name": "elevated",
"type": {
"text": "boolean"
},
"readonly": true,
"attribute": "elevated"
},
{
"kind": "field",
"name": "hideCollapseButton",
"type": {
"text": "boolean"
},
"readonly": true,
"attribute": "hide-collapse-button"
},
{
"kind": "field",
"name": "navigationLabel",
"type": {
"text": "string"
},
"default": "\"Main\"",
"readonly": true,
"attribute": "navigation-label"
},
{
"kind": "method",
"name": "focusCollapseButton",
"description": "Focus the collapse button.",
"return": {
"type": {
"text": "Promise<void>",
"references": [
{
"name": "Promise",
"package": "global:"
},
{
"name": "HTMLButtonElement",
"package": "global:"
}
]
}
}
}
],
"events": [
{
"name": "collapseButtonClick",
"type": {
"text": "CustomEvent<MouseEvent>",
"references": [
{
"name": "MouseEvent",
"package": "global:"
}
]
}
}
],
"slots": [
{
"name": "(default)",
"description": "Navigation content (e.g. swirl-tree-navigation)"
},
{
"name": "logo",
"description": "Custom logo/brand mark shown in the header (32×32). Falls back to the Flip logo mark."
},
{
"name": "user",
"description": "User profile content pinned to the bottom"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "SwirlSidebarNavigation",
"declaration": {
"name": "SwirlSidebarNavigation"
}
},
{
"kind": "custom-element-definition",
"name": "swirl-sidebar-navigation",
"declaration": {
"name": "SwirlSidebarNavigation"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/swirl-skeleton-box/swirl-skeleton-box.tsx",
Expand Down
Loading
Loading