Angular-侧边栏导航

Question

代替折叠时常规的引导幻灯片向下导航，我试图从左侧导航中创建幻灯片。

HTML用于切换按钮

<button id="collapseBtn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleSideBar()" >
Toggle</button>

侧边栏的HTML

<div class="sidebar">
  <ul>
      <li>S-Dashboard</li>
      <li>S-Voucher</li>
  </ul>
</div>

侧边栏的CSS

.sidebar {
   background: #1a2580;
   color: white;
   height: 100%;
   width: 0;
   position: fixed; 
   z-index: 1;
   top: 0;
   left: 0;
   overflow-x: hidden;
   padding-top: 60px;
   transition: 0.5s; 
}
.showsidebar {
   width: 250px;
}
.hidesidebar {
   width: 0px;
}

组件文件中的ToggleSideBar函数

toggleSideBar() {
   document.getElementsByClassName('sidebar')[0].classList.add('showsidebar');
   this.sideBarOpen = true;
}

单击切换按钮会根据需要滑出导航，但是不会将内容推到右侧。结果，内容隐藏在侧边栏下方。

如何将内容右移？

其次，当我单击页面上的任意位置时，我尝试使用HostListener关闭侧边栏，但这似乎不起作用。

StackBlitz Link

Answer 1

您可以向body元素添加一些样式：

styles.css

 body{ 
  position: relative;
  overflow: hidden;
  transition: left 0.5s ease;
  left:0;
}

body.push {
  left:255px;
}

以及您的组件中：

    @HostListener('click', ['$event.target.id'])onClick(id: any) {
   if (id == "collapseBtn") {
      document.getElementsByClassName('sidebar')[0].classList.add('showsidebar');
      document.body.classList.add('push');
      this.sideBarOpen = true;
   } else {
    if (this.sideBarOpen) {
       document.getElementsByClassName('sidebar')[0].classList.remove('showsidebar');
       document.body.classList.remove('push');
    }
   }
 }