固定的侧边栏菜单具有滚动和固定宽度

Question

请帮助创建菜单，与NgZorro site menu相同。它具有固定的功能，并在侧边菜单中具有滚动功能，但是在侧边菜单中内容的宽度不会改变，无论是否显示滚动。

此刻我有这样的东西：

HTML：

<div class="main">
  <div class="sidebar-base">
    <div class="sidebar" 
         [ngClass]="{scrollable: isScrollable}"
         (mouseenter)="isScrollable = true"
         (mouseleave)="isScrollable = false">

      long content here

    </div>
  </div>
  <div class="content">

      page main content

  </div>
</div>

SCSS：

.main {
  display: flex;
  justify-content: space-around;

  .sidebar-base {
    width: 340px;

    .sidebar {
      position: fixed;
      width: 340px;
      height: 100vh;

      &.scrollable {
        overflow-y: scroll;
      }
    }
  }

  .content {
    width: calc(100% - 340px);
  }
}

TypeScript：

========another typeScript code=======

    isScrollable = false;

========another typeScript code=======