Currently, I am working on a project using angular and encountering an issue with the navigation bar.
I have attached two screenshots for reference. The first screenshot displays the layout before logging in, and the second one showcases the layout after logging in as the administrator. In the first screenshot, I would like the alignment of "Sign Up" and "Login" to be inline with the left side and in the same row.
In the second screenshot, I want the "Admin Panel" option to also be on the same row as mentioned above.
Screenshot 1: https://i.sstatic.net/FD04D.png
Screenshot 2: https://i.sstatic.net/jc23k.png
Below is the code snippet:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Auction App</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a routerLink='/home'>Home</a></li>
<li ><a routerLink='/myAuctions'>MyAuctions</a></li>
<li><a href="#">MyOffers</a></li>
<li><a href="#">Messages</a></li>
<div *ngIf="checkIfAdminisLoggedIn() === true;">
<li><a routerLink='/board-admin'><span class="glyphicon glyphicon-user"></span> Admin Panel</a></li>
</div>
</ul>
<ul class="nav navbar-nav navbar-right">
<div *ngIf="isLoggedIn === false; else elseBlock">
<li><a routerLink='/register' href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a routerLink='/login'> <span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</div>
<ng-template #elseBlock>
<li><a (click)="onLogout()"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
</ng-template>
</ul>
</div>
</nav>
CSS Styles:
.ul {
list-style-type: none;
margin: 0;
padding: 0;
}