Bootstrap3 Sidebar CSS

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Bootstrap3 Sidebar CSS</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Bootstrap3 Sidebar CSS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav class="mnb navbar navbar-default navbar-fixed-top">
        <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>
              <i class="ic fa fa-bars"></i>
            </button>
            <div style="padding: 15px 0;">
               <a href="#" id="msbo"><i class="ic fa fa-bars"></i></a>
            </div>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">En</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Draude Oba <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Settings</a></li>
                  <li><a href="#">Upgrade</a></li>
                  <li><a href="#">Help</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Logout</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-bell-o"></i></a></li>
              <li><a href="#"><i class="fa fa-comment-o"></i></a></li>
            </ul>
            <form class="navbar-form navbar-right">
              <input type="text" class="form-control" placeholder="Search...">
            </form>
          </div>
        </div>
      </nav>
      <!--msb: main sidebar-->
      <div class="msb" id="msb">
              <nav class="navbar navbar-default" role="navigation">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                      <div class="brand-wrapper">
                          <!-- Brand -->
                          <div class="brand-name-wrapper">
                              <a class="navbar-brand" href="#">
                                  SAITAMA
                              </a>
                          </div>
      
                      </div>
      
                  </div>
      
                  <!-- Main Menu -->
                  <div class="side-menu-container">
                      <ul class="nav navbar-nav">
      
                          <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                          <li class="active"><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li>
                          <li><a href="#"><i class="fa fa-heart"></i> Extras</a></li>
      
                          <!-- Dropdown-->
                          <li class="panel panel-default" id="dropdown">
                              <a data-toggle="collapse" href="#dropdown-lvl1">
                                  <i class="fa fa-diamond"></i> Apps
                                <span class="caret"></span>
                  </a>
                              <!-- Dropdown level 1 -->
                              <div id="dropdown-lvl1" class="panel-collapse collapse">
                                  <div class="panel-body">
                                      <ul class="nav navbar-nav">
                                          <li><a href="#">Mail</a></li>
                                          <li><a href="#">Calendar</a></li>
                                          <li><a href="#">Ecommerce</a></li>
                                          <li><a href="#">User</a></li>
                                          <li><a href="#">Social</a></li>
      
                                          <!-- Dropdown level 2 -->
                                          <li class="panel panel-default" id="dropdown">
                                              <a data-toggle="collapse" href="#dropdown-lvl2">
                                                  <i class="glyphicon glyphicon-off"></i> Sub Level <span class="caret"></span>
                                              </a>
                                              <div id="dropdown-lvl2" class="panel-collapse collapse">
                                                  <div class="panel-body">
                                                      <ul class="nav navbar-nav">
                                                          <li><a href="#">Link</a></li>
                                                          <li><a href="#">Link</a></li>
                                                          <li><a href="#">Link</a></li>
                                                      </ul>
                                                  </div>
                                              </div>
                                          </li>
                                      </ul>
                                  </div>
                              </div>
                          </li>
                          <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>
                      </ul>
                  </div><!-- /.navbar-collapse -->
              </nav>  
      </div>
      <!--main content wrapper-->
      <div class="mcw">
        <!--navigation here-->
        <!--main content view-->
        <div class="cv">
          <div>
           <div class="inbox">
             <div class="inbox-sb">
               
             </div>
             <div class="inbox-bx container-fluid">
               <div class="row">
                 <div class="col-md-2">
                   <ul>
                     <li><a href="#">Inbox</a></li>
                     <li><a href="#">Sent</a></li>
                     <li><a href="#">Trash</a></li>
                   </ul>
                 </div>
                 <div class="col-md-10">
                   <table class="table table-stripped">
                     <tbody>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star"></i></td>
                         <td><b>Mozilla</b></td>
                         <td><b>In celebration of women and girls everywhere</b></td>
                         <td></td>
                         <td>Mar 10</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Dan Glenn</td>
                         <td>[ptcuser-announcements] - PTC/USER Expert Speaker Series Webinar March 9, 2017 11AM (EST)</td>
                         <td><i class="fa fa-paperclip"></i></td>
                         <td>Mar 10</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
                       <tr>
                         <td><input type="checkbox"/></td>
                         <td><i class="fa fa-star-o"></i></td>
                         <td>Jetpack</td>
                         <td>Announcing some highly requested improvements and our new affiliate program</td>
                         <td></td>
                         <td>Mar 08</td>
                       </tr>
      
                     </tbody>
                   </table>
                 </div>
               </div>
             </div>
           </div>
          </div>
        </div>
      </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
  margin-top: 50px;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #39464e;
}
.navbar-default {
  background-color: #fff;
  margin-left: 200px;
}
/*main side bar*/
.msb {
  width: 200px;
  background-color: #f5f7f9;
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  min-height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  height: 100%;
  z-index: 1;
  border-right: 1px solid #ddd;
}
.msb .navbar {
  border: none;
  margin-left: 0;
  background-color: inherit;
}
.msb .navbar-header {
  width: 100%;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 20px;
  background: #fff;
}
.msb .navbar-nav .panel {
  border: 0 none;
  box-shadow: none;
  margin: 0;
  background: inherit;
}
.msb .navbar-nav li {
  display: block;
  width: 100%;
}
.msb .navbar-nav li a {
  padding: 15px;
  color: #5f5f5f;
}
.msb .navbar-nav li a .glyphicon, .msb .navbar-nav li a .fa {
  margin-right: 8px;
}
.msb .nb {
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: 30px;
  overflow: hidden;
}
ul.nv, ul.ns {
  position: relative;
  padding: 0;
  list-style: none;
}
.nv {
 /*ns: nav-sub*/
}
.nv li {
  display: block;
  position: relative;
}
.nv li::before {
  clear: both;
  content: "";
  display: table;
}
.nv li a {
  color: #444;
  padding: 10px 25px;
  display: block;
  vertical-align: middle;
}
.nv li a .ic {
  font-size: 16px;
  margin-right: 5px;
  font-weight: 300;
  display: inline-block;
}
.nv .ns li a {
  padding: 10px 50px;
}
/*main content wrapper*/
.mcw {
  margin-left: 200px;
  position: relative;
  min-height: 100%;
 /*content view*/
}
/*globals*/
a, a:focus, a:hover {
  text-decoration: none;
}
.inbox .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.inbox ul, .inbox li {
  margin: 0;
  padding: 0;
}
.inbox ul li {
  list-style: none;
}
.inbox ul li a {
  display: block;
  padding: 10px 20px;
}
.msb, .mnb {
  -moz-animation: slidein 300ms forwards;
  -o-animation: slidein 300ms forwards;
  -webkit-animation: slidein 300ms forwards;
  animation: slidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.mcw {
  -moz-animation: bodyslidein 300ms forwards;
  -o-animation: bodyslidein 300ms forwards;
  -webkit-animation: bodyslidein 300ms forwards;
  animation: bodyslidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .mcw, body.msb-x .mnb {
  margin-left: 0;
  -moz-animation: bodyslideout 300ms forwards;
  -o-animation: bodyslideout 300ms forwards;
  -webkit-animation: bodyslideout 300ms forwards;
  animation: bodyslideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .msb {
  -moz-animation: slideout 300ms forwards;
  -o-animation: slideout 300ms forwards;
  -webkit-animation: slideout 300ms forwards;
  animation: slideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* Slide in animation */
@-moz-keyframes slidein {
  0% {
    left: -200px;
 }
  100% {
    left: 0;
 }
}
@-webkit-keyframes slidein {
  0% {
    left: -200px;
 }
  100% {
    left: 0;
 }
}
@keyframes slidein {
  0% {
    left: -200px;
 }
  100% {
    left: 0;
 }
}
@-moz-keyframes slideout {
  0% {
    left: 0;
 }
  100% {
    left: -200px;
 }
}
@-webkit-keyframes slideout {
  0% {
    left: 0;
 }
  100% {
    left: -200px;
 }
}
@keyframes slideout {
  0% {
    left: 0;
 }
  100% {
    left: -200px;
 }
}
@-moz-keyframes bodyslidein {
  0% {
    left: 0;
 }
  100% {
    margin-left: 200px;
 }
}
@-webkit-keyframes bodyslidein {
  0% {
    left: 0;
 }
  100% {
    left: 0;
 }
}
@keyframes bodyslidein {
  0% {
    margin-left: 0;
 }
  100% {
    margin-left: 200px;
 }
}
@-moz-keyframes bodyslideout {
  0% {
    margin-left: 200px;
 }
  100% {
    margin-right: 0;
 }
}
@-webkit-keyframes bodyslideout {
  0% {
    margin-left: 200px;
 }
  100% {
    margin-left: 0;
 }
}
@keyframes bodyslideout {
  0% {
    margin-left: 200px;
 }
  100% {
    margin-left: 0;
 }
}
(function(){
    $('#msbo').on('click', function(){
      $('body').toggleClass('msb-x');
    });
  }());