14

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.

enter image description here

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

Kelvin Ho
  • 376
  • 2
  • 3
  • 14

1 Answers1

7

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 !!!

Ethan Vu
  • 2,911
  • 9
  • 25
  • how would you trigger the JS event with out hover effect – Ragavan Rajan Dec 14 '20 at 22:37
  • @RagavanRajan it really depend on the framework you use, ex: Jquery, Angular or React etc... Each have it own declarative way to manipulate css class in the DOM. But the ideal is switching the class, one for expanding, and one for collapsing – Ethan Vu Dec 15 '20 at 02:21
  • Thanks Ethan. I am using Angular and using ngclass to achieve this but having hard time. Can you pls help – Ragavan Rajan Dec 15 '20 at 02:22
  • @RagavanRajan [here a working stackbliz example](https://stackblitz.com/edit/angular-playground-mnw29c?file=app/app.component.html) , happy coding ! – Ethan Vu Dec 15 '20 at 02:34
  • 3
    Is this not possible with `p-sidebar`? – Jonathan Feb 27 '21 at 21:31