CODEWITHSUNDEEP
cssangularhtmllayoutangular-material2
NellaGnute
NellaGnute

Reputation: 335

Angular - toolbar being hidden by drawer instead of sidenav

I am trying to create a dashboard-like interface where there is a persistent title toolbar at the top, and a collapsible sidenav on the left side. I have been trying a number of things here and there and this is as close as I have gotten:

HTML:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/']">Home</a>
      <a mat-list-item [routerLink]="['/locations']">Current Destinations</a>
      <a mat-list-item [routerLink]="['/orders']">Today's Orders</a>
      <a mat-list-item [routerLink]="['/logout']">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="top-bar" color="primary">
      <span>App Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS:

.sidenav-container {
    height: 100%;
}

.sidenav {
    display: flex;
    width: 200px;
    box-shadow: 3px 0 6px rgba(0,0,0,.24);
}
.top-bar {
    position: fixed;
    top: 0;
    z-index:1000;
}

The problem is that the sidenav stays in place, and the top toolbar is what is getting hidden, along with the router-outlet content. It needs to be the other way around, but I can't seem to get it. This answer to another question is close, but in that instance the links on the left end up in a scroll bar that don't extend beyond the bottom of the toolbar at the top. Also, it appears to use an older version of Material Design or something. What am I missing?

Upvotes: 1

Views: 6358

Answers (1)

NellaGnute
NellaGnute

Reputation: 335

I finally solved this when I stumbled across a stackblitz example from the Material website. Here's the article:

Material - Creating a Responsive Layout for Mobile App Desktop

And here's the stackblitz example for it:

https://stackblitz.com/angular/pymganppqmm

Upvotes: 4

Related Questions