Code snippet for full width layout with sidebar menu.

	<aside class="nav">
	    <a href="#" class="side-nav-toggle">
	        <i class="fa fa-long-arrow-left pull-left"></i>
	        Close
	    </a>
	    <ul>
	        <li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li>
	        <li><a href="#"><i class="fa fa-gears"></i> <span>Services</span></a></li>
	        <li><a href="#"><i class="fa fa-info-circle"></i> <span>About Us</span></a></li>
	        <li><a href="#"><i class="fa fa-phone"></i> <span>Contact Us</span></a></li>
	    </ul>
	</aside>
	<div class="page-content">
	    <header class="container-fluid">
	        <div class="row">
	            <div class="col-sm-12 brand">
	                <a href="#" class="side-nav-toggle"><i class="fa fa-bars"></i></a>
	                <img src="https://www.cs.princeton.edu/~xinyi/images/GoogleLogo.png" alt="" width="40px" />
	                <span>Google</span>
	                <i class="fa fa-bars hide"></i>
	                <nav class="text-right pull-right">
	                    <ul class="list-inline list-unstyled">
	                        <li><a href="#">Home</a></li>
	                        <li><a href="#">Services</a></li>
	                        <li><a href="#">About Us</a></li>
	                        <li><a href="#">Contact Us</a></li>
	                    </ul>
	                </nav>
	            </div>
	        </div>
	    </header>
	</div>
	body {
	  background: #0094ff;
	  font-family: Calibri, Helvetica;
	}
	header {
	  background: #fff;
	  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
	}
	header .brand {
	  margin: 20px 0;
	  height: 40px;
	}
	header .brand span {
	  font-size: 20px;
	  line-height: 40px;
	  vertical-align: middle;
	  margin-left: 10px;
	}
	header nav {
	  margin: 10px 0;
	  visibility: visible;
	  opacity: 1;
	  transition: 0.3s ease;
	}
	header nav a {
	  color: #202020;
	}
	@media only screen and (min-width: 320px) and (max-width: 568px) {
	  header .fa.fa-bars {
	    display: block !important;
	    float: right;
	    font-size: 20px;
	    padding: 10px;
	    cursor: pointer;
	    margin-right: -10px;
	  }
	  header .fa.fa-bars:hover + nav,
	  header nav:hover {
	    visibility: visible;
	    opacity: 1;
	  }
	  header nav {
	    position: absolute;
	    top: 40px;
	    width: 100%;
	    background: #202020;
	    left: 0;
	    padding: 10px 0;
	    visibility: hidden;
	    margin: 0;
	    opacity: 0;
	  }
	  header nav a {
	    color: #fff;
	  }
	  header nav li {
	    width: 100%;
	    padding: 10px 0;
	    color: #fff;
	    text-align: center;
	  }
	}
	header nav ul {
	  margin-bottom: 0;
	}
	aside {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 250px;
	  height: 100%;
	  background: #fff;
	  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	  z-index: 9;
	  transition: 0.3s ease;
	}
	aside.compact {
	  width: 50px;
	}
	aside.compact li a {
	  padding: 15px 12px;
	  text-align: center;
	}
	aside.compact li a span {
	  display: none;
	}
	aside .side-nav-toggle {
	  display: inline-block;
	  width: 100%;
	  padding: 10px;
	  text-align: right;
	  color: #fff;
	  text-shadow: none;
	  background: #0094ff;
	  opacity: 1;
	  font-size: 16px;
	  font-style: normal;
	  display: none;
	}
	aside .side-nav-toggle .fa {
	  margin-top: 3px;
	}
	aside ul {
	  list-style-type: none;
	  padding: 0;
	}
	aside ul li {
	  width: 100%;
	}
	aside ul li a {
	  display: inline-block;
	  width: 100%;
	  padding: 15px 20px;
	  border-bottom: rgba(0, 0, 0, 0.04) 1px solid;
	  color: #202020;
	  background: #fff;
	  transition: 0.3s ease;
	}
	aside ul li a span {
	  margin-left: 10px;
	}
	aside ul li a:hover,
	aside ul li a.focus,
	aside ul li a.active,
	aside ul li a.visited {
	  color: #000 !important;
	  text-decoration: none !important;
	  background: rgba(0, 0, 0, 0.02);
	}
	aside ul li:last-child a {
	  border-bottom: none;
	}
	.page-content {
	  position: fixed;
	  right: 0;
	  top: 0;
	  height: 100%;
	  width: 100%;
	  padding-left: 250px;
	}
	.page-content.extend {
	  padding-left: 50px;
	}
	$(document).ready(function () {
        $(".side-nav-toggle").click(function () {
            $("aside.nav").toggleClass("compact");
            $(".page-content").toggleClass("extend");
        });
    });

Reference