@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/components/layout/Sidebar.svelte

@@ -15,12 +15,18 @@
   import type { Snippet } from 'svelte';
   import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
   import { cn } from '../../utils.js';
+  import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import LogoMain from '../LogoMain.svelte';
   import QuickLinks from './QuickLinks.svelte';
+  import SidebarSearch from './sidebar/SidebarSearch.svelte';
+  import SidebarSection from './sidebar/SidebarSection.svelte';
+  import SidebarFlyout from './sidebar/SidebarFlyout.svelte';
 
   interface Props {
     /** Navigation sections */
     navigation: NavSection[];
+    /** User roles for filtering navigation items */
+    userRoles?: string[];
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */
@@ -29,6 +35,8 @@
     mobileOpen?: boolean;
     /** Callback when mobile sidebar should close */
     onClose?: () => void;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom logo snippet */
     logo?: Snippet;
     /** Custom icon renderer for nav items */
@@ -45,16 +53,26 @@
     variant?: 'light' | 'dark';
     /** Use stronger/thicker border */
     strongBorder?: boolean;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
     /** Additional classes */
     class?: string;
   }
 
   let {
     navigation,
+    userRoles,
     collapsed = false,
     isMobile = false,
     mobileOpen = false,
     onClose,
+    onNavigate,
     logo,
     icon,
     quickLinks,
@@ -63,13 +81,269 @@
     footer,
     variant = 'light',
     strongBorder = false,
+    expandedWidth = 256,
+    collapsedWidth = 64,
+    searchable = false,
+    searchPlaceholder = 'Search...',
     class: className,
   }: Props = $props();
 
+  // Helper to check if item is visible based on roles
+  function isItemVisible(item: NavItem): boolean {
+    if (!item.roles || item.roles.length === 0) return true;
+    if (!userRoles || userRoles.length === 0) return false;
+    return item.roles.some((role) => userRoles.includes(role));
+  }
+
+  // Recursively filter items based on roles
+  function filterItems(items: NavItem[]): NavItem[] {
+    return items.filter(isItemVisible).map((item) => ({
+      ...item,
+      children: item.children ? filterItems(item.children) : undefined,
+    }));
+  }
+
+  // Filter navigation based on user roles
+  const roleFilteredNavigation = $derived(
+    navigation
+      .map((section) => ({
+        ...section,
+        items: filterItems(section.items),
+      }))
+      .filter((section) => section.items.length > 0)
+  );
+
+  // Search state
+  let searchQuery = $state('');
+
+  // Filter items by search query
+  function filterItemsBySearch(items: NavItem[], query: string): NavItem[] {
+    return items
+      .filter((item) => {
+        const matches = item.name.toLowerCase().includes(query);
+        const childMatches = item.children?.some((child) =>
+          child.name.toLowerCase().includes(query)
+        );
+        return matches || childMatches;
+      })
+      .map((item) => ({
+        ...item,
+        // Keep all children if parent matches, otherwise filter children
+        children: item.name.toLowerCase().includes(query)
+          ? item.children
+          : item.children?.filter((child) => child.name.toLowerCase().includes(query)),
+      }));
+  }
+
+  // Combined filtered navigation (roles + search)
+  const filteredNavigation = $derived.by(() => {
+    if (!searchQuery.trim()) return roleFilteredNavigation;
+    const query = searchQuery.toLowerCase();
+    return roleFilteredNavigation
+      .map((section) => ({
+        ...section,
+        items: filterItemsBySearch(section.items, query),
+      }))
+      .filter((section) => section.items.length > 0);
+  });
+
   // Variant-based styling
   const isLight = $derived(variant === 'light');
-
   const sidebarWidth = $derived(collapsed ? 'w-16' : 'w-64');
