Я новичок в angular и материальных рамках. Я пытаюсь создать страницу, которая имеет структуру ниже
Кнопка на правой стороне портала администратора работает отлично, она скрывается и показывает боковое меню. Большая часть кода является кодом по умолчанию, сгенерированным angular.
Чтобы сдвинуть левое меню под верхней панелью навигации, я использовал [fixedTopGap] = "64" на mat-sidenav. Чтобы развернуть верхнее меню на полную ширину, я использовал главную верхнюю панель класса в нижней строке: -
<mat-sidenav-content class="mainTopBar">
Css для главной верхней панели: -
.mainTopBar
{
margin-left:0px !important;
}
Это дало мне полное верхнее меню, но теперь проблема в том, какой контент, который я пытаюсь разместить, используя контент ng, застревает слева. Как я могу предоставить поле для содержания ng, основываясь на том, открыто ли левое меню или нет.
Вот мой код 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)" [fixedTopGap]="64">
<mat-toolbar class="Namebar">Menu</mat-toolbar>
<mat-nav-list >
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content class="mainTopBar">
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Admin Portal</span>
<button
type="button"
style="position:absolute;margin-left:200px;"
aria-label="Toggle sidenav"
mat-icon-button
*ngIf="!(isHandset$ | async)"
(click)="drawer.toggle()"
>
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
</mat-toolbar>
<ng-content style="margin-left: 200px !important; "></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Я пытался использовать поле margin-left: 200px но даже это не сработало. На боковой панели откройте его следующим образом: -
Исходя из ответа Инь, экран, который я получаю: -