"SIDE NAV by John niro yumang"
Bootstrap 4.1.1 Snippet by jeanyu23

<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://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <!-- I AM THE MAIN CONTAINER --> <div class="container-fluid shadow-sm" id="global-top-nav"> <!-- I AM THE SECOND MAIN CONTAINER --> <div class="container"> <!-- I AM THE TOP NAV-BAR --> <nav class="navbar navbar-expand-lg navbar-light bg-light py-3"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand font-weight-light mx-4" href="index_controller/dashboard"> ADMIN</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <!--<li class="nav-item"> <a class="nav-link disabled" href="users.html">USERS</a> </li> --> </ul> welcome <span class="navbar-text mx-3"> username </span> <span class="navbar-text"> <button type="button" class="btn btn-outline-light btn-sm" onclick="logout" data-toggle="tooltip" data-placement="top" title="LOGOUT"><i class="fas fa-power-off fa-lg" style="color:red;"></i> </button> </span> </div> </nav> </div> </div> <!-- END OF TOP NAV CONTENTS--> <!-- I AM THE BOTTOM STICKY NAV BAR THAT CONTAINS AUTO TIME CLOCK --> <div class="container-fluid " id="global-top-nav"> <div class="container"> <div class="d-none d-lg-block col-lg-12 col-xl-12"> <nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <span class="navbar-text"> <span id="date_time"></span> <script type="text/javascript"> window.onload = date_time('date_time'); </script> </span> <ul class="navbar-nav"> <button type="button" class="btn btn-light mx-2 text-info" disabled> USERS <span class="badge badge-light">0</span> </button> <button type="button" class="btn btn-light mx-2 text-info" disabled> DISABLED <span class="badge badge-light">0</span> </button> <button type="button" class="btn btn-light mx-2 text-info" disabled> LOGIN-ATTEMPTS <span class="badge badge-light">0</span> </button> </ul> </div> <span class="navbar-text"> <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleFullScreen()"><i class="fas fa-expand-arrows-alt"></i></button> <button type="button" class="btn btn-outline-primary btn-sm" onclick="refresh()"><i class="fas fa-sync"></i></button> </span> </nav> </div> </div> </div> <!-- IM THE ONE WHO RESPOSIVE OF BODY CONTENTS --> <div class="container-fluid"> <div class="container"> <div class="row no-gutters"> <div class="col-lg-6"> <h4>LEFT CONTINER</h4> </div> <div class="col-lg-6"> <h4>RIGHT CONTINER</h4> </div> </div> </div> </div> <!--------I HOLD THE HIDDEN SIDE NAV-------> <div id="global-side-nav" class="sidenav"> <div class="container"> <div class="row"> <div class="col-lg-12 py-5" style="background-color:white;"> <div class="card border-0 shadow-none p-3 rounded-0 my-2" id="global-cards" style="max-width:auto;"> <div class="card-header bg-white border-0"> <h1 class="h3 mb-3 font-weight-light text-center text py-3" id="land-title">ADMIN</h1> </div> </div> <ul class="list-group list-group-flush"> <a href="<?php echo base_url(); ?>Form/add_user_linker" class="list-group-item list-group-item-action "> ADD USERS </a> <a href="<?php echo base_url(); ?>Form/disabled_accounts_linker" class="list-group-item list-group-item-action "> DISABLE ACCOUNTS </a> <a href="<?php echo base_url(); ?>Form/log_stamp_linker" class="list-group-item list-group-item-action "> LOG STAMP </a> <a href="<?php echo base_url(); ?>Form/notification_linker" class="list-group-item list-group-item-action "> NOTIFICAITONS </a> <a href="<?php echo base_url(); ?>Form/loggin_attempts_linker" class="list-group-item list-group-item-action "> LOGIN ATTEMPTS </a> <a href="home.php" class="list-group-item list-group-item-action " data-toggle="modal" data-target="#IPBLOCKING">DISABLE USER</a> </ul> <hr class="colorgraph my-5 mb-5"> </div> </div> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">≡</a> </div> </div>
/* global side Side Left navigation Hide/Show Navbar*/ /*side nav code*/ .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color:#fff; overflow-x: scroll; transition: 0.8s; } .sidenav a { text-decoration: none; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color:#007bff; } .sidenav .closebtn { position: absolute; top: 0; right: 35px; font-size: 4rem; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } /* Column Gutter Remover*/ .row.no-gutters { margin-right:0; margin-left:0; & > [class^="col-"], & > [class*=" col-"] { padding-right: 0; padding-left: 0; } }
// I AM THE SIDENAV BAR JAVA CODE function openNav() { document.getElementById("global-side-nav").style.width = "25%"; } function closeNav() { document.getElementById("global-side-nav").style.width = "0%"; } // I AM THE CLOCK IN THE BOTTOM NAVBAR function date_time(id) { date = new Date; year = date.getFullYear(); month = date.getMonth(); months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December'); d = date.getDate(); day = date.getDay(); days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'); h = date.getHours(); if(h<10) { h = "0"+h; } m = date.getMinutes(); if(m<10) { m = "0"+m; } s = date.getSeconds(); if(s<10) { s = "0"+s; } result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s; document.getElementById(id).innerHTML = result; setTimeout('date_time("'+id+'");','1000'); return true; } // THIS IS THE TOOLTIP KILLER $(function () { $('[data-toggle="tooltip"]').tooltip() }) // THIS IS THE JAVA FOR FULLSIZE SCREEN BUTTON function toggleFullScreen() { if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } } // I AM THE RFRESH CODE function refresh() { location.reload(); }

Related: See More

Questions / Comments: