@classic-homes/theme-svelte 0.1.13 → 0.1.14

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

@@ -149,7 +149,8 @@
 
   // Variant-based styling
   const isLight = $derived(variant === 'light');
-  const sidebarWidth = $derived(collapsed ? 'w-16' : 'w-64');
+  // Use the actual width props instead of hardcoded Tailwind classes
+  const currentWidth = $derived(collapsed ? collapsedWidth : expandedWidth);
 
   // Track previous search to avoid redundant updates
   let prevSearchQuery = '';
@@ -365,12 +366,22 @@
     // 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,
+    isMobile && !mobileOpen && '-translate-x-full',
     // Disable transition during swipe for smooth following
     isSwiping && 'transition-none',
     className
   )}
-  style={isSwiping && swipeOffset < 0 ? `transform: translateX(${swipeOffset}px)` : undefined}
+  style={(() => {
+    const styles: string[] = [];
+    // Apply width - use expandedWidth for mobile, respect collapsed state for desktop
+    const width = isMobile ? expandedWidth : currentWidth;
+    styles.push(`width: ${width}px`);
+    // Apply swipe transform if swiping
+    if (isSwiping && swipeOffset < 0) {
+      styles.push(`transform: translateX(${swipeOffset}px)`);
+    }
+    return styles.join('; ');
+  })()}
   aria-label="Main navigation"
   ontouchstart={handleTouchStart}
   ontouchmove={handleTouchMove}
@@ -495,6 +506,7 @@
     <SidebarFlyout
       item={hoveredFlyoutItem}
       top={flyoutTop}
+      left={collapsedWidth}
       {isLight}
       onNavigate={handleNavigate}
       onMouseEnter={handleFlyoutMouseEnter}

package/dist/lib/components/layout/sidebar/SidebarFlyout.svelte

@@ -13,6 +13,8 @@
     item: NavItem;
     /** Top position in pixels */
     top: number;
+    /** Left position in pixels (sidebar width) */
+    left?: number;
     /** Whether using light variant */
     isLight?: boolean;
     /** Callback when a navigation item is clicked */
@@ -23,7 +25,15 @@
     onMouseLeave?: () => void;
   }
 
-  let { item, top, isLight = true, onNavigate, onMouseEnter, onMouseLeave }: Props = $props();
+  let {
+    item,
+    top,
+    left = 64,
+    isLight = true,
+    onNavigate,
+    onMouseEnter,
+    onMouseLeave,
+  }: Props = $props();
 
   let flyoutElement = $state<HTMLElement | null>(null);
 
@@ -99,11 +109,11 @@
 <div
   bind:this={flyoutElement}
   class={cn(
-    'fixed left-16 min-w-48 rounded-md border shadow-lg z-[calc(var(--z-sidebar,50)+10)]',
+    'fixed min-w-48 rounded-md border shadow-lg z-[calc(var(--z-sidebar,50)+10)]',
     'motion-reduce:transition-none',
     isLight ? 'bg-background border-border' : 'bg-sidebar border-sidebar-foreground/20'
   )}
-  style="top: {top}px;"
+  style="top: {top}px; left: {left}px;"
   role="menu"
   tabindex="0"
   onmouseenter={onMouseEnter}
@@ -112,20 +122,28 @@
   transition:fly={{ x: -10, duration: 150 }}
 >
   <div class="p-2">
-    <!-- Item name as header -->
+    <!-- Item name as header - always clickable unless disabled -->
     <div
       class={cn(
         'px-3 py-2 text-sm font-medium',
         isLight ? 'text-foreground' : 'text-sidebar-foreground'
       )}
     >
-      {#if item.href && !item.disabled}
+      {#if item.disabled}
+        <span class="opacity-50 cursor-not-allowed">
+          {item.name}
+        </span>
+      {:else if item.href}
         <a
           href={item.href}
-          class="hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 rounded"
+          class={cn(
+            'hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 rounded',
+            'cursor-pointer'
+          )}
           target={item.external ? '_blank' : undefined}
           rel={item.external ? 'noopener noreferrer' : undefined}
           onclick={() => onNavigate?.(item)}
+          role="menuitem"
         >
           {item.name}
           {#if item.external}
@@ -133,9 +151,17 @@
           {/if}
         </a>
       {:else}
-        <span class={item.disabled ? 'opacity-50' : ''}>
+        <button
+          type="button"
+          class={cn(
+            'hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 rounded',
+            'cursor-pointer text-left bg-transparent border-none p-0 font-medium text-inherit'
+          )}
+          onclick={() => onNavigate?.(item)}
+          role="menuitem"
+        >
           {item.name}
-        </span>
+        </button>
       {/if}
     </div>
 

package/dist/lib/components/layout/sidebar/SidebarFlyout.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     item: NavItem;
     /** Top position in pixels */
     top: number;
+    /** Left position in pixels (sidebar width) */
+    left?: number;
     /** Whether using light variant */
     isLight?: boolean;
     /** Callback when a navigation item is clicked */

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -342,7 +342,7 @@
       {/if}
     </a>
   {:else}
-    <!-- Item without href (parent with children only, or placeholder) - render as button -->
+    <!-- Item without href (parent with children only, or action button) - render as button -->
     <button
       type="button"
       class={cn(
@@ -355,6 +355,7 @@
       aria-haspopup={hasChildren ? 'menu' : undefined}
       aria-disabled={item.disabled || undefined}
       disabled={item.disabled}
+      onclick={handleClick}
       onmouseenter={handleMouseEnter}
       onmouseleave={onMouseLeave}
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",