Angular SideNav Beispiel

<mat-toolbar color="primary" class="example-toolbar">

    <button (click)="sidenav_opened = !sidenav_opened" 

    style="border-radius: px;

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);"

    ><mat-icon>menu</mat-icon></button>    

</mat-toolbar>

<mat-sidenav-container>

<mat-sidenav [(opened)]="sidenav_opened"  #sidenav mode="side" >

        <mat-nav-list>

            <a mat-list-item > Timelist </a>

            <mat-list-item routerLink="/projects">Projects</mat-list-item>

          </mat-nav-list>

</mat-sidenav>

<mat-sidenav-content>

    <div style="margin: 20px;">

    Angular Material Sidenav:

    <br>

    <br>Sidenav Modes:

    <ul>

    <li>mode="push"</li>

    <li>mode="over"</li>

    <li>mode="side"</li>

  </ul>

  <br>Sidenav row:

    <ul>

    <li>mode="navigation"</li>

    <li>mode="dialog"</li>    

  </ul>

    </div>

  </mat-sidenav-content>

</mat-sidenav-container>

import { Component, OnInit, Output,EventEmitter } from '@angular/core';

@Component({

  selector: 'app-sidenav',

  templateUrl: './sidenav.component.html',

  styleUrls: ['./sidenav.component.css']

})

export class SidenavComponent implements OnInit {

  sidenav_opened=true;

  constructor() { }

  ngOnInit(): void {

  }

}

a{

    text-decoration: none;

    color: white;

}

a:hover, a:active{

    color: lightgray;

}

.nav-caption{

    display: inline-block;

    padding-left: 6px;

}

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatToolbarModule } from '@angular/material/toolbar';

import { MatSidenavModule} from '@angular/material/sidenav';

import { MatListModule } from '@angular/material/list'

import { MatIconModule } from '@angular/material/icon';

import { MatButtonModule } from '@angular/material/button'

import { SidenavComponent } from './components/sidenav/sidenav.component';

import { PageComponent } from './components/page/page.component';

import { EditpageComponent } from './components/editpage/editpage.component';

import { LoginComponent } from './components/login/login.component';

import { from } from 'rxjs';

@NgModule({

  declarations: [

    AppComponent,

    SidenavComponent,

    PageComponent,

    EditpageComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    MatToolbarModule,

    MatSidenavModule,

    MatListModule,

    MatIconModule,

    MatButtonModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }