Navbar glitch on sidenav item clicking

Topic: Navbar glitch on sidenav item clicking

Arsenii pro asked 6 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>

Add comment

Arsenii pro answered 6 years ago

0 0 Best answer

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.

Add comment

Arsenii pro answered 6 years ago

0 0 Best answer

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>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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 6 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. 15 characters.

Add comment

Write

Create snippet

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

Arsenii

Pro User 69Support score
16Questions 5Answers 0Snippets