How to implement a foldable sidebar in Angular2?

Question

I am learning angular2 and want to implement a collapsible sidebar similar to https://almsaeedstudio.com/themes/AdminLTE/index2.html in Angular 2? I tried to find examples, but could not find them. Can you provide examples or documentation for this?

Answer 1

You can use ng2-bootstrap:

https://valor-software.com/ng2-bootstrap/#/accordion

You can also check the source code for how it is implemented:

https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion

Answer 2

Since you want to do this using Bootstrap, you can do this using "Short Download Complete".

http://codepen.io/zurfyx/pen/ygaGyb

The idea behind this solution is as follows:

Create collapsible content inside a specific class, we called it collapseMenu . We also need a class that will indicate whether it is hidden or not. Bootstrap already provides it with collapse us.

 <li>Icon <span class="collapse collapseMenu">Home</span></li> 

Next we need toggler , a hamburger icon. To specify the class that it should switch to every click, and the data-target requires << 23> to find out which elements should be targeted, collapseMenu .

 <button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button> 

The CSS part doesn't really matter, and you can do it in various ways. I like the CSS3 flexbox approach.

Our page (in particular .container ) will be flexible with a line of direction.

 .container { display: flex; flex-direction: row; } 

Then we will set the right panel in order to take as much space as possible, since when the contents switch, it decreases:

 .main { flex: 1; } 

---

Full working version:

HTML

 <div class="container"> <div class="left-panel"> <ul> <li>Icon <span class="collapse collapseMenu">Home</span></li> <li>Icon <span class="collapse collapseMenu">Contact</span></li> </ul> </div> <div class="main"> <button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button> </div> </div> 

CSS

 body { margin: 0; padding: 0; } ul > li { display: block; } .collapse.in { display: inline-block; } .container { height: 100vh; display: flex; flex-direction: row; padding: 0; } .left-panel { background-color: grey; } .main { background-color: black; flex: 1; }