Сворачиваемое меню с боковой навигацией по экрану не работает

Я делаю приложение Angular 9 и хочу добавить в свой проект боковую навигацию.

Sidenav, который мне нужен, в точности похож на этот шаблон Primer Angular -> Primer - Angular 8+ Material

Это то что я хочу

введите описание изображения здесь

И это то, что я получил с моими scss и html. Проблема в том, что при свертывании боковой панели контент не пересчитывается, а затем нарушается стиль. Для этого я ищу ответ с mat-sidenav-container и mat-sidenav

введите описание изображения здесь

HTML

<mat-sidenav-container  class="app example-sidenav-container" autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true" [ngStyle]="{ 'width': !collapsedSidebar ? '250px':'70px' }">
    <button mat-icon-button (click)="collapsedSidebar = !collapsedSidebar">
      <mat-icon>menu</mat-icon>
   </button>
  </mat-sidenav>

  <div fxFlex  class="example-sidenav-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

SCSS

.app { height: 100vh; }
.example-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.example-sidenav-container { flex: 1; }
.example-sidenav{
  -webkit-transition: width .4s;
  transition: width .4s;
}
.mat-drawer{ background:White; }
.example-sidenav-content {
  display: flex;
  height: 100%;
  background-color: #e8ded7;
  opacity: 0.9;
}
.example-fill-remaining-space { flex: 1 1 auto; }

Пожалуйста помоги

ОБНОВЛЕНИЕ Вот пример Stackblitz -> https://stackblitz.com/edit/angular-xa3n5i


angular sass angular-material mat-sidenav
person Sergio Mendez    schedule 25.04.2020    source источник
comment
Можете ли вы добавить пример stackblits   -  person Aymen TAGHLISSIA    schedule 25.04.2020
comment
@AymenTAGHLISSIA Я только что добавил пример stackblitz stackblitz.com/edit/angular-xa3n5i   -  person Sergio Mendez    schedule 25.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

Раньше я решал аналогичную проблему в одном из своих приложений. Я использовал ngClass и логическое значение, управляющее как свойством mat-sidenav width, так и свойством mat-sidenav-content margin-left. Вот stackblitz, я вырезал соответствующую часть из этого приложения.

https://stackblitz.com/edit/angular-mff93r

person CeritT    schedule 02.05.2020
comment
Большое спасибо, это именно то, что я искал - person Sergio Mendez; 03.05.2020

arrow_upward
0
arrow_downward

Я предлагаю, чтобы панель со значками располагалась за пределами боковой навигации, но с элементами меню и соответствующим значком выровнена.

Затем вы можете использовать встроенные функции для переключения видимости боковой навигации.

<div class="app">
    <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
   </button>
    <div style="display: grid; grid-template-columns: 48px auto;height: 100%;">
        <div class="icons">
            <div class="icon">Icon</div>
            <div class="icon">Icon</div>
        </div>
        <mat-sidenav-container autosize>
            <mat-sidenav #sidenav mode="side" opened="true">
                <div class="item">Item 1 text</div>
                <div class="item">Item 2 text</div>
            </mat-sidenav>

            <div fxFlex class="example-sidenav-content">
                a verss
            </div>
        </mat-sidenav-container>
    </div>
<div>

См. Пример stackblitz: https://angular-cymk69.stackblitz.io

person jornare    schedule 27.04.2020
comment
Спасибо, это было бы эффективное решение, к сожалению, оно не адаптируется, когда экран маленький, а также у меня есть меню с модулями и подмодулями в режиме аккордеона, которые будут затронуты, если значки будут в отдельном div - person Sergio Mendez; 27.04.2020
comment
Я понимаю вашу точку зрения, хотя это можно решить с помощью директив для выравнивания значков по их элементу. - person jornare; 27.04.2020

arrow_upward
0
arrow_downward

Ваш app-component.html

<mat-sidenav-container class="app-container">

  <mat-sidenav #sidenav             
              [mode]="mode"
              [opened]="opened">

    <button (click)="toggleSideNav()">toggle</button>

  </mat-sidenav>

  <router-outlet class="container"></router-outlet>

</mat-sidenav-container>

Ваш app-component.scss

.app-sidenav {
  width: 100vw;
  height: 100vh;
}

Ваш app-component.ts

import {Component, OnInit} from '@angular/core';
import {MediaChange, MediaObserver} from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  mode: string;
  opened = true;

  constructor(private mediaObserver: MediaObserver) {
  }

  ngOnInit(): void {

    this.mediaObserver.asObservable().subscribe((change: MediaChange[]) => {

      const isMobileView = change[0].mqAlias === 'xs' || change[0].mqAlias === 'sm';
      this.mode = isMobileView ? 'over' : 'side';

    });

    // track auth state, something like this.
    // this.opened = hasLoggedIn && (!isMobileView);

  }

  // other code.


}
person nitin    schedule 01.05.2020