如何配置 PrimeNG 侧边栏为标题留出空间并能够将画布向右推

Question

我正在使用Angular 7和构建网站PrimeNG 8。顶部有固定标题，左侧有侧边栏导航菜单的网页布局。

我的预期行为是当侧边栏切换时，它不会隐藏标题，并且内容也会向右移动。

我检查了primeng文档，但没有提供这样的功能。 https://www.primefaces.org/primeng/#/sidebar

Answer 1

您可以简单地使用 css 和 html 实现，例如，当悬停在容器上时，我使用纯 CSS 扩展侧边栏，您可以使用 JS 处理单击事件以扩展它：

* {
 margin: 0;
}
nav{
 height:70px;
 background-color: green;
}
.container{
 display: flex;
 height: calc(100vh - 70px);
}
.container .main-body{
 width: 100%;
}
.container aside{
  width: 0;
  overflow-y: auto;
  transition: all 0.5s;
  background-color: yellow;
}
/*Im using hover event to expand sidebar for example, you can use JS to handle click event*/
.container:hover aside{
  width: 200px;
}

<nav></nav>
<section class="container">
  <aside></aside>
  <div class="main-body">Hover me to display side bar</div>
</section>

在这里，我包含了一个 Angular 项目的工作示例。快乐编码！！！