Simple links on side nav should stay active if repeatedly cl


Topic: Simple links on side nav should stay active if repeatedly clicked

gordysc pro asked 6 months ago

It appears the accordion will toggle a class to apply to itself (active vs collapsed) with each click.  This doesn't make sense if the accordion doesn't have any children (like how it's used for a simple link on the sidenav).  If the user clicks the accordion multiple times when it's being used as a simple link it should remain active.

https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/master/pro/accordion/components/sb-item.head.ts#L15


gordysc pro answered 6 months ago

This appears to be a bug in the current code.  No matter which element on the accordion I apply the routerLink & routerLinkActive options, they are not applied to the inner div:


gordysc pro answered 6 months ago

This is the Angular code:

<mdb-accordion-item class='no-collase' routerLink='/' routerLinkActive='active'>

<mdb-accordion-item-headmdbWavesEffect>

<fa-icon[icon]='faHome'[fixedWidth]='true'></fa-icon>Home

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

gordysc pro answered 6 months ago

This is the generated code.. notice the <div class='card active...'> This doesn't get updated by the routerLink & routerLinkActive properties, no matter which accordion element I use:

<mdb-accordion aria-multiselectable="false" ng-reflect-multiple="false">
<div class="accordion md-accordion"
<mdb-accordion-item class="no-collase">
<div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="" routerlink="" routerlinkactive="active" tabindex="0"
ng-reflect-router-link="" ng-reflect-router-link-active="active" class="active waves-effect">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="home" class="svg-inline--fa fa-home fa-w-18 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M557.1 240.7L512 203.8V104c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v60.5L313.4 41.1c-14.7-12.1-36-12.1-50.7 0L18.9 240.7c-3.4 2.8-3.9 7.8-1.1 11.3l20.3 24.8c2.8 3.4 7.8 3.9 11.3 1.1l14.7-12V464c0 8.8 7.2 16 16 16h168c4.4 0 8-3.6 8-8V344h64v128c0 4.4 3.6 8 8 8h168c8.8 0 16-7.2 16-16V265.8l14.7 12c3.4 2.8 8.5 2.3 11.3-1.1l20.3-24.8c2.6-3.4 2.1-8.4-1.3-11.2zM464 432h-96V304c0-4.4-3.6-8-8-8H216c-4.4 0-8 3.6-8 8v128h-96V226.5l170.9-140c2.9-2.4 7.2-2.4 10.1 0l170.9 140V432z">
</path>
</svg>
</fa-icon>
Home
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-0 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
<mdb-accordion-item class="no-collase">
<div class="card is-collapsed" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="sign-out" class="svg-inline--fa fa-sign-out fa-w-16 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M96 64h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-53 0-96-43-96-96V160c0-53 43-96 96-96zm231.1 19.5l-19.6 19.6c-4.8 4.8-4.7 12.5.2 17.1L420.8 230H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h248.8L307.7 391.7c-4.8 4.7-4.9 12.4-.2 17.1l19.6 19.6c4.7 4.7 12.3 4.7 17 0l164.4-164c4.7-4.7 4.7-12.3 0-17l-164.4-164c-4.7-4.6-12.3-4.6-17 .1z">
</path>
</svg>
</fa-icon>
Logout
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-1 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="height: 0px; visibility: hidden;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
</div>
</mdb-accordion>

gordysc pro answered 6 months ago

So basically the ask in this ticket is if the `mdb-accordion-item-head` component has an active class, to apply it to the nested card child element. Or to not mark the card child element as 'is-collapsed' if the parent mdb-accordion-item head component is marked active.  Either approach will solve the issue.


Arkadiusz Idzikowski staff answered 6 months ago

You need to add routerLinkActive to the accordion-item-head instead of accordion-item (if accordion-item-body is empty) or to the 'a' tag (if you have some links inside accordion body).

Please make sure to add css styles as mentioned in the documentation. Those styles will be applied to the h5 element inside accordion-item-head.


gordysc pro answered 6 months ago

If I do the above it still has the same effect.  There are really 2 issues here on the MDB's side:
1) If you click the simple link twice, it'll be activated the first time, but on the 2nd click it'll remove the active class from the inner div.  See this line of code: 
https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/master/pro/accordion/components/sb-item.head.html#L2

It's going to call the toggleClick method on every click....  

2) The routerLink being active is not being applied to the component on a hard refresh of the page.


Arkadiusz Idzikowski staff answered 6 months ago

Could you please send a demo to a.idzikowski@mdbootstrap.com? I tried to recreate these problems on my end, but without success. 

We can block the toggleClick method if accordion body is empty, but it should not affect how routerLinkActive works in this case. As you can see in the css styles we provided in the documentation, background color is applied to the h5 element (child of the accordion head) and not to the parent element with class 'card'.


Please insert min. 20 characters.
Status

Answered

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