@ctrliq/quantic-components 1.62.2 → 1.63.0

package/dist/layout/index.stories.d.ts

@@ -15,4 +15,5 @@ export declare const FocusedVariant: import("../shared/story").StoryObject<objec
 export declare const FocusedVariantWithTopbar: import("../shared/story").StoryObject<object>;
 export declare const ToggleableSidebar: import("../shared/story").StoryObject<object>;
 export declare const WithToolbar: import("../shared/story").StoryObject<object>;
+export declare const SidebarWithStickyHeader: import("../shared/story").StoryObject<object>;
 export declare const FilledPageWithSplitter: import("../shared/story").StoryObject<object>;

package/dist/layout/index.stories.js

@@ -249,6 +249,32 @@ export const WithToolbar = story().render(({ html }) => html `
       </quantic-page>
     </quantic-layout>
   `);
+export const SidebarWithStickyHeader = story().render(({ html }) => html `
+    <quantic-layout>
+      <span slot="titlebar">Dashboard</span>
+      <quantic-navbar slot="navbar"></quantic-navbar>
+      <quantic-sidebar slot="sidebar" collapsible>
+        <div
+          slot="header"
+          style="display: flex; align-items: center; gap: var(--quantic-spacing-2); padding: var(--quantic-spacing-2); border-bottom: 1px solid var(--quantic-border-secondary); margin-bottom: var(--quantic-spacing-2);"
+        >
+          <quantic-icon-brand-fuzzball-solid size="sm"></quantic-icon-brand-fuzzball-solid>
+          <span style="font-weight: var(--quantic-font-weight-semibold); font-size: var(--quantic-font-size-sm);">CIQ Engineering</span>
+        </div>
+        ${Array.from({ length: 20 }, (_, i) => html `
+            <quantic-sidebar-menu-item href="#" label="Nav item ${i + 1}">
+              <quantic-icon-lucide-circle slot="icon" size="sm"></quantic-icon-lucide-circle>
+            </quantic-sidebar-menu-item>
+          `)}
+      </quantic-sidebar>
+      <quantic-page slot="body">
+        <quantic-panel variant="solid">
+          <quantic-panel-header slot="header">Sticky sidebar header</quantic-panel-header>
+          Scroll the sidebar — the header above the nav items stays fixed.
+        </quantic-panel>
+      </quantic-page>
+    </quantic-layout>
+  `);
 export const FilledPageWithSplitter = story().render(({ html }) => html `
     <quantic-layout>
       <span slot="titlebar">Workflow Editor</span>

package/dist/layout/sidebar.component.js

@@ -41,36 +41,42 @@ let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement) {
         aria-label=${this.ariaLabel}
         aria-expanded=${this.isAsideExpanded !== false ? 'true' : 'false'}
       >
-        <div class="body">
-          <slot @slotchange=${this.handleAutoHide}></slot>
+        <div class="header">
+          <slot name="header" @slotchange=${this.handleAutoHide}></slot>
         </div>
 
-        <div class="footer">
-          <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
-        </div>
+        <div class="scroll-area">
+          <div class="body">
+            <slot @slotchange=${this.handleAutoHide}></slot>
+          </div>
+
+          <div class="footer">
+            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+          </div>
 
-        ${this.isDesktopViewport && this.collapsible
+          ${this.isDesktopViewport && this.collapsible
             ? html `<div class="toggle-container">
-              <quantic-sidebar-menu-item
-                @click=${this.handleToggle}
-                title=${this.isAsideExpanded
+                <quantic-sidebar-menu-item
+                  @click=${this.handleToggle}
+                  title=${this.isAsideExpanded
                 ? 'Collapse sidebar'
                 : 'Expand sidebar'}
-                label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
-                variant=${SidebarMenuItemVariant.Secondary}
-              >
-                ${this.isAsideExpanded
+                  label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
+                  variant=${SidebarMenuItemVariant.Secondary}
+                >
+                  ${this.isAsideExpanded
                 ? html `<quantic-icon-lucide-panel-left-close
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left-close>`
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left-close>`
                 : html `<quantic-icon-lucide-panel-left
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left>`}
-              </quantic-sidebar-menu-item>
-            </div>`
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left>`}
+                </quantic-sidebar-menu-item>
+              </div>`
             : null}
+        </div>
       </nav>
     `;
     }
@@ -82,6 +88,7 @@ Sidebar.meta = {
     category: 'navigation',
     subComponents: ['quantic-sidebar-menu-item', 'quantic-sidebar-menu-item-group'],
     slots: {
+        header: { description: 'Optional sticky header rendered above the scrollable content.' },
         '': { description: 'Primary nav items (quantic-sidebar-menu-item or quantic-sidebar-menu-item-group).' },
         footer: { description: 'Footer nav items pinned to the bottom of the sidebar.' },
     },
@@ -97,6 +104,24 @@ Sidebar.styles = css `
       flex-direction: column;
       height: 100%;
       flex: 1;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .header {
+      padding: var(--quantic-spacing-2);
+      padding-bottom: 0;
+      flex-shrink: 0;
+    }
+
+    .header:has(slot[hidden]) {
+      display: none;
+    }
+
+    .scroll-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       padding: var(--quantic-spacing-2);
       box-sizing: border-box;
       overflow-x: hidden;
@@ -105,20 +130,20 @@ Sidebar.styles = css `
       scrollbar-color: var(--quantic-border-secondary) transparent;
     }
 
-    .main::-webkit-scrollbar {
+    .scroll-area::-webkit-scrollbar {
       width: 4px;
     }
 
-    .main::-webkit-scrollbar-track {
+    .scroll-area::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .main::-webkit-scrollbar-thumb {
+    .scroll-area::-webkit-scrollbar-thumb {
       background: var(--quantic-border-secondary);
       border-radius: var(--quantic-radius-full);
     }
 
-    .main:not(.is-aside-expanded) .main {
+    .main:not(.is-aside-expanded) .scroll-area {
       padding: var(--quantic-spacing-1);
     }