+
+  // Track previous search to avoid redundant updates
+  let prevSearchQuery = '';
+
+  // Initialize expanded sections based on navigation data (only if no persisted state)
+  $effect(() => {
+    // Only run on initial mount (no search)
+    if (searchQuery.trim()) return;
+
+    // Set default expansions if no persisted state
+    const defaultExpanded: string[] = [];
+    roleFilteredNavigation.forEach((section) => {
+      // Expand by default unless explicitly set to collapsed
+      if (!section.collapsible || section.expanded !== false) {
+        defaultExpanded.push(section.id);
+      }
+    });
+    sidebarStore.setDefaultSections(defaultExpanded);
+  });
+
+  // Handle search-triggered expansions separately to avoid loops
+  $effect(() => {
+    const query = searchQuery.toLowerCase().trim();
+
+    // Only act when search query actually changes
+    if (query === prevSearchQuery) return;
+    prevSearchQuery = query;
+
+    if (query) {
+      // Force expand all sections during search
+      const allSectionIds = roleFilteredNavigation.map((section) => section.id);
+      sidebarStore.forceExpandSections(allSectionIds);
+
+      // Force expand items with matching children
+      const itemsToExpand: string[] = [];
+
+      const collectMatchingParents = (items: NavItem[]) => {
+        items.forEach((item) => {
+          if (item.children) {
+            const hasMatchingChild = item.children.some((child) =>
+              child.name.toLowerCase().includes(query)
+            );
+            if (hasMatchingChild) {
+              itemsToExpand.push(item.id);
+            }
+            collectMatchingParents(item.children);
+          }
+        });
+      };
+
+      roleFilteredNavigation.forEach((section) => collectMatchingParents(section.items));
+      if (itemsToExpand.length > 0) {
+        sidebarStore.forceExpandItems(itemsToExpand);
+      }
+    }
+  });
+
+  // Initialize expanded items based on item.expanded property (only if no persisted state)
+  $effect(() => {
+    // Only run on initial mount (no search)
+    if (searchQuery.trim()) return;
+
+    const defaultExpanded: string[] = [];
+    const collectExpanded = (items: NavItem[]) => {
+      items.forEach((item) => {
+        if (item.children && item.expanded) {
+          defaultExpanded.push(item.id);
+        }
+        if (item.children) {
+          collectExpanded(item.children);
+        }
+      });
+    };
+    roleFilteredNavigation.forEach((section) => collectExpanded(section.items));
+    sidebarStore.setDefaultItems(defaultExpanded);
+  });
+
+  // Flyout state for collapsed sidebar
+  let hoveredFlyoutItem = $state<NavItem | null>(null);
+  let flyoutTop = $state(0);
+  let flyoutCloseTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleItemMouseEnter(item: NavItem, event: MouseEvent) {
+    if (!collapsed || isMobile) return;
+    // Cancel any pending close
+    if (flyoutCloseTimer) {
+      clearTimeout(flyoutCloseTimer);
+      flyoutCloseTimer = null;
+    }
+    const target = event.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    flyoutTop = rect.top;
+    hoveredFlyoutItem = item;
+  }
+
+  function handleItemMouseLeave() {
+    // Delay closing to allow mouse to move to flyout
+    flyoutCloseTimer = setTimeout(() => {
+      hoveredFlyoutItem = null;
+      flyoutCloseTimer = null;
+    }, 150);
+  }
+
+  function handleFlyoutMouseEnter() {
+    // Cancel the close timer when mouse enters flyout
+    if (flyoutCloseTimer) {
+      clearTimeout(flyoutCloseTimer);
+      flyoutCloseTimer = null;
+    }
+  }
+
+  // Focus management for mobile sidebar
+  let mobileCloseButton = $state<HTMLButtonElement | null>(null);
+
+  $effect(() => {
+    if (isMobile && mobileOpen && mobileCloseButton) {
+      // Focus the close button when mobile sidebar opens
+      mobileCloseButton.focus();
+    }
+  });
+
+  // Wrap onNavigate to auto-close sidebar on mobile
+  function handleNavigate(item: NavItem) {
+    onNavigate?.(item);
+    // Auto-close on mobile after navigation
+    if (isMobile && mobileOpen) {
+      onClose?.();
+    }
+  }
+
+  // Swipe-to-dismiss state for mobile
+  let touchStartX = $state(0);
+  let touchCurrentX = $state(0);
+  let isSwiping = $state(false);
+
+  function handleTouchStart(e: TouchEvent) {
+    if (!isMobile || !mobileOpen) return;
+    touchStartX = e.touches[0].clientX;
+    touchCurrentX = touchStartX;
+    isSwiping = true;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!isSwiping) return;
+    touchCurrentX = e.touches[0].clientX;
+  }
+
+  function handleTouchEnd() {
+    if (!isSwiping) return;
+    const swipeDistance = touchStartX - touchCurrentX;
+    // Close if swiped left more than 100px
+    if (swipeDistance > 100) {
+      onClose?.();
+    }
+    isSwiping = false;
+    touchStartX = 0;
+    touchCurrentX = 0;
+  }
+
+  // Calculate swipe transform offset
+  const swipeOffset = $derived(
+    isSwiping && touchCurrentX < touchStartX ? Math.min(0, touchCurrentX - touchStartX) : 0
+  );
+
+  // Navigation element reference for arrow key handling
+  let navElement = $state<HTMLElement | null>(null);
+
+  // Handle arrow key navigation within the sidebar
+  function handleNavKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+
+    // Get all focusable nav items (links and buttons) within the nav
+    if (!navElement) return;
+    const focusable = navElement.querySelectorAll<HTMLElement>(
+      'a[href]:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+
+    const focusableArray = Array.from(focusable);
+    const currentIndex = focusableArray.findIndex((el) => el === document.activeElement);
+
+    // Only handle if focus is within the nav
+    if (currentIndex === -1) return;
+
+    event.preventDefault();
+
+    if (event.key === 'ArrowDown') {
+      const nextIndex = currentIndex < focusableArray.length - 1 ? currentIndex + 1 : 0;
+      focusableArray[nextIndex].focus();
+    } else {
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : focusableArray.length - 1;
+      focusableArray[prevIndex].focus();
+    }
+  }
 </script>
 
 <!-- Mobile Overlay: z-40 positions below sidebar (z-50) but above main content -->
