I have a sidebar that contains multiple sidebar items like the following:
<side-bar>
<template slot="links">
<sidebar-item :link="{name: 'Home', icon: 'ni ni-shop text-primary', path: '/dashboard'}" />
<sidebar-item :link="{name: 'Videos', icon: 'ni ni-tv-2 text-primary', path: '/videos'}"/>
<sidebar-item :link="{name: 'Category', icon: 'ni ni-single-copy-04 text-primary', path: '/category'}"/>
<sidebar-item :link="{name: 'Comments', icon: 'ni ni-ambulance text-primary', path: '/comments'}"/>
<sidebar-item :link="{name: 'Artist', icon: 'ni ni-palette text-primary', path: '/artists'}"/>
<sidebar-item :link="{name: 'Users', icon: 'ni ni-circle-08 text-primary', path: '/users'}"/>
<sidebar-item :link="{name: 'Transactions', icon: 'ni ni-credit-card text-primary', path: '/transactions'}"/>
</template>
</side-bar>
The sidebar items have router links like this:
<li class="nav-item bg-white">
<router-link
:to="link.path"
@click.native="linkClick"
class="nav-link"
:target="link.target"
:href="link.path"
>
<template>
<i :class="link.icon"></i>
<span class="nav-link-text">{{ link.name }}</span>
</template>
</router-link>
The router config has linkExactActiveClass: 'active',
What can I do to style the active sidebar item in this scenario?