Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it work in this contradictory manner? There doesn't seem to be any relevant media query or value impacting this peculiar behavior.
My HTML code lacks any intricate logic. Below is an excerpt of the modified code without the toolbar.
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
disableClose="false"
fixedInViewport="non-fixed"
[ngClass] = "{hidden: (isHandset$ | async)!.matches}"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="isLargeScreen() ? 'side' : 'over'"
[opened]="!(isHandset$ | async)">
CSS Styles:
.sidenav-container {
height: 100vh;
background: rgb(224,234,252);
background: linear-gradient(118deg, rgba(224,234,252,1) 0%, rgba(255,255,255,1) 100%);
}
.sidenav {
width: 200px;
box-shadow: 3px 0 6px rgba(0, 0, 0, 0.24);
}
.hidden {
display: none;
}
/* More CSS styles here */
Typescript File:
export class NavBarComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(
private breakpointObserver: BreakpointObserver,
) {}
isLargeScreen() {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (width > 720) {
return true;
} else {
return false;
}
}
}