Two Sidebar and Off Canvas with Bootstrap

by Cristofer Sousa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class = "navbar navbar-inverse navbar-static-top navbar-fixed-top">

        <div class="container"> 
            <div class="navbar-header">
               <a href="#" class="navicon">
                   <i class="fa fa-bars" aria-hidden="true"></i>  
                </a>
               <a href="#" class="navbar-brand">myProject</a>
               <button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        </div>  
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">
                       <li><a href = "#">
                        <i class="fa fa-envelope"></i>
                        </a></li>
                      
                        <li class = "dropdown">
                          <a href = "#" class = "dropdown-toggle" data-toggle="dropdown">  
                              <i class="fa fa-user"></i> Hello, Joe Doe! <b class = "caret"></b></a>
                        <ul class ="dropdown-menu">
                            <li><a href = "#">Preferences</a></li>
                            <li><a href = "#">Account</a></li>
                            <li><a href = "#">Logout</a></li>
                        </ul>
                        </li>
                    </ul>
                    <ul class = "nav navbar-nav navbar-right">
                      <li class ="active" ><a href = "#">
                        <i class="fa...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {font-family: 'Open Sans', sans-serif;}
a {text-decoration: none;}

body{
  background-color:#fff;
}

/*header*/
.navbar-inverse{
  background-color:#0099ff;
  color:#fff;
}

.navbar-inverse .navbar-brand{color:#fff;}
.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
    text-decoration: none;
    background-color: #000;
    color: #f1c40f;
}
.navicon{
  position: fixed;
  top: 0;
  left: 0; 
  background: none repeat scroll 0 0 #080808;
  color: white;
  padding: 15px 19px; 
  }

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0px;
}


nav.sidebar-menu-collapsed {
  width: 50px; }
nav.sidebar-menu-expanded {
  width: 151px; }
nav.sidebar {
  position: fixed;
  top: 35px;
  left: 0px;
  height: 100%;
  background: none repeat scroll 0 0 #ecf0f1;
  color: #34495e;
  padding: 20px 10px; 
  z-index:999;
  }
  nav.sidebar a#justify-icon {
    outline: 0;
    color: #34495e;
    font-size: 24px;
    font-style: normal; }
  nav.sidebar a#logout-icon {
    outline: 0;
    color: #34495e;
    font-size: 24px;
    font-style: normal;
    position: absolute;
    bottom:0;
    left: 10px; }
  nav.sidebar ul {
    margin: 0;
    padding: 0;
    margin-top: 60px; }
    nav.sidebar ul li {
      margin: 0;
      padding: 0;
      margin-top: 20px;
      list-style-type: none; }
      nav.sidebar ul li a.expandable {
        outline: 0;
        color: #34495e;
        text-decoration: none;
        font-size: 20px; }
        nav.sidebar ul li a.expandable:hover {
          color: #bbbbbb; }
        nav.sidebar ul li a.expandable span.expanded-element {
          margin-left: 2px;
          display: none;
          font-size: 11px;
          position: relative;
          bottom: 2px; }
      nav.sidebar ul li.active {
        background: none repeat scroll 0 0 black;
       ...

JavaScript

(function() {
  $(function() {
    var collapseMyMenu, expandMyMenu, hideMenuTexts, showMenuTexts;
    expandMyMenu = function() {
      return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
    };
    collapseMyMenu = function() {
      return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
    };
    showMenuTexts = function() {
      return $("nav.sidebar ul a span.expanded-element").show();
    };
    hideMenuTexts = function() {
      return $("nav.sidebar ul a span.expanded-element").hide();
    };
    return $("#justify-icon").click(function(e) {
      if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
        expandMyMenu();
        showMenuTexts();
        $(this).css({
          color: "#000"
        });
      } else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
        collapseMyMenu();
        hideMenuTexts();
        $(this).css({
          color: "#FFF"
        });
      }
      return false;
    });
  });

}).call(this);