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 e

Answer 1

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.

Icon Home

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.

Hamburger icon

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

    

        

            
Icon Home
            
Icon Contact
        
    
    

        Hamburger icon
    

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