Why NavBar appear and disappear in concrete range? - html

Question

I wrote navbar which works fine, but one strange behavior I can't understand. Why when I'm changing the width in point 631px menu appear, after 600px it disappear?? and it works in vice versa. Why it happened?? I can't find any position in media where is used this range or value which could have an influence on this behavior.
My HTML code doesn't have any special logic. I display here part of code which I changed for myself. Without 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 style
.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;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
}
::ng-deep .mat-toolbar.mat-primary{
width: 100% !important;
padding: 0px 0px 0px 15px ;
}
::ng-deep .mat-list-item-content {
width: 100% !important;
padding: 0px !important;
}
::ng-deep .mat-list-item-content a {
width: 100% !important;
padding: 0px 15px;
}
#media (max-width: 599px) {}
.mat-toolbar-row, .mat-toolbar-single-row {
height: 64px;
}
.title-description {
margin-left: 4px;
}
#button-icon-menu {
margin-left: 10px;
}
and ts 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;
}
}
}

Answer 1

1st thing I noticed in your code:
[ngClass] = "{hidden: (isHandset$ | async)!.matches}"
Why are you accessing matches property if you already map in your code to the boolean variable?
2nd The Breakpoints.Handset you are effectively saying the following:
The breakpoint you are adding is returning true, for all widths above 600px. Check the angular code for this:
Handset: '(max-width: 599.99px) and (orientation: portrait),
/**
* #license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// PascalCase is being used as Breakpoints is used like an enum.
// tslint:disable-next-line:variable-name
export const Breakpoints = {
XSmall: '(max-width: 599.99px)',
Small: '(min-width: 600px) and (max-width: 959.99px)',
Medium: '(min-width: 960px) and (max-width: 1279.99px)',
Large: '(min-width: 1280px) and (max-width: 1919.99px)',
XLarge: '(min-width: 1920px)',
Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
'(max-width: 959.99px) and (orientation: landscape)',
Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
'(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
Web: '(min-width: 840px) and (orientation: portrait), ' +
'(min-width: 1280px) and (orientation: landscape)',
That is why your ng class hidden matches this case.