Css 如何根据天气动态设置主要内容的宽度侧导航在材质角中打开或关闭

我不熟悉角度和材料框架。我正在尝试创建一个具有以下结构的页面

管理员门户右侧的按钮工作正常，隐藏并显示侧菜单。 大多数代码是angular生成的默认代码

为了移动顶部导航栏下方的左菜单，我在mat sidenav上使用了[fixedTopGap]=“64”。 为了扩展顶部菜单以获得全宽，我使用了下面一行中的类主顶部栏：-

<mat-sidenav-content class="mainTopBar">

这样做给了我完整的顶部菜单，但现在的问题是，我试图使用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>

菜单
菜单
管理门户
菜单

我试着使用左边距：200px，但即使这样也不起作用。 在侧栏上打开，它应该看起来像：-

根据尹的回答，我得到的屏幕是：-

---

不要使用左边距，只需在mat sidenav容器上添加自动大小：

<mat-sidenav-container class="sidenav-container" autosize >...

。。。

不要使用左边距，只需在mat sidenav容器上添加autosize：

<mat-sidenav-container class="sidenav-container" autosize >...

。。。

我终于找到了问题所在。 我将顶部导航条（mat工具栏）固定，宽度为100vw。 在此处添加了自动调整大小

---

它开始按预期工作

最后我发现了问题。 我将顶部导航条（mat工具栏）固定，宽度为100vw。 在此处添加了自动调整大小

---

它开始按预期工作

ng内容不是html标记。如果您将ng内容标记包装在一个div中，并给该div留有200的边距，那么将始终留有200的边距。如果侧导航关闭，则应为0 px；我强烈建议您使用弹性盒。它将使您无需计算边距即可自动调整。@NikhilSrivastava您可以根据是否需要切换一个类open@RomanMahotskyi你能告诉我如何在这里使用它吗？我是UI新手，对flex Box不太了解，一个示例代码会很有帮助。ng-content不是html标记。如果您将ng内容标记包装在一个div中，并给该div留有200的边距，那么将始终留有200的边距。如果侧导航关闭，则应为0 px；我强烈建议您使用弹性盒。它将使您无需计算边距即可自动调整。@NikhilSrivastava您可以根据是否需要切换一个类open@RomanMahotskyi你能告诉我如何在这里使用它吗？我是UI新手，对flex Box不太了解，一个示例代码会很有帮助，使用这种方法，如果我从.mainTopBar删除左边距{margin left:0px！important；}在这种情况下，顶部蓝色条与屏幕左端保持200 px的距离。若左菜单仅关闭，则它占据整个屏幕宽度。我想要的是，蓝色导航栏应该始终是屏幕大小的100%，左侧菜单显示可以根据点击打开和关闭，并且根据内容应该表现为Hi-Yin，如果我从.mainTopBar删除左边距，则使用这种方法{左边距：0px！重要；}在这种情况下，顶部的蓝色条与屏幕的左端保持200像素的距离。若左菜单仅关闭，则它占据整个屏幕宽度。我想要的是，蓝色导航栏应该始终是屏幕大小的100%，左菜单显示应该根据点击打开和关闭，并且根据内容的行为