How to configure PrimeNG sidebar to leave space for the header and able to push canvas to the right

Question

I am building a website using Angular 7 and PrimeNG 8. The layout of webpage having a fixed header on the top and a side bar navigation menu on the left.

My expected behaviour is when the sidebar toggle, it won't hide the header and also the content will move to the right.

I have checked the primeng documentation, but no such feature is provided. https://www.primefaces.org/primeng/#/sidebar

Answer 1

You can simply achieve with css and html, im using plain CSS to expand the side bar when hover on the container for example, you can use JS to handle click event for expanding it :

* {
 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>

Here I included an working example for Angular project .Happy coding !!!