I was assigned this task, the nav has 4 main paths and every one of them except for "discover" has the exact class active when you on that path.
Discover path has the active indeed but not the "exact":
The why it's pretty simple => the link => to"/discover" goes to the route "/discover" which has a redirect to="discover/leaderboard" so I assume that the exact never matches. I did two things, first I deleted the redirection and add the "discover/leaderboard" to both (route and link) => it breaks and I guess it happens because there's children [leaderboard] in dicoverRoutes. the n2 thing I tried was => link :to="{name: componentName}" => the redirection was good but then again, the exact class was not working. Here's the code, it would be really apreciated if can tell me how to articulate correctly to match the exact class. DiscoverRoutes
import DiscoverView from '@/views/DiscoverView.vue'
import DiscoverLeaderboardView from '@/views/Discover/DiscoverLeaderboardView.vue'
import DiscoverClubsView from '@/views/Discover/DiscoverClubsView.vue'
import DiscoverCoachesView from '@/views/Discover/DiscoverCoachesView.vue'
// Components
import LeaderboardPreview from '@/components/Leaderboard/LeaderboardPreview.vue'
export default [
{
path: '/discover',
redirect: '/discover/leaderboard',
component: DiscoverView,
meta: { requiresAuth: true },
children: [
{
path: 'leaderboard',
name: 'leaderboard',
props: { sidebar: false },
components: {
default: DiscoverLeaderboardView,
sidebar: LeaderboardPreview
}
},
{
path: 'tournaments',
name: 'tournaments',
props: { sidebar: false },
components: {
default: () => import('@/views/Discover/DiscoverTournamentsView.vue'),
sidebar: LeaderboardPreview
}
},
{
path: 'clubs',
name: 'clubs',
props: { sidebar: true },
components: {
default: DiscoverClubsView,
sidebar: LeaderboardPreview
}
},
{
path: 'coaches',
name: 'coaches',
props: { sidebar: true },
components: {
default: DiscoverCoachesView,
sidebar: LeaderboardPreview
}
}
]
}
]
Navbar:
<nav class="w-full bg-white shadow-top z-nav">
<!-- Mobile -->
<ul
class="grid grid-flow-col-dense items-center"
:class="{ 'lg:hidden': !rpSettings.setMobileViewport }"
style="grid-template-columns: 1fr 1fr 4rem 1fr 1fr"
>
<button
class="w-16 h-16 grid place-items-center col-start-3 text-white bg-accent shadow rounded-full transform -translate-y-6"
@click="openGameModal()"
>
<Icon use="plus" class="w-6 h-6" />
</button>
<li
v-for="link in links"
:key="link.route"
class="h-full grid place-items-center relative text-secondary hover:text-pink"
>
<router-link
:to="link.route"
v-slot="{ isExactActive }"
class="w-6 h-6"
>
<span
v-if="isExactActive"
class="w-8 absolute top-0 bg-pink rounded-b-lg transform -translate-x-1 z-40"
style="height: 3px"
/>
<Icon
:use="link.icon"
class="w-6 h-6"
:class="{ 'text-pink indicator': isExactActive }"
/>
</router-link>
</li>
</ul>
<!-- Desktop -->
<div
class="h-20 px-5 hidden items-center shadow-sm xl:px-20"
:class="{ 'lg:flex': !rpSettings.setMobileViewport }"
>
<router-link to="/">
<Logo class="w-20 h-11" />
</router-link>
<div class="ml-16 mr-5">
<router-link
to="/"
v-slot="{ isExactActive }"
class="capitalize border-pink hover:text-pink"
:class="
isExactActive
? 'text-primary font-bold border-3'
: 'text-tertiary font-normal border-none'
"
>
{{ t('home') }}
</router-link>
<router-link
to="/discover"
v-slot="{ isExactActive }"
class="ml-8 capitalize border-pink hover:text-pink"
:class="
isExactActive
? 'text-primary font-bold border-3'
: 'text-tertiary font-normal border-none'
"
>
{{ t('discover') }}
</router-link>
</div>
<GlobalSearch class="mx-4 flex-grow" />
<div class="flex gap-3">
<Button
secondary
class="h-10 gap-x-2 capitalize"
@click="openGameModal()"
>
<Icon
use="plus"
class="w-6 h-6 p-1 bg-red text-white rounded-full hover:bg-purple"
/>
<span class="transform translate-y-0.5">{{ t('new') }}</span>
</Button>
<Icon
ref="notificationButton"
id="notificationButton"
button
use="notifications"
class="w-10 h-10 p-2.5 text-secondary bg-white rounded-lg hover:text-pink hover:shadow"
@click="toggleNotificationModal()"
/>
<Modal
hideBackdrop
#default="{ hide }"
class="max-w-lg max-h-112 w-2/5 h-full pb-10 overflow-hidden"
:style="modalPosition"
v-model:show="showNotifications"
>
<header class="pt-3 pb-2 px-5 self-start">
<router-link
to="/notifications"
class="text-primary font-semibold capitalize"
@click="hide()"
>
{{ t('notification.title') }}
</router-link>
</header>
<NotificationList @navigate="hide()" />
</Modal>
<router-link
to="/profile"
class="h-10 p-2 flex items-center gap-x-3 text-secondary bg-white rounded-lg hover:text-pink hover:shadow"
>
<img
v-if="photo"
v-lazy="{ src: imgURL }"
:alt="fullName"
class="w-full h-full object-contain rounded-md"
/>
<Icon v-else use="profile" class="w-6 h-6" />
<span class="text-sm whitespace-nowrap">
{{ fullName }}
</span>
</router-link>
</div>
</div>
</nav>