@wishbone-media/spark 0.30.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/containers/SparkDefaultContainer.vue

@@ -29,7 +29,7 @@
                 >
                   <a
                     :class="{
-                      'bg-gray-100': item.current,
+                      'bg-gray-100': isCurrentRoute(item),
                       'hover:bg-gray-100': item?.href,
                     }"
                     :href="item?.href"
@@ -38,7 +38,7 @@
                   >
                     <font-awesome-icon
                       :icon="Icons[item.icon]"
-                      :class="[item.current ? 'text-gray-400' : 'text-gray-400']"
+                      :class="[isCurrentRoute(item) ? 'text-gray-400' : 'text-gray-400']"
                       class="size-4"
                       v-if="item.icon"
                     />
@@ -60,7 +60,7 @@
                   <ul v-if="item.children" class="mt-[5px] flex flex-col gap-[5px]">
                     <li v-for="child in item.children" :key="child.name">
                       <a
-                        :class="[child.current ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
+                        :class="[isCurrentRoute(child) ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
                         :href="child.href"
                         class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
                         @click.prevent="mainNavStore.goto(child.href)"
@@ -68,7 +68,7 @@
                         <font-awesome-icon
                           v-if="child.icon"
                           :icon="Icons[child.icon]"
-                          :class="[child.current ? 'text-gray-400' : 'text-gray-400']"
+                          :class="[isCurrentRoute(child) ? 'text-gray-400' : 'text-gray-400']"
                           class="size-4"
                         />
                         <span class="text-[13px]" v-if="!mainNavStore.state.collapsed">
@@ -199,6 +199,20 @@ const emit = defineEmits(['overlayClose'])
 const slots = useSlots()
 const route = useRoute()
 
+// Compute current state directly from route for reliable reactivity
+const isCurrentRoute = (item) => {
+  if (!item.href) return false
+  // Direct match on route name or path
+  if (item.href === route.name || item.href === route.path) {
+    return true
+  }
+  // Child route match: highlight parent when on child (e.g., '/sub-nav' matches '/sub-nav/general')
+  if (route.path.startsWith(item.href + '/')) {
+    return true
+  }
+  return false
+}
+
 const sparkBrandFilterStore = useSparkBrandFilterStore()
 const sparkAppSelectorStore = useSparkAppSelectorStore()