I'm currently developing an Angular application and utilizing a Bootstrap 4 navbar without jQuery or any third-party plugins.
HTML:
<nav class="navbar navbar-expand-md bg-theme">
<div class="container-fluid">
<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" (click)="toggleNavigation()" data-target="#collapsibleNavbar">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav text-light">
<li class="nav-item">
<a routerLink="/dashboard" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a routerLink="/template" href="#">Template</a>
</li>
<li class="nav-item">
<a routerLink="/product" href="#">Product</a>
</li>
</ul>
</div>
</div>
<!-- I've duplicated the above navbar-nav for responsiveness. Do we really need this, or can we achieve the same with the existing code? -->
<div *ngIf="showResponsivenavbar">
<ul class="navbar-nav text-light bg-custom-light p-3">
<li class="nav-item pb-2">
<a routerLink="/dashboard" href="#">Dashboard</a>
</li>
<li class="nav-item pb-2">
<a routerLink="/template" href="#">Template</a>
</li>
<li class="nav-item pb-2">
<a routerLink="/product" href="#">Product</a>
</li>
</ul>
</div>
</nav>
CSS:
.bg-custom-light a {
color: #fff!important;
}
.bg-custom-light {
background-color: #e51631;
}
.navbar-nav {
position:fixed;
top:7%;
left:0;
width:150px;
-moz-transition:all 200ms ease-in;
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in;
transition:all 200ms ease-in;
}
I want the navbar to toggle on small screens when clicking the icon bars, showing the navbar below the bars. However, I'd like to add a sliding animation effect where it slides in from the left. Despite adding the necessary CSS transitions, the animation isn't working as expected. Any suggestions on how to achieve this slide-in effect upon clicking the toggle icon bar would be greatly appreciated.
You can view a working demo here