SideNav Active state

web
mobile

Topic: SideNav Active state

Devinec pro premium asked 2 months 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


Mikołaj Smoleński staff answered 2 months 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


Devinec pro premium answered 2 months 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.


Devinec pro premium answered 2 months 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


Mikołaj Smoleński staff answered 2 months ago

Thanks for sharing your code!

Best regards


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Vue
  • MDB Version: 6.3.0
  • Device: desktop
  • Browser: All
  • OS: Any
  • Provided sample code: No
  • Provided link: No