如果图像在 sidenav 中，Material Sidenav 会溢出内容

Question

早上好！

我在我的 Angular 应用程序中使用 Material Design 侧边导航向用户提供页面选择。侧面导航首先包含一个徽标，然后是用户可以选择的所有页面 - 如果他已登录。

问题： 如果用户未登录，则 logo 是宽度最大的元素；这会混淆页面内容的定位。页面内容被sidenav溢出，因为页面内容与页面链接对齐，但没有与logo对齐。

如您所见，sidenav 尊重徽标的宽度。内容没有。

HTML：

<mat-card>
    <mat-sidenav-container>
        <mat-sidenav #drawer mode="side" opened role="navigation">
            <mat-nav-list>
                <div class="logo-nav">
                    <img src="./assets/MyLogo.png">
                </div>
                <a id="nav-home" mat-list-item routerLink='home' routerLinkActive="active">Home</a>
                <a id="nav-schulauswahl" mat-list-item routerLink='page1' routerLinkActive="active" *ngIf="loggedIn">
                    Page 1
                </a>
                <a id="nav-schule-list" mat-list-item routerLink='page2' routerLinkActive="active" *ngIf="loggedIn">
                    Page 2 with very long name
                </a>
                <a id="nav-logout" mat-list-item (click)='logout()' routerLinkActive="active">Logout</a>
            </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content>
            Some Content
        </mat-sidenav-content>
    </mat-sidenav-container>
</mat-card>

打字稿：

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

@Component({
    selector: 'my-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent {

    get loggedIn(): boolean {
        return true; // <- Toogle this to see all page links
    }
}

问题核心：mat-sidenav-content的margin-left计算错误。作为一种解决方法，我将其硬编码为 230px，但如果用户未登录，这当然会在 sidenav 和内容之间产生难看的差距：

CSS：

@import '../../styles/colors.scss';

.logo-nav {
    width: 100%;
    text-align: center;
}

// Workaround
mat-sidenav-content {
    margin-left: 230px !important;
}

如果用户已登录，则会出现较长的页面名称，这使得 left-margin 的计算正确。

Answer 1

有多种方法可以解决此问题。例如：

1. 将width 属性应用于您的徽标图像。可以是100% 或230px，随你使用。

.logo-nav img {
  min-width: 230px;
}

1. 将width 属性设置为sidenav 本身。 https://material.angular.io/components/sidenav/overview#setting-the-sidenav-39-s-size

.mat-sidenav {
  width: 230px;
}

1. 将mat-nav-list 的显示更改为flex 与column 方向。

.mat-nav-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}