How to implement Collapsible side bar in Angular2?

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;
}