'Angular Material - Apply or Update @media queries when Sidenav is open

Im working inside an Angular 13 app using Angular Material. I have two sidenavs, one on the left for my site navigation, and one on the left for a Help Menu.

The help menu sidenav is set to a min-width of 400px, and by default opens in "over" mode with a backdrop. I added a button to allow users to toggle the help menu to be "side" mode with no backdrop so they can interact with and scroll through their current page and the help menu if they wish.

In my styles.scss file I have a group of @media queries that change the left and right padding on the screen like so:

  @media screen and (min-width: 100px) {
    margin-left: 10px;
    margin-right: 10px;
  }
  @media screen and (min-width: 576px) {
    margin-left: 20px;
    margin-right: 20px;
  }
  @media screen and (min-width: 1200px) {
    margin-left: 50px;
    margin-right: 50px;
  }

I also have flex-layout in places to hide/show content at various screen sizes.

The issue i'm facing, is that when the user toggles the help menu to "side" mode, the page contents slide to the left, but, it does not trigger my media queries or flex-layout so content does not adjust accordingly.

For example, If a users screen is larger than 1200px and they toggle the help menu to be in "side" mode, I need some way to make everything inside the to update as if their screen was resized to be 400px smaller.

Does anyone understand what im trying to accomplish and have any suggestions?

cssangularangular-materialangular-flex-layout


Solution 1:[1]

I am not sure if I follow this correctly, a simple re-production of the problem would be helpful. But say user window goes to 1200px width or greater you want to make everything in "sideMenu" smaller and only if "sideMode" is active?

It is possible to use this with mediaQuery if you add my example css classes to the mediaQuery but problem then becomes with the *ngIf condition. We can't apply mediaQuery conditionally to certain elements. Well maybe someone can but I can't - so I used simpler form of Window innerWidth to determine user window with and apply class with NgClass. This also gives me possibility to add in the sidemenuMode condition.

<div #sideMenu class="sideMenu menuBackground"
  [ngClass]="{ theSmallestBox: innerWidth >= 1200 && sideMenuMode,  smallBox: innerWidth >= 570 && sideMenuMode}">
  I am sidemenu
  <br />
  Current window width: {{ innerWidth }}
  <br />
  Current sidemenu width: {{ sideMenu.offsetWidth }}
    <br />
    <br />
    <button (click)="onToggleMode()">toggle sideMenuMode</button>
    <br />
    Mode: {{sideMenuMode}}
</div>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  sideMenuMode: boolean = true;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;
  }

  innerWidth: any;

  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

  onToggleMode() {
    this.sideMenuMode = !this.sideMenuMode;
  }
}

@media screen and (min-width: 100px) {
  .sideMenu {
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media screen and (min-width: 576px) {
  .sideMenu {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .sideMenu {
    margin-left: 50px;
    margin-right: 50px;
  }
}

.menuBackground {
  width: 200px;
  height: 500px;
  background: #333;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.smallBox {
  width: 150px !important;
  font-size: 10px !important;
}


.theSmallestBox {
  width: 100px !important;
  font-size: 8px !important;
}

Working example: https://stackblitz.com/edit/angular-check-mediaquery-6cax9d?file=src%2Fapp%2Fapp.component.ts

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions