<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <div id="mySidenav" class="sidenav text-white" style="width:250px;"> <a class="closebtn sidenav-close">×</a> <div class="bg-warning text-dark p-2"> <div class='text-center' style="color:#b3b3b3;"> <span class='fa fa-user-circle fa-4x mb-2'></span> </div> <h4 class='text-center'>Hi, User</h4> <span class='ml-2'> Log in on : 20:09:43 </span> </div> <a><i class='fa fa-user'></i> User</a> <a><i class='fa fa-clock-o'></i> <span id="countdown">02:00:00</span></a> <a onclick="$(this).find('.collapse-icon').toggleClass('fa-rotate-90');" data-toggle="collapse" data-target='#my-account'> My Account <span class='fa fa-chevron-right float-right m-1 collapse-icon'></span> </a> <div class="collapse inner-menu" id='my-account'> <a class="menu-link border-menu-light" href="#"><i class='fa fa-user'></i> My Account</a> <a class="menu-link border-menu-light" href="#"><i class='fa fa-key'></i> Change password</a> </div> <a class="text-danger" href='#'><i class='fa fa-power-off'></i> Log out</a> </div> <div class="bg-dark text-center sidebar mt-4 mt-md-0" style="position:absolute;"> <span class="fa fa-bars"></span> <span class="fa fa-user"></span> <span class="fa fa-clock-o"></span> <a class="text-danger fa fa-power-off" href='#'></a> </div> <div class="fixed-bottom text-white bg-navy pl-2"> <i class='fa fa-sign-in-alt'></i> User</i> </div>

.sidebar span{ color:#fff; } .sidebar span:hover{ color:#ffff80; } .sidenav { height: 100%; width: 250px; position: fixed; z-index: 9999; top: 0; left: 0; background: #1a1a1a; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; color: #ccc; display: block; transition: 0.3s; } .sidenav a:not(.menu-link){ font-size: 23px; } .sidenav a:hover { color: #f1f1f1; }.sidenav .fa-chevron-right{ transition:all 0.6s; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidebar{ font-size:20px; width: 40px; border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor:pointer; position: absolute; } .sidenav .collapse-icon{ font-size: 19px; } .menu-link{ font-size: 18px; } .border-menu-light{ border:1px solid #ccc; border-top: 0; border-left: 0; border-right: 0; } .border-menu-light:not(.border-menu-light:last-child):hover{ border:1px solid #fff; border-top: 0; border-left: 0; border-right: 0; } .border-menu-light:last-child{ border-bottom: 0; } @media screen and (max-height: 450px) { .sidenav .closebtn{color: #000;} .sidenav .closebtn:hover{color: #000;} } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }

$("#mySidenav").css({left:"-250px"}); $('.sidebar span, .sidebar a').click(function(){ $("#mySidenav").css({left:"0px"}); }).addClass('p-2'); $('.sidenav-close').click(function(){ $("#mySidenav").css({left:"-250px"}); });