$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if (e.target.innerText == "Show Menu") {
e.target.innerText = "Hide Menu";
} else {
e.target.innerText = "Show Menu";
}
});
body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
#logo {
width: 160px;
height: 150px;
border-radius: 50%;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.navbar {
background: linear-gradient(to top right, #0084ff, #0084ff);
/*position: fixed;*/
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
#sidebar-wrapper {
position: fixed;
}
#page-content-wrapper {
padding-top: 57px;
}
#page-content-wrapper,
#page-content-wrapper>.navbar {
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
#wrapper.toggled #page-content-wrapper>.navbar {
left: 15rem;
}
#wrapper.toggled #page-content-wrapper {
margin-left: 15rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">
<a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a>
</div>
<div class="list-group list-group-flush">
<a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>
<a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>