Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: NavBar does not close on click after navigating programmatically (responsive view)

Mark Bell free asked 5 years ago


My NavBar works fine up to a point. Initially, it closes as expected upon the click of a nav-item routerLink. But when a user logs out of my application, I use the navigateByUrl method to push them to the login page along with the hide() method on the navbar as it doesn't close automatically upon programmatic navigation. After the navigateByUrl method is called, the NavBar changes its behaviour and remains open after a routerLink has been clicked.

I've read through the docs and some of the other support requests and changed all of my routerLinks to the property binding syntax

[routerLink]="['/login']"

But still, the navbar menu remains open until the app is reloaded

As a workaround, I have subscribed to the router events and closed the NavBar upon the Navigation Start event. I'm wondering if there is a better way or of there is something that I'm missing

// Subscribe to the router

this.router.events.subscribe((val) => {
  // Filter the event type
  if (val instanceof NavigationStart) {
    // Hide the navbar
    this.navbar.hide();
    // Debug log
    console.log('NavBar closed');
  }
});

Arkadiusz Idzikowski staff answered 5 years ago


We are currently working on the problems with links added dynamically and they should be resolved in next version.

For now please try to use ViewChild decorator to get access to navbar component methods in your ts file, then create a method that will hide the navbar and add it to (click) event of the logout button.

Here is an example:

<mdb navbar #navbar></mdb-navbar>

@ViewChild('navbar') navbar: NavbarComponent;

hideNavbar() {
  if (this.navbar.shown) {
    this.navbar.hide();
  }
}

Mark Bell free answered 5 years ago


Sorry for the delay Arkadiusz. The links are within the component, yes. I'm showing and hiding different links asynchronously based on state.auth in the OnInit Lifecycle hook.

app.component.html

<links>
<ul class="navbar-nav mr-auto">
  <li class="nav-item active" *ngIf="isLoggedIn$ | async">
    <a [routerLink]="['/home']"
      class="nav-link waves-light"
      mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" *ngIf="isLoggedOut$ | async">
    <a [routerLink]="['/auth/login']"
       class="nav-link waves-light"
       mdbWavesEffect>Login</a>
  </li>
  <li class="nav-item" *ngIf="isLoggedOut$ | async">
    <a [routerLink]="['/auth/register']"
       class="nav-link waves-light"
       mdbWavesEffect>Register</a>
  </li>
  <li class="nav-item" *ngIf="isLoggedIn$ | async">
    <a (click)="logout()"
       class="nav-link waves-light"
       mdbWavesEffect>Logout</a>
  </li>
</ul>
<form class="form-inline waves-light" mdbWavesEffect>
  <div class="md-form my-0">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
  </div>
</form>

There is a closing link tag. This editor strips it out

app.component.ts

ngOnInit(): void {
this.isLoggedIn$ = this.store.pipe(
  select(isLoggedIn)
);

this.isLoggedOut$ = this.store.pipe(
  select(isLoggedOut)
);
// Stop the spinner
this.spinner.stop();

}


Arkadiusz Idzikowski staff answered 5 years ago


We will take a closer look at it to check if there are any problems with the component code.

Does the user log out by clicking on the link that is inside navbar 'links' component? If so, is this logout link generated dynamically after the navbar component has already rendered?



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No