Wie zu impliment ein sidenav Navigation drawer mit einem (Mini-Variante)

Ich bestanden haben dieses problem mit dieser Lösung.

Glück.

Auch, habe ich ein funktionsfähiges Beispiel in Stackblitz

home.component.html

<div>

  <mat-sidenav-container>

    <mat-sidenav #adminNavMenu mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" class="shadow_right" autosize>

      <!-- MENU LEFT -->
      <!-- MENU LEFT -->
      <app-admin-menu-left></app-admin-menu-left>

    </mat-sidenav>

    <!-- ================================================================= -->
    <!-- ************************* MAIN CONTAINER ************************ -->
    <!-- ================================================================= -->
    <mat-sidenav-content [@onSideNavChange]="sideNavState">
      <div class="main_container" fxLayout="column" fxLayoutGap="0px" style="height:100vh;">

        <!-- =============================================================== -->
        <!-- Your main content -->
        <!-- =============================================================== -->

      </div>
    </mat-sidenav-content>

  </mat-sidenav-container>


</div>

Hause.Komponente.ts

/**
 * George35mk
 */

import { Component, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { trigger, state, style, transition, animate } from '@angular/animations';

import { MediatorService } from '@app-services/mediator/mediator.service';


@Component({
  selector: 'app-admin-analytics',
  templateUrl: './admin-analytics.component.html',
  styleUrls: ['./admin-analytics.component.css'],
  animations: [
    trigger('onSideNavChange', [
      state('close',
        style({
          'margin-left': '60px'
        })
      ),
      state('open',
        style({
          'margin-left': '250px'
        })
      ),
      transition('close => open', animate('250ms ease-in')),
      transition('open => close', animate('250ms ease-in')),
    ]),

    trigger('onPageReady', [
      state('inactive',
        style({
          opacity: 0.4
        })
      ),
      state('active',
        style({
          opacity: 1
        })
      ),
      transition('inactive => active', animate('250ms ease-in')),
      transition('active => inactive', animate('250ms ease-in')),
    ])
  ]
})
export class HomeComponent implements OnInit {


  /**
   * Get the sidenav state.
   */
  sideNavState: string = this.mediator.getSideNavState;



  constructor(
    private mediator: MediatorService,
  ) { }

  ngOnInit() {


    //Subscribe on changes important.
    this.mediator.sideNavListener.subscribe( state => {
      this.sideNavState = state;
    });

  }


}

Vermittler.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';


@Injectable()
export class MediatorService {

  APP_VERSION: String = 'v8.3.1.36';

  //default value.
  //this variable track the value between sessions.
  private _sideState: any = 'open';

  /**
   * This is the mini variant solution with animations trick.
   */
  sideNavListener: any = new Subject();

  get sideNavState() {
    return this._sideState;
  }

  setSidenavState(state) {
    this._sideState = state;
  }


  constructor() {

    this.sideNavListener.subscribe( state => {
      this.setSidenavState(state);
    });


  }


}

menu-left.component.html

<div class="sidenav_menu_left" 
    [@onSideNavChange]="sideNavState" 
    style="width:100%; height: 100vh;" 
    fxLayout="column" 
    [style.overflow]="overflowState">

    <p>Sidenav content left</p>

    <!-- this can toggle the sidenav -->
    <div fxFlex="100" (click)="toggleSideNav();" class="hoverble"></div>

</div>

Menü-Links.Komponente.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatSidenav } from '@angular/material';
import {trigger, state, style, transition, animate, keyframes, query, group} from '@angular/animations';


//Mediator: the main service, later this service is gonna have more generic use.
import { MediatorService } from '@app-services/mediator/mediator.service';
import { delay } from 'q';


@Component({
  selector: 'app-admin-menu-left',
  templateUrl: './admin-menu-left.component.html',
  styleUrls: ['./admin-menu-left.component.css'],
  animations: [

    //animate sidenave
    trigger('onSideNavChange', [
      state('close',
        style({
          width: '60px'
        })
      ),
      state('open',
        style({
          width: '250px'
        })
      ),
      transition('close => open', animate('250ms ease-in')),
      transition('open => close', animate('250ms ease-in')),

    ])

  ]
})
export class MenuLeftComponent implements OnInit {


  /**
   * Get the sidenav state,
   */
  sideNavState: string = this.mediator.sideNavState;


  overflowState: any = 'auto';

  constructor(
    private mediator: MediatorService
  ) {

  }

  ngOnInit() {

    this.mediator.sideNavListener.subscribe( state => {
      this.sideNavState = state;
    });

  }

  /**
   * On animation done.
   * @param x
   */
  animationEvent(x) {
    this.overflowState = 'auto';
  }

  /**
   * Toggle the sidenave state.
   *
   * Hides entire sidenav onclose.
   */
  setSideNavState() {
    this.mediator.toggle().then( snap => {
      console.log(snap);
    });
  }


  /**
   * Toggle, Open or close the sidenav.
   *
   * Set the sidenave state on mediator.
   */
  toggleSideNav() {

    switch (this.sideNavState) {

      case 'close':

        this.sideNavState = 'open';
        this.mediator.setSideNavState(this.sideNavState);

        setTimeout( () => {{
          this.sideNavText      = this.sideNavText === 'open' ? 'close' : 'open';
          this.sideNavIcon      = this.sideNavIcon === 'open' ? 'close' : 'open';
          this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';
        }}, 200);
      break;

      case 'open':
        this.sideNavText      = this.sideNavText === 'open' ? 'close' : 'open';
        this.sideNavIcon      = this.sideNavIcon === 'open' ? 'close' : 'open';
        this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';

        setTimeout( () => {{
          this.sideNavState = this.sideNavState === 'open' ? 'close' : 'open';
          this.mediator.setSideNavState(this.sideNavState);
        }}, 200);
      break;

      default:
        console.log('#6644');
        break;
    }

    this.overflowState = 'hidden';
  }

}

InformationsquelleAutor George C.

Verwenden typescript-code aktualisieren können Sie die Breite der Seitenleiste wie diese :

toggleSideBar(){
    //console.log('toggle called');
    //this.sb.toggle();
    if(this.widthSideBar == this.widthSideBarExpanded){
      this.widthSideBar = this.widthSideBarCollapsed;
    }
    else{
      this.widthSideBar = this.widthSideBarExpanded;
    }
    //snav.toggle();
  }

und die entsprechende html-Datei sieht wie

..
<mat-sidenav [style.width.px]="widthSideBar">..</mat-sidenav>
..
<mat-sidenav-content [style.marginLeft.px]="widthSideBar">..</mat-sidenav-content>
..

Hier habe ich die Breite und margin-left für den Inhalt dynamisch anpassen.

InformationsquelleAutor Sunil Kumar