Bootstrap Side Menu: Collapse, Minimize on small screen

Question

I am looking at this theme and it is exactly perfect of what I am looking for (Side bar wise): http://themesdesign.in/webadmin_1.1/layouts/green/index.html

1. I want the Menu Button that expands/minimizes the side bar, while still retaining all the side bar menus.

2. When it's in XS screen, I want the side bar hidden, but pops up when that menu button is pressed.

This is what I have so far in codes:

 <nav class="navbar-default navbar-static-side" role="navigation"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="sidebar-collapse hidden-xs"> <ul class="nav navbar-collapse collapse" id="side-menu"> <li class="nav-header"> <h2 style="color: #e8e8e8"></h2> <h6 class="" style="color:#808080;">By: </h6> </li> <li> <a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a> <ul class="side-menu-ul collapse in" id="firstMenu"> <li><a href="index-2.html">Dashboard v.1</a></li> <li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li> <li><a href="dashboard_3.html">Dashboard v.3</a></li> <li><a href="dashboard_4_1.html">Dashboard v.4</a></li> <li><a href="dashboard_5.html">Dashboard v.5 </a></li> </ul> </li> <li> <a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a> <ul class="side-menu-ul collapse" id="secondMenu"> <li><a href="mail-inbox.html">Inbox</a></li> <li><a href="mail-compose.html">Compose Mail</a></li> <li><a href="mail-single.html">Single Mail</a></li> </ul> </li> </ul> </div> </nav> 

Having not much design experience, I'm not really sure on how to proceed from here. Especially the part where clicking a button minimizes the side navbar. Would anyone be able to help me?

Edit: I just found another great example here: http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/ The section "Left sidebar that collapses to icons" has what I am looking for. However, the problem with that one is, when it's collapsed to icons, it does not show any menu sub-items.

Answer 1

You can use a click event to update the state of your application when the button is clicked.

https://developer.mozilla.org/en-US/docs/Web/Events/click

Since you are going from one CSS state to another with your sidebar, your best bet would probably be to make both solutions in CSS. This way you can change a parent containers class through the onclick event of the button.

If you want it closed for example you would add a closed class to your sidebar and have your closed css cascade downwards by using:

.closed .child-element {}

To target child elements of the closed state.