Topic: SideNav Active state
Devinec premium asked 4 years ago
Im curious if there is an easy way to have the mdb-side-nav-cat expand (show) on page load if the link inside it is active link (ie the page that your on)
I am trying to achieve this so when user goes to the dashboard of our site it will automatically expand this side Nav Cat to show them they are on that page.
Thanks
Devinec premium answered 4 years ago
Managed to find a way to have the proper category drop down if your on a route that is an item of that category. It may not be the best way but it works for now
I added
computed: {
currentPage () {
return this.$route.path
}
},
then
<mdb-side-nav-cat name="Posts" icon="image" :show="currentPage.includes('post') ? true : false">
<mdb-side-nav-item @click.native="toggle=false" icon="folder-open" slimIcon="folder-open" to="/dashboard/list/post">All posts</mdb-side-nav-item>
<mdb-side-nav-item @click.native="toggle=false" icon="plus-circle" slimIcon="plus-circle" to="/dashboard/add/post">Add New</mdb-side-nav-item>
</mdb-side-nav-cat>
<mdb-side-nav-cat name="Pages" icon="image" :show="currentPage.includes('page') ? true : false">
<mdb-side-nav-item @click.native="toggle=false" icon="folder-open" slimIcon="folder-open" to="/dashboard/list/page">All Pages</mdb-side-nav-item>
<mdb-side-nav-item @click.native="toggle=false" icon="plus-circle" slimIcon="plus-circle" to="/dashboard/add/page">Add New</mdb-side-nav-item>
</mdb-side-nav-cat>
Since I know a common element in each category I just toggle the show based on if it finds it in the path
Devinec premium answered 4 years ago
I have the item set as active. just trying to figure out how to put "show" on the right category when the page is loaded. as they load collapsed by default.
Mikołaj Smoleński staff answered 4 years ago
Hi there,
First of all you need to check which category is active and add show
attribute to open it by default (mdb-side-nav-cat)
Then you have to check which item is active and add active
attribute to it (mdb-side-nav-item)
Also make sure to add an extra css rule for active href, i.e.:
a[active] {
color: red !important;
}
Best regards
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: 6.3.0
- Device: desktop
- Browser: All
- OS: Any
- Provided sample code: No
- Provided link: No