chore: Fix sidebar activeOn issue

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -225,10 +225,6 @@ const menuItems = computed(() => {
           name: 'Contacts',
           label: t('SIDEBAR.CONTACTS'),
           icon: 'i-lucide-contact',
-          activeOn: [
-            'contacts_dashboard_index',
-            'contacts_dashboard_edit_index',
-          ],
           children: [
             {
               name: 'All Contacts',
@@ -243,7 +239,6 @@ const menuItems = computed(() => {
               name: 'Segments',
               icon: 'i-lucide-group',
               label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
-
               children: contactCustomViews.value.map(view => ({
                 name: `${view.name}-${view.id}`,
                 label: view.name,
@@ -260,10 +255,6 @@ const menuItems = computed(() => {
               name: 'Tagged With',
               icon: 'i-lucide-tag',
               label: t('SIDEBAR.TAGGED_WITH'),
-              activeOn: [
-                'contacts_dashboard_labels_index',
-                'contacts_dashboard_labels_edit_index',
-              ],
               children: labels.value.map(label => ({
                 name: `${label.title}-${label.id}`,
                 label: label.title,
@@ -397,18 +388,6 @@ const menuItems = computed(() => {
           }),
         },
       ],
-      activeOn: [
-        'portals_new',
-        'portals_index',
-        'portals_articles_index',
-        'portals_articles_new',
-        'portals_articles_edit',
-        'portals_categories_index',
-        'portals_categories_articles_index',
-        'portals_categories_articles_edit',
-        'portals_locales_index',
-        'portals_settings_index',
-      ],
     },
     {
       name: 'Settings',

app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue

@@ -66,14 +66,35 @@ const activeChild = computed(() => {
   );
   if (pathSame) return pathSame;
 
-  const pathSatrtsWith = navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
-  if (pathSatrtsWith) return pathSatrtsWith;
-
-  return navigableChildren.value.find(child =>
+  // Rank the activeOn Prop higher than the path match
+  // There will be cases where the path name is the same but the params are different
+  // So we need to rank them based on the params
+  // For example, contacts segment list in the sidebar effectively has the same name
+  // But the params are different
+  const activeOnPages = navigableChildren.value.filter(child =>
     child.activeOn?.includes(route.name)
   );
+
+  if (activeOnPages.length > 0) {
+    const rankedPage = activeOnPages.find(child => {
+      return Object.keys(child.to.params)
+        .map(key => {
+          return String(child.to.params[key]) === String(route.params[key]);
+        })
+        .every(match => match);
+    });
+
+    // If there is no ranked page, return the first activeOn page anyway
+    // Since this takes higher precedence over the path match
+    // This is not perfect, ideally we should rank each route based on all the techniques
+    // and then return the highest ranked one
+    // But this is good enough for now
+    return rankedPage ?? activeOnPages[0];
+  }
+
+  return navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
 });
 
 const hasActiveChild = computed(() => {
@@ -101,7 +122,7 @@ const toggleTrigger = () => {
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
-    class="text-sm cursor-pointer select-none gap-1 grid"
+    class="grid gap-1 text-sm cursor-pointer select-none"
   >
     <SidebarGroupHeader
       :icon
@@ -117,7 +138,7 @@ const toggleTrigger = () => {
     <ul
       v-if="hasChildren"
       v-show="isExpanded || hasActiveChild"
-      class="list-none m-0 grid sidebar-group-children"
+      class="grid m-0 list-none sidebar-group-children"
     >
       <template v-for="child in children" :key="child.name">
         <SidebarSubGroup

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -166,6 +166,8 @@ watch(activeSegment, () => {
 onMounted(async () => {
   if (!activeSegmentId.value) {
     await fetchContacts();
+  } else if (activeSegment.value && activeSegmentId.value) {
+    fetchSavedFilteredContact(activeSegment.value.query);
   }
 });
 </script>