@classic-homes/theme-svelte 1.22.3 → 1.22.4

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

@@ -444,9 +444,12 @@
   <div
     class={cn(
       'group flex w-full items-center rounded-md',
-      isLight && !item.active && 'bg-background hover:bg-accent',
+      // Inside a section panel rows sit on the panel's grey, so no rest fill
+      isLight && !item.active && (nested ? 'bg-transparent' : 'bg-background'),
+      isLight && !item.active && 'hover:bg-accent',
       isLight && item.active && 'bg-primary/10',
-      !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
+      !isLight && !item.active && (nested ? 'bg-transparent' : 'bg-sidebar'),
+      !isLight && !item.active && 'hover:bg-sidebar-accent',
       !isLight && item.active && 'bg-sidebar-primary'
     )}
   >

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

@@ -145,32 +145,39 @@
       {/each}
     </ul>
   {:else if isExpanded}
-    <!-- Collapsible and expanded: animate -->
-    <ul
-      class="space-y-1 px-2 overflow-hidden"
-      id={`sidebar-section-${section.id}`}
+    <!-- Collapsible and expanded: the same inset grey panel as an open submenu
+         (SidebarNavItem), so a section's pages read as inside it. Its items are
+         `nested`: no rest fill over the grey, and their own submenus get the rail -->
+    <div
+      class={cn(
+        'mx-2 overflow-hidden rounded-md p-1',
+        isLight ? 'bg-muted/50' : 'bg-sidebar-accent/30'
+      )}
       transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
     >
-      {#each section.items as item}
-        <li>
-          <SidebarNavItem
-            {item}
-            {isLight}
-            {collapsed}
-            {isMobile}
-            {icon}
-            {searchQuery}
-            {enablePinning}
-            {pinIcon}
-            {isPinnedSection}
-            {onNavigate}
-            onMouseEnter={onItemMouseEnter}
-            onMouseLeave={onItemMouseLeave}
-            {autoCollapse}
-            siblingIds={expandableItemIds}
-          />
-        </li>
-      {/each}
-    </ul>
+      <ul class="space-y-1" id={`sidebar-section-${section.id}`}>
+        {#each section.items as item}
+          <li>
+            <SidebarNavItem
+              {item}
+              {isLight}
+              {collapsed}
+              {isMobile}
+              {icon}
+              {searchQuery}
+              {enablePinning}
+              {pinIcon}
+              {isPinnedSection}
+              {onNavigate}
+              onMouseEnter={onItemMouseEnter}
+              onMouseLeave={onItemMouseLeave}
+              {autoCollapse}
+              siblingIds={expandableItemIds}
+              nested
+            />
+          </li>
+        {/each}
+      </ul>
+    </div>
   {/if}
 </div>

package/package.json

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