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

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());