@@ -87,19 +361,25 @@
 <!-- Sidebar: z-50 positions above overlay and content, below modals (z-100+) -->
 <aside
   class={cn(
-    'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-all duration-300',
+    'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-all duration-300 touch-pan-y',
     // Variant-based background and text colors
     isLight ? 'bg-background text-foreground' : 'bg-sidebar text-sidebar-foreground',
     strongBorder ? 'border-r-2 border-black' : 'border-r border-black',
     isMobile ? (mobileOpen ? 'translate-x-0 w-64' : '-translate-x-full w-64') : sidebarWidth,
+    // Disable transition during swipe for smooth following
+    isSwiping && 'transition-none',
     className
   )}
+  style={isSwiping && swipeOffset < 0 ? `transform: translateX(${swipeOffset}px)` : undefined}
   aria-label="Main navigation"
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
 >
   <!-- Logo Section -->
   <div
     class={cn(
-      'flex h-16 items-center border-b border-black px-4',
+      'flex h-16 items-center border-b border-black px-4 overflow-hidden',
       collapsed && !isMobile && 'justify-center'
     )}
   >
@@ -114,90 +394,55 @@
     {/if}
   </div>
 
-  <!-- Navigation -->
-  <nav class="flex-1 overflow-y-auto py-4">
-    {#each navigation as section}
-      <div class="mb-4">
-        {#if section.title && !collapsed}
-          <h2
-            class={cn(
-              'mb-2 px-4 text-xs font-semibold uppercase tracking-wider',
-              isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
-            )}
+  <!-- Search Input -->
+  {#if searchable && (!collapsed || isMobile)}
+    <SidebarSearch
+      value={searchQuery}
+      placeholder={searchPlaceholder}
+      {isLight}
+      onInput={(v) => (searchQuery = v)}
+      onClear={() => (searchQuery = '')}
+    />
+  {/if}
+
+  <!-- Navigation - keydown for arrow key navigation is intentional for a11y -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <nav bind:this={navElement} class="flex-1 overflow-y-auto py-4" onkeydown={handleNavKeydown}>
+    {#each filteredNavigation as section}
+      <SidebarSection
+        {section}
+        {isLight}
+        {collapsed}
+        {isMobile}
+        {icon}
+        {searchQuery}
+        onNavigate={handleNavigate}
+        onItemMouseEnter={handleItemMouseEnter}
+        onItemMouseLeave={handleItemMouseLeave}
+      />
+    {:else}
+      {#if searchQuery.trim()}
+        <div class="px-4 py-8 text-center">
+          <svg
+            class="mx-auto h-8 w-8 text-muted-foreground/50 mb-2"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            {section.title}
-          </h2>
-        {/if}
-
-        <ul class="space-y-1 px-2">
-          {#each section.items as item}
-            <li>
-              <a
-                href={item.href}
-                class={cn(
-                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                  // Light variant styling
-                  isLight &&
-                    !item.active &&
-                    'text-foreground hover:bg-accent hover:text-accent-foreground',
-                  isLight && item.active && 'bg-primary/10 text-primary',
-                  // Dark variant styling
-                  !isLight &&
-                    !item.active &&
-                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                  !isLight && item.active && 'bg-sidebar-primary text-sidebar-primary-foreground',
-                  collapsed && !isMobile && 'justify-center px-2'
-                )}
-                target={item.external ? '_blank' : undefined}
-                rel={item.external ? 'noopener noreferrer' : undefined}
-                aria-current={item.active ? 'page' : undefined}
-                title={collapsed && !isMobile ? item.name : undefined}
-              >
-                {#if icon}
-                  <span class="h-5 w-5 shrink-0">
-                    {@render icon(item)}
-                  </span>
-                {:else if item.icon}
-                  <span class="h-5 w-5 shrink-0 flex items-center justify-center">
-                    <!-- Default icon placeholder - apps should provide icon snippet -->
-                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <circle cx="12" cy="12" r="10" stroke-width="2" />
-                    </svg>
-                  </span>
-                {/if}
-
-                {#if !collapsed || isMobile}
-                  <span class="flex-1 truncate">{item.name}</span>
-
-                  {#if item.badge !== undefined}
-                    <span
-                      class="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground"
-                    >
-                      {item.badge}
-                    </span>
-                  {/if}
-
-                  {#if item.external}
-                    <svg
-                      class="h-4 w-4 opacity-50"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                      />
-                    </svg>
-                  {/if}
-                {/if}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      </div>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <p
+            class={cn('text-sm', isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60')}
+          >
+            No results for "{searchQuery}"
+          </p>
+        </div>
+      {/if}
     {/each}
   </nav>
 
@@ -223,8 +468,10 @@
   <!-- Mobile Close Button -->
   {#if isMobile}
     <button
+      bind:this={mobileCloseButton}
       class={cn(
         'absolute right-2 top-2 rounded-md p-2',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
         isLight
           ? 'hover:bg-accent hover:text-accent-foreground'
           : 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
@@ -242,4 +489,16 @@
       </svg>
     </button>
   {/if}
+
+  <!-- Flyout Menu for Collapsed State -->
+  {#if collapsed && !isMobile && hoveredFlyoutItem}
+    <SidebarFlyout
+      item={hoveredFlyoutItem}
+      top={flyoutTop}
+      {isLight}
+      onNavigate={handleNavigate}
+      onMouseEnter={handleFlyoutMouseEnter}
+      onMouseLeave={handleItemMouseLeave}
+    />
+  {/if}
 </aside>

package/dist/lib/components/layout/Sidebar.svelte.d.ts

@@ -16,6 +16,8 @@ import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
 interface Props {
     /** Navigation sections */
     navigation: NavSection[];
+    /** User roles for filtering navigation items */
+    userRoles?: string[];
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */
@@ -24,6 +26,8 @@ interface Props {
     mobileOpen?: boolean;
     /** Callback when mobile sidebar should close */
     onClose?: () => void;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom logo snippet */
     logo?: Snippet;
     /** Custom icon renderer for nav items */
@@ -40,6 +44,14 @@ interface Props {
     variant?: 'light' | 'dark';
     /** Use stronger/thicker border */
     strongBorder?: boolean;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
     /** Additional classes */
     class?: string;
 }