Programmatically close sideNav leaves card.active class on s


Topic: Programmatically close sideNav leaves card.active class on simple link clicks

elemech pro premium asked 5 years ago

Hello. I have followed the best answer to this question, but when you click on a simple link, it leaves the card.active class on it until you click it again. How can I fix this?

enter image description here


Konrad Stępień staff commented 5 years ago

Hi @elemech,

Could you send me part of your code?


elemech pro premium commented 5 years ago

@Konrad Stępień hello Konrad. I am using the exact same code from the linked answer in my question.


Konrad Stępień staff commented 5 years ago

@elemech I don't have an issue like yours. Could you test my code?

<!-- SideNav slide-out button -->
<a (click)="sidenav.toggle()" mdbBtn color="primary" class="p-3 button-collapse">
  <mdb-icon fas icon="bars"></mdb-icon>
</a>
<!--/. SideNav slide-out button -->

<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="fixed" [fixed]="true">
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center" alt=""></a>
    </div>
  </li>
  <!--/. Logo -->
  <!--Social-->
  <li>
    <ul class="social">
      <li><a class="icons-sm fb-ic">
        <mdb-icon fab icon="facebook-f"></mdb-icon>
      </a></li>
      <li><a class="icons-sm pin-ic">
        <mdb-icon fab icon="pinterest"></mdb-icon>
      </a></li>
      <li><a class="icons-sm gplus-ic">
        <mdb-icon fab icon="google-plus"></mdb-icon>
      </a></li>
      <li><a class="icons-sm tw-ic">
        <mdb-icon fab icon="twitter"></mdb-icon>
      </a></li>
    </ul>
  </li>
  <!--/Social-->
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form waves-light" mdbWavesEffect>

        <input type="text" class="form-control" placeholder="Search">

      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">

      <mdb-accordion [multiple]="false" aria-multiselectable="false">

        <!-- Collapsible link -->
        <mdb-accordion-item (click)="hideSidenavAfterClick()">
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon fas icon="chevron-right"></mdb-icon>
            Collapsible menu
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase" (click)="hideSidenavAfterClick()">
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon far icon="hand-pointer"></mdb-icon>
            Simple link
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Collapsible link -->
        <mdb-accordion-item (click)="hideSidenavAfterClick()">
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon far icon="eye"></mdb-icon>
            Collapsible menu 2
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase" (click)="hideSidenavAfterClick()">
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon far icon="gem"></mdb-icon>
            Simple link 2
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

      </mdb-accordion>
    </ul>
  </li>
  <!--/. Side navigation links -->
  <div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->

and ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {SidenavComponent} from 'ng-uikit-pro-standard';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('sidenav') sidenav: SidenavComponent;
  hideSidenavAfterClick() {
    if (window.innerWidth <= 768) {
      this.sidenav.hide();
    }
  }

  constructor() {}


  ngOnInit() {

  }
}

gif


elemech pro premium answered 5 years ago

I found the issue. Thank you for your help @Konrad Stępień. Apparently, if you have a simple link without the mdb-accordion-item-body tag (even if empty), this bug will occur. My fixed code:

<mdb-accordion-item class="no-collase">
    <mdb-accordion-item-head mdbWavesEffect routerLink="/about" (click)="closeSideNav()">
        <fa-icon [icon]="faInfo" class="mr-2"></fa-icon> About Us
    </mdb-accordion-item-head>
    <mdb-accordion-item-body></mdb-accordion-item-body>  <!-- YOU NEED THIS -->
</mdb-accordion-item>

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.0.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags