feat(wcc-sidebar): add header shadow and scrolled state for sidebar menu to show elevation when content is scrolled

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-04 - 3.7.0 - feat(wcc-sidebar)
+add header shadow and scrolled state for sidebar menu to show elevation when content is scrolled
+
+- Introduce isMenuScrolled state to track whether the menu has been scrolled
+- Add handleMenuScroll handler and bind it to the menu scroll event
+- Apply a 'scrolled' class to .sidebar-header to add box-shadow and border-bottom color with transitions
+- Update template to conditionally add scrolled class and attach scroll listener
+
 ## 2026-01-04 - 3.6.2 - fix(wcc-sidebar)
 use sidebar's internal .menu element for scroll management and expose scrollableContainer getter
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.6.2',
+  version: '3.7.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-sidebar.ts

@@ -48,6 +48,10 @@ export class WccSidebar extends DeesElement {
   @state()
   accessor isHidden: boolean = false;
 
+  // Track if menu is scrolled for header shadow
+  @state()
+  accessor isMenuScrolled: boolean = false;
+
   private sectionsInitialized = false;
 
   /**
@@ -96,6 +100,15 @@ export class WccSidebar extends DeesElement {
 
         .sidebar-header {
           flex-shrink: 0;
+          transition: box-shadow 0.2s ease, border-color 0.2s ease;
+          border-bottom: 1px solid transparent;
+          position: relative;
+          z-index: 1;
+        }
+
+        .sidebar-header.scrolled {
+          box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
+          border-bottom-color: var(--border);
         }
 
         .menu {
@@ -437,7 +450,7 @@ export class WccSidebar extends DeesElement {
           background: var(--primary);
         }
       </style>
-      <div class="sidebar-header">
+      <div class="sidebar-header ${this.isMenuScrolled ? 'scrolled' : ''}">
         <div class="search-container">
           <input
             type="text"
@@ -454,7 +467,7 @@ export class WccSidebar extends DeesElement {
         </div>
         ${this.renderPinnedSection()}
       </div>
-      <div class="menu">
+      <div class="menu" @scroll=${this.handleMenuScroll}>
         ${this.renderSections()}
       </div>
       <div
@@ -787,6 +800,11 @@ export class WccSidebar extends DeesElement {
     this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
   }
 
+  private handleMenuScroll(e: Event) {
+    const target = e.target as HTMLElement;
+    this.isMenuScrolled = target.scrollTop > 0;
+  }
+
   private matchesSearch(name: string): boolean {
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());