I'm currently facing an issue with the navbar in my project. The bootstrap navbar doesn't close automatically after clicking on a link. I have to move my mouse away from the navbar for it to close, which is not ideal. Additionally, I'm working on a project that involves Typescript, a language that I'm still learning and not very experienced with. Any insights or guidance on how to improve this situation would be greatly appreciated!
UPDATE: Included below is the relevant Typescript code snippet:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { NavbarService } from '../services/navbar.service';
import { ResponsiveService } from '../services/responsive.service';
import { Router, Event, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'],
})
export class NavbarComponent implements OnInit {
public isMobile: Boolean;
constructor(
public nav: NavbarService,
private responsive: ResponsiveService
) {}
ngOnInit(): void {
this.onResize();
this.responsive.checkWidth();
window.scrollTo(0,0);
}
onResize() {
this.responsive.getMobileStatus().subscribe((isMobile) => {
this.isMobile = isMobile;
});
}
}
export class AppComponent {
constructor(
router: Router
) {
router.events
.pipe(filter((routerEvent: Event) => routerEvent instanceof NavigationEnd))
.subscribe(() => window.scrollTo(0, 0));
}
}.dropdown-menu::before {
display: block;
content: "";
width: 100%;
height: 10px;
position: absolute;
top: -10px;
left: 0;
}
.navbar {
padding: 1vh 0;
transition: 0.1s all ease-in;
border: none;
text-decoration: none;
text-align: center;
background-color: #c1ae8d;
}
... (CSS code continues)
</script>