nicklabs-ui 1.0.43 → 1.0.44

package/README.md

@@ -1786,7 +1786,7 @@ onUnmounted(() => clearSuffix())
 
 ### useSidebarManager
 
-Manage sidebar open/close state and expandable menu groups, persisted to localStorage.
+Manage sidebar open/close state, expandable menu groups (persisted to localStorage), and active state logic.
 
 ```typescript
 import { useSidebarManager } from 'nicklabs-ui'
@@ -1796,6 +1796,8 @@ const {
   toggleMenu,
   isSidebarExpanded,
   toggleSidebar,
+  setMenuActiveResolver,
+  setItemActiveResolver,
 } = useSidebarManager(sidebarId?)
 ```
 
@@ -1813,6 +1815,26 @@ const {
 | `toggleMenu` | `(menuTitle: string) => void` | Toggle a menu group |
 | `isSidebarExpanded` | `() => boolean` | Check if sidebar is open |
 | `toggleSidebar` | `() => void` | Toggle sidebar open/close |
+| `setMenuActiveResolver` | `(fn: (menu: Menu, currentPath: string) => boolean) => void` | Override the active logic for a top-level menu group |
+| `setItemActiveResolver` | `(fn: (childMenu: MenuChild, currentPath: string) => boolean) => void` | Override the active logic for individual menu items |
+
+**Custom active state**
+
+By default, `NSidebar` marks a menu item active when its `route` exactly matches `currentPath`. Use the resolver setters to provide custom logic — for example, prefix matching for nested routes:
+
+```typescript
+import { useSidebarManager } from 'nicklabs-ui'
+import type { MenuChild } from 'nicklabs-ui'
+
+const { setItemActiveResolver } = useSidebarManager()
+
+// Highlight the item whenever the current path starts with its route
+setItemActiveResolver((childMenu: MenuChild, currentPath: string) => {
+  return currentPath.startsWith(childMenu.route)
+})
+```
+
+Call the setters once at app initialisation (e.g. `main.ts` or `App.vue`) — the setting is global and persists for the lifetime of the page.
 
 ---