SideNav Active state


Topic: SideNav Active state

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


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


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


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


Mikołaj Smoleński staff answered 2 years ago

Thanks for sharing your code!

Best regards


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

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