Блог

Доброе утро!

Я использую навигацию на стороне Material Design в своем приложении Angular, чтобы предложить пользователю выбор страницы. Боковая навигация сначала содержит логотип, а затем все страницы, которые пользователь может выбрать, если он вошел в систему.

Проблема: если пользователь не вошел в систему, логотип является элементом с наибольшей шириной; и это сбивает с толку позиционирование содержимого страницы. Содержимое страницы переполняется sidenav, потому что содержимое страницы совпадает со ссылками на страницы, но не с логотипом.

Как вы можете видеть, 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
    }
}
  

Суть проблемы: значение margin-left mat-sidenav-content вычисляется неправильно. В качестве обходного пути я жестко закодировал его до 230 пикселей, но это, конечно, приводит к уродливому разрыву между sidenav и контентом, если пользователь не вошел в систему:

CSS:

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

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

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

Если пользователь вошел в систему, появляются более длинные имена страниц, что делает left-margin вычисление правильным.

Есть несколько способов исправить это. Например:

1. Применение width свойства к изображению вашего логотипа. Может быть 100% или 230px как вы использовали.

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

2. Установка width свойства для самого sidenav. https://material.angular.io/components/sidenav/overview#setting-the-sidenav-39-s-size

 .mat-sidenav {
  width: 230px;
}
  

3. Изменение отображения mat-nav-list на flex с column направлением.

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