sidenav links remain active


Topic: sidenav links remain active

4ntibala pro asked 6 years ago

hi,

when i click a link in the sidebar the .active class gets set correctly.
but when routing to another page (which is not accesible through the sidenav) the sidebar link wich was clicked before will remain with a background color. please have a look at the pictures.

pictures

sidenav code:

<li>
<ul class="collapsible collapsible-accordion ">
<mdb-accordion [multiple]="false" aria-multiselectable="false">

<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head routerLink="/cases" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect><i
class="fa fa-database"></i> Database</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>

<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head routerLink="/createcase" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect><i
class="fa fa-pencil"></i> Create Case</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>

<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head [routerLink]="['/viewer']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect><i
class="fa fa-eye"></i> DICOM Viewer</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>

</mdb-accordion>
</ul>
</li>

 

i implemented the additional SCSS as written in the docs and i am able to change the color, but the unwanted behavior remains.

any idea on how to 'deselect' the last active sidenav link when leaving the route? thanks!


Arkadiusz Idzikowski staff answered 6 years ago

It looks like it is a problem with routerLinkActive directive and not our component. This directive should automatically apply and remove 'active' class, depending on the currently active route. From what I found, using 'exact: true' option should help.

If it's possible please send a demo to a.idzikowski@mdbootstrap.com, so I can debug this problem.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Mint 18.2
  • Provided sample code: Yes
  • Provided link: Yes