active state duplication

[rizahoemae]

hello, i have a question. The top link is directed to /, but when the /profile is active, for example, the link above is also active. how to solve this? thanks.

[edited] in case if question is not clear, i add some ways i use your sidebar in my project:

<sidebar-menu
      v-if="isMember"
      :menu="hrefMember"
      width="288px"
      :collapsed="true"
      width-collapsed="64px"
      :disable-hover="true"
    >
      <template #header
        ><div
          class="flex relative items-center rounded-lg p-2 font-normal dark:text-white dark:hover:bg-gray-700"
        >
          <img
            src="@/assets/logo-app.png"
            class="px-4"
          /></div
      ></template>
    </sidebar-menu>

hrefMember: [
        {
         ..
          href: { name: 'dashboard' },
        },
        {
         ..
          href: { name: 'profile' },
        },
      ],

route.name = dashboard print route path / route.name = profile print route path /profile

[yaminncco]

Can you provide a minimal reproduction or show me the routes config?

[rizahoemae]

sure, here is routes config

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: LayoutHome,
      children: [
        {
          path: '',
          name: 'dashboard',
          component: Dashboard,
        },
        ....
        {
          path: 'profile',
          name: 'profile',
          component: Profile,
        },
      ],
    },
  ],
})

as you can see above, the dashboard and profile are in the same state, under their parent (/)

[yaminncco]

Use exact

{
  ..
  href: { name: 'dashboard' },
  exact: true,
},

[rizahoemae]

woah it works! thankyou for your help!!