I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu.
I have tried a few solutions, but have not been successful in achieving the desired outcome. I am seeking guidance on how to make this transition smoothly!
Below are my HTML, TS, and CSS files for reference:
HTML:
<nav class="navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
<ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
<div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
<a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
</div>
</li>
</ul>
</nav>
TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-top-menu',
templateUrl: './top-menu.component.html',
styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {
menus: any = [
{
heading: "MENU1",
options:
[
{name: "GOOGLE", link: "https://google.com/", order: 1},
{name: "GitHub", link: "https://github.com", order: 2},
]
}
];
isDropdownOpen: boolean = false;
constructor() { }
ngOnInit(): void {
}
}
CSS:
.navbar{
padding:0px;
}
.nav-border {
border-bottom: 1px solid #ccc;
}
li { cursor: pointer; }
li:hover{
background-color: black;
}
a {
color: black;
}
.navbar-nav {
padding: .9rem 0 0;
}
.nav-link:hover {color: white;}
.widthd{
width: 100%;
}
Screen Preview: https://i.sstatic.net/PI9IS.png