Sidebar navigation collapsible

https://bootsnipp.com/snippets/4OZ8R



<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
   
#wrapper {padding-left: 250px;transition: all 0.4s ease 0s;}
#sidebar-wrapper { margin-left: -250px; top: 51px; left: 250px; width: 250px;background: #000;position: fixed;  height: 100%; overflow-y: auto; z-index: 1000; transition: all 0.4s ease 0s;}
#wrapper.active { padding-left: 0;}
#wrapper.active #sidebar-wrapper {  left: 0;}
#page-content-wrapper {width: 100%; padding-top: 70px;  transition: all 0.4s ease 0s;}
.sidebar-nav {position: absolute;top: 0;  width: 250px;  list-style: none;  margin: 0;  padding: 0;}
.sidebar-nav li {line-height: 40px;text-indent: 20px;}
.sidebar-nav li a {color: #999999;  display: block;text-decoration: none; padding-left: 60px;}
.sidebar-nav li a span:before {position: absolute;left: 0; color: #41484c;  text-align: center;  width: 20px;  line-height: 18px;}
.sidebar-nav li a:hover,.sidebar-nav li.active {  color: #fff;  background: rgba(255,255,255,0.2);  text-decoration: none;}
.sidebar-nav li a:active,.sidebar-nav li a:focus {  text-decoration: none;}
.sidebar-nav > .sidebar-brand {  height: 65px;  line-height: 60px;  font-size: 18px;}
.sidebar-nav > .sidebar-brand a {  color: #999999;}
.sidebar-nav > .sidebar-brand a:hover {  color: #fff;  background: none;}
#menu-toggle { text-decoration: none; float: left; color: #fff; padding-right: 15px;}
@media (max-width:767px) {
    #wrapper {padding-left: 0;}
    #sidebar-wrapper {left: 0;}
    #wrapper.active {position: relative; left: 250px;}
    #wrapper.active #sidebar-wrapper {left: 250px; width: 250px; transition: all 0.4s ease 0s;}
    #menu-toggle {display: inline-block;}
}

</style>
<script>
        /*Menu-toggle*/
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
        alert(1);
    });
</script>
<div id="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div  class="navbar-brand">
                    <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
                        <i class="fa fa-bars"></i>
                    </a>
                    <a href="#">Project name</a>
                </div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <nav id="spy">
            <ul class="sidebar-nav nav">
                <li class="sidebar-brand">
                    <a href="#home"><span class="fa fa-home solo">Home</span></a>
                </li>
                <li>
                    <a href="#anch1">
                        <span class="fa fa-anchor solo">Anchor 1</span>
                    </a>
                </li>
                <li>
                    <a href="#anch2">
                        <span class="fa fa-anchor solo">Anchor 2</span>
                    </a>
                </li>
                <li>
                    <a href="#anch3">
                        <span class="fa fa-anchor solo">Anchor 3</span>
                    </a>
                </li>
                <li>
                    <a href="#anch4">
                        <span class="fa fa-anchor solo">Anchor 4</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                    Panel 1
                            </div>
                            <div class="panel-body">
                                content body
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">                   
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                    Panel 1
                            </div>
                            <div class="panel-body">
                                content body
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>