fix

resources/js/@layouts/components/VerticalNavLink.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { layoutConfig } from '@layouts'
-import { can } from '@layouts/plugins/casl'
-import { useLayoutConfigStore } from '@layouts/stores/config'
+import { layoutConfig } from '@layouts';
+import { can } from '@layouts/plugins/casl';
+import { useLayoutConfigStore } from '@layouts/stores/config';
 import {
-  getComputedNavLinkToProp,
-  getDynamicI18nProps,
-  isNavLinkActive,
-} from '@layouts/utils'
+getComputedNavLinkToProp,
+getDynamicI18nProps,
+isNavLinkActive,
+} from '@layouts/utils';
 
 const props = defineProps({
   item: {
@@ -22,13 +22,14 @@ const hideTitleAndBadge = configStore.isVerticalNavMini()
 <template>
   <li
     v-if="can(item.action, item.subject)"
-    class="nav-link"
+    class="nav-link 22"
     :class="{ disabled: item.disable }"
   >
     <Component
       :is="item.to ? 'RouterLink' : 'a'"
       v-bind="getComputedNavLinkToProp(item)"
       :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
+      
     >
       <Component
         :is="layoutConfig.app.iconRenderer || 'div'"

resources/js/@layouts/utils.js

@@ -46,18 +46,46 @@ export const resolveNavLinkRouteName = (link, router) => {
  */
 export const isNavLinkActive = (link, router) => {
   // Matched routes array of current route
-  const matchedRoutes = router.currentRoute.value.matched
+  const matchedRoutes = router.currentRoute.value.matched;
+  const currentRoute = router.currentRoute.value;
+
+  // Check if the parent menu item should be active
+   
+  if (isParentActive(currentRoute,router,link)) {
+    return true;
+  }
 
   // Check if provided route matches route's matched route
-  const resolveRoutedName = resolveNavLinkRouteName(link, router)
-  if (!resolveRoutedName)
-    return false
-  
-  return matchedRoutes.some(route => {
-    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
-  })
-}
+  const resolveRoutedName = resolveNavLinkRouteName(link, router);
+  if (!resolveRoutedName) {
+    return false;
+  }
 
+  return matchedRoutes.some(route => {
+    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName;
+  });
+};
+const ParentMenuItemName = 'admin-patients';
+
+export const isParentActive = (route, router,link) => {
+  // Get the current route's activeParent meta property
+  const activeParent = route.meta.activeParent;
+
+  // Check if the activeParent is defined and not an empty string
+  if (activeParent && activeParent.trim().length > 0) {
+    // Find the parent route configuration
+    const parentRoute = router.options.routes.find(r => r.name === activeParent);
+console.log('fffff', link.to)
+    // Check if the parent route configuration exists
+    if (link.to) {
+      // Use the parent route's name or any other property as the parent menu item name
+      return link.to === activeParent;
+    }
+  }
+
+  // If the activeParent is not defined, an empty string, or the parent route configuration is not found, return false
+  return false;
+};
 /**
  * Check if nav group is active
  * @param {Array} children Group children

resources/js/plugins/1.router/additional-routes.js

@@ -132,11 +132,18 @@ export const routes = [
     path: '/admin/patients/patient-profile/:id',
     name: 'admin-patient-profile',
      component: () => import('@/pages/patients/patient-profile.vue'),
+    meta: {
+     activeParent: 'admin-patients'
+    }
+     
   },
    {
     path: '/admin/provider/provider-profile/:id',
     name: 'admin-provider-profile',
      component: () => import('@/pages/providers/provider-profile.vue'),
+    meta: {
+     activeParent: 'admin-providers'
+    }
   },
   {
     path: '/admin/providers/patientprofile/:id',