How to implement Collapsible side bar in Angular2? - twitter-bootstrap-3

Question

I'm learning angular2 and looking to implement a collapsible sidebar, similar to https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2? I tried looking up examples but couldn't find any. Can you provide examples or documentation for it?

Answer 1

You could use ng2-bootstrap:
https://valor-software.com/ng2-bootstrap/#/accordion
You can also check in the source code how it's implemented:
https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion

Answer 2

Since you want to do it with Bootstrap, you can do it with Bootstrap collapse.
http://codepen.io/zurfyx/pen/ygaGyb
The idea behind this solution is the following:
Have your 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 for us collapse.
<li>Icon <span class="collapse collapseMenu">Home</span></li>
Next we need the toggler, the hamburger icon that is. It requires a data-toggle to indicate the class that it has to toggle on each click and a data-target to know the element(s) that has to target, collapseMenu.
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
The CSS part is not a big deal, and you can do it in various ways. I like the CSS3 flexbox approach.
Our page (specifically .container), will be a flex with direction row.
.container {
display: flex;
flex-direction: row;
}
Then we'll set the right panel to take as much space as it can, so as when the content is toggled, it shrinks:
.main {
flex: 1;
}
Complete 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;
}