Currently, I am in the process of developing a progressive web app using Angular and Bootstrap. One of the main challenges I am facing is implementing a navbar that not only looks great on desktop but also on mobile devices. So far, I am satisfied with my progress. If you want to check it out, feel free to visit Stackblitz.
However, I am now attempting to create a sidebar navigation menu that opens from right to left, pushing the content (Placeholder-Text) to the left as well. This task might involve modifying some Bootstrap classes, which can be tricky. If anyone has any solutions or suggestions for this, I would greatly appreciate it. Currently, when toggling the navbar, the links underneath are revealed.
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand d-none d-md-block" href="javascript:void(0)">
<img alt="logo" src="https://..." width="40px" height="auto">
My Brand
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto mr-md-3">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">Stories</a>
</li>
</ul>
<ul class="navbar-nav mr-auto mr-md-3">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">
<span>
<img class="rounded" src="https://..." alt="user" width="35" height="35">
<span class="d-none d-lg-inline"> Tommy</span>
</span>
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">
<div class="img-container" (click)="notificationsViewed = true">
<img alt="notifications" src="https://..." width="35">
<span [hidden]="notificationsViewed" class="badge badge-danger notifications-count">{{3}}</span>
</div>
</a>
</li>
</ul>
<button class="navbar-toggler" (click)="toggleNavbar()" type="button" [attr.aria-expanded]="!isCollapsed">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]="{ 'show': isCollapsed }">
<ul class="navbar-nav float-right ml-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold"href="javascript:void(0)">Policy</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">Contact</a>
</li>
<li class="nav-item">
<button (click)="logout()" class="btn btn-bd-logout">
Logout
</button>
</li>
</ul>
</div>
</nav>
Typescript
public isCollapsed: boolean = false;
toggleNavbar() {
this.isCollapsed = !this.isCollapsed;
}