Topic: Navbar glitch on sidenav item clicking

Arsenii pro asked 5 years ago


I use an ordinary double navigation example. The layout is on image attached. The problem is that when I click on sidenav item to change the route, navigation items (manager name, logout button) jump to the left for the moment, then return back on their places. How to fix it? Image: https://ibb.co/h6a7L9
Navigation bar code:
<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" [containerInside]="false">

<mdb-navbar-brand>

<div class="breadcrumbs breadcrumb-dn mr-auto">

<p>Logo</p>

</div>

</mdb-navbar-brand>

<navlinks class="navbar-container">

<div class="float-left">

<a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>

</div>

</navlinks>

<navlinks>

<ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">

<li class="nav-item dropdown btn-group" dropdown>

<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>

Marry Smith (Manager)

</a>

<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">

<a class="dropdown-item" href="#">Switch to performer</a>

<a class="dropdown-item" href="#">Profile</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link waves-light" (click)="logout()" mdbWavesEffect><i class="fa fa-sign-out"></i> <span class="clearfix d-none d-sm-inline-block">Log out</span></a>

</li>

</ul>

</navlinks>

</mdb-navbar>

Arsenii pro answered 5 years ago


The problem was in incorrect @ui-router/angular usage from my side. When I created nested routes and avoided navigation rectreation on every navigation link click, the problem vanished.

Arsenii pro answered 5 years ago


Basic page of the app (seems it was trimmed in my comment):
<app-content-login-guard #loginGuard>

<ng-container *ngIf="loginGuard.loggedIn$ | async">

<app-navigation>

<ng-container [ngSwitch]="url">

     <!-- content depending on url -->

</ng-container>

</app-navigation>

</ng-container>

</app-content-login-guard>

Arkadiusz Idzikowski staff answered 5 years ago


Dear Arsenii, I tried to reproduce this case in my app but with no success. Could you provide an example app on which i could debug this problem? Maybe it is caused by other elements. Regards, Arek

Arsenii pro commented 5 years ago

Unfortunately, it's difficult to provide you full code. I use @angular/ui-router for routing and basically all navigation is created again on every route change (it's the requirement to have possibilitites to have static pages without navigation and not protected with login form). I think the problem originating from here. So I have in app component only router: In every page of my app I have:


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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10 x64
  • Provided sample code: No
  • Provided link: No