Кнопка выхода из Angular Material 6 не соответствует горизонтальной панели навигации - PullRequest
Новая
       33

Кнопка выхода из Angular Material 6 не соответствует горизонтальной панели навигации

0 голосов
/ 03 октября 2018

У меня есть эта панель навигации с горизонтальной полосой внутри sidenav-content: 

<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="warn">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [matMenuTriggerFor]="menu">Registration<mat-icon>arrow_drop_down</mat-icon></a>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>Units</button>
        <button mat-menu-item>Households</button>
        <button mat-menu-item>Individuals</button>
      </mat-menu>

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

      <a mat-list-item (click)="logout()">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="warn">
      <!-- <mat-icon class="back-icon" (click)="goBack()">navigate_before</mat-icon> -->
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon>menu</mat-icon>
      </button>

      <span>Registration System</span>

      <span class="spacer"></span>
      <img class="imageWidth" [src]="img">
      <span class="spacer"></span>
      <!-- <span *ngIf="connectionStatus">
        <mat-icon>signal_wifi_3_bar</mat-icon> Connection Available
      </span>
      <span *ngIf="!connectionStatus">
        <mat-icon>signal_wifi_off</mat-icon> No Connection
      </span>-->
      <span class="fill-remaining-space"></span>
      <button mat-raised-button (click)="logout()">
        <mat-icon>account_circle</mat-icon>Logout</button>

    </mat-toolbar>
    <!-- <router-outlet></router-outlet> -->
  </mat-sidenav-content>
</mat-sidenav-container>

Когда я пытаюсь проверить, совместима ли панель навигации с некоторыми телефонами Android, появляется кнопка выхода из системыиз бара, как показано ниже:

enter image description here

Вот рабочий стек, описывающий проблему:

https://angular-yxlerb.stackblitz.io/

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

...