I’m coming across an interesting problem.
I have a menu…
<!-- Performance Management-->
<v-list-group
prepend-icon="mdi-account-group"
class="nav-item-hover"
group="/performance-management"
v-if="checkPermission(['pm_is_line_manager', 'pm_is_line_managed', 'pm_whole_school_oversight'])"
>
<template v-slot:activator>
<v-icon slot="prependIcon" large color="primary"></v-icon>
<v-list-item-title>Performance</v-list-item-title>
</template>
<router-link tag="v-list-item" link to="/performance-management/whole-school" class="ml-5" v-if="checkPermission('pm_whole_school_oversight')">
<v-list-item-icon>
<v-icon>mdi-domain</v-icon>
</v-list-item-icon>
<v-list-item-title>Whole School</v-list-item-title>
</router-link>
<router-link tag="v-list-item" link to="/performance-management/my-staff" class="ml-5" v-if="checkPermission('pm_is_line_manager')">
<v-list-item-icon>
<v-icon>mdi-account-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>My Staff</v-list-item-title>
</router-link>
</v-list-group>
<!-- Administration-->
<v-list-item class="header-nav-custom mt-4">
<v-list-item-icon>
<v-icon>mdi-cog</v-icon>
</v-list-item-icon>
<v-list-item-title>Administration</v-list-item-title>
</v-list-item>
<!-- User Management-->
<v-list-group
prepend-icon="mdi-account-cog"
class="nav-item-hover"
group="/users"
v-if="checkPermission('users_view')"
>
<template v-slot:activator>
<v-icon slot="prependIcon" large color="primary"></v-icon>
<v-list-item-title>Users</v-list-item-title>
</template>
<router-link tag="v-list-item" link to="/users/add" class="ml-5" v-if="checkPermission('users_add')">
<v-list-item-icon>
<v-icon>mdi-account-plus</v-icon>
</v-list-item-icon>
<v-list-item-title>Add User</v-list-item-title>
</router-link>
<router-link tag="v-list-item" link to="/users" :class="[$route.path.includes('/users/profile') ? 'router-link-exact-active' : 'no-active-class']" class="ml-5" v-if="checkPermission('users_view')">
<v-list-item-icon>
<v-icon>mdi-account-details</v-icon>
</v-list-item-icon>
<v-list-item-title>Manage Users</v-list-item-title>
</router-link>
<router-link tag="v-list-item" link to="/users/permissions" class="ml-5" v-if="checkPermission('users_permissions')">
<v-list-item-icon>
<v-icon>mdi-lock-open-check</v-icon>
</v-list-item-icon>
<v-list-item-title>Bulk Permissions</v-list-item-title>
</router-link>
</v-list-group>
<!-- Performance Management Settings-->
<v-list-group
prepend-icon="mdi-account-wrench"
class="nav-item-hover"
group="/settings/performance-management"
v-if="checkPermission('users_view')"
>
<template v-slot:activator>
<v-icon slot="prependIcon" large color="primary"></v-icon>
<v-list-item-title>Performance</v-list-item-title>
</template>
<router-link tag="v-list-item" link to="/settings/performance-management" class="ml-5" v-if="checkPermission('super_admin')">
<v-list-item-icon>
<v-icon>mdi-file-document-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>Manage Sets</v-list-item-title>
</router-link>
</v-list-group>
<router-link tag="v-list-item" link to="/settings/cycles" class="ml-5 nav-single-item" v-if="checkPermission('super_admin')">
<v-list-item-icon>
<v-icon>mdi-clock-time-four</v-icon>
</v-list-item-icon>
<v-list-item-title>Cycles</v-list-item-title>
</router-link>
</v-list>
The sub menus are remaining open properly for both “/users” and “/performance-management” as shown below:
However, when I click a sub-menu item for “/settings/performance-management” it opens up the sub-menu for “/performance-management” as shown below:
However, strangely, when I refresh the page it displays correctly:
Am I missing something silly here? Logically, in my head at least, this should be working fine?