------------------------------------------------------------------------------------------------------------------- <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dashboard</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- bootstrap css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <!-- bootstrap icon --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> <style> #short_sidebar{ width: 20px; box-shadow: 0px 0px 10px gray; height: 100vh; position: fixed; left: 0; top: 0; display: flex; justify-content: center; align-items: center; } /* RESPONSIVE START */ @media screen and (max-width: 991px){ #short_sidebar{ display: none !important; } } @media screen and (min-width: 991px){ .btn-close{ display: none; } } /* RESPONSIVE END */ /* LINK ACTIVE HOVER START */ .dropdown-item.active, .dropdown-item:active { color: white; background: black; text-decoration: none; } .nav-link{ padding: 10px 20px; border-radius: .5rem; margin: 2px 0px; } .dropdown-item{ padding: 10px 20px; border-radius: .5rem; margin-left:10%; width: 90%; } .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: white; background: black; } .dropdown-item:focus, .dropdown-item:hover { color: white; background: black; transition: .7s; } .nav-link:focus, .nav-link:hover { color: white; background: black; transition: .7s; } /* LINK ACTIVE HOVER END */ /* CARD START */ .myCard{ text-align: center; padding: 20px 0px; box-shadow: 0px 0px 5px gray; } .myCard:hover{ cursor: pointer; color: white; background: black; transition: .7s; } .myCard i{ font-size: 33px; } /* CARD END */ /* TABLE START */ .armanTableContainer{ width: 100% !important; max-height: fit-content !important; box-shadow: 0px 0px 5px gray; } .armanTableFixed{ overflow-x: scroll !important; overflow-y: scroll !important; height: fit-content !important; height: 70vh !important; } .armanTable{ min-width: max-content !important; border-collapse: separate !important; font-size:14px !important; } .armanTable th{ position: sticky !important; top: 0px !important; background-color: white !important; } .armanTable tr td, tr th{ padding: 0px 5px; } td a{ padding: 0px 5px !important; } /* TABLE END */ .navbar-nav .nav-item.dropdown:hover .dropdown-menu { display: block;transition: all .5s; } </style> </head> <body> <!-- SIDEBAR --> <nav class="navbar bg-body-tertiary fixed-top my-0 py-0"> <div class="container-fluid"> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> <div class="offcanvas-header"> <a class="navbar-brand fw-bold" href="#"> <i class="bi bi-house-fill fs-4 pe-2"></i> <!-- <img width="25" height="25" class="d-inline-block align-text-top me-2 rounded bg-dark"> --> My Dashboard </a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 ps-5 pb-5"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="./dashboard.html"> Dashboard </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu border-0 "> <li> <a class="dropdown-item " href="./index2.html"> Index </a> </li> <li> <a class="dropdown-item " href="./create.html"> Create </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link " href="./demo.html"> Demo </a> </li> </ul> <!-- <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> --> </div> </div> </div> </nav> <!-- TOPBAR --> <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" style="box-shadow: 0px 0px 10px gray;"> <div class="container"> <a class="navbar-toggler px-1 py-0 mt-2" data-bs-toggle="offcanvas" href="#offcanvasNavbar" role="button" aria-controls="offcanvasNavbar"> <!-- <span class="navbar-toggler-icon"></span> --> <i class="bi bi-list fs-1"></i> </a> <a class="navbar-brand fw-bold" href="#"> <i class="bi bi-house-fill fs-4 pe-2"></i> <!-- <img width="25" height="25" class="d-inline-block align-text-top me-2 rounded bg-dark"> --> My Dashboard </a> <button class="navbar-toggler px-1 py-0 mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <!-- <span class="navbar-toggler-icon"></span> --> <i class="bi bi-list fs-1"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link " aria-current="page" href="./index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Arman </a> <ul class="dropdown-menu"> <li><a class="w-100 mx-0 dropdown-item" href="./profile.html">Profile</a></li> <li><a class="w-100 mx-0 dropdown-item " href="./setting.html">Settings</a></li> <li><hr class="w-100 mx-0 dropdown-divider"></li> <li><a class="w-100 mx-0 dropdown-item" href="./index.html">Logout</a></li> </ul> </li> </ul> <!-- <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> --> </div> </div> </nav> <!-- HOVER-SECTION --> <div id="short_sidebar" class="bg-light"> <i class="bi bi-caret-right-fill"></i> </div> <div class="container-fluid py-3 ps-md-5 pe-md-4"> <!-- DASHBOARD CONTENT --> <div class="row justify-content-center pb-4"> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-2"> <div class="card myCard"> <i class="bi bi-cpu-fill"></i> <h3>Total Products</h3> <h3>134</h3> </div> </div> </div> </div> <!-- bootstrap js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <!-- OFFCANVAS HIDE & SHOW START --> <script> const hoverSection = document.querySelector('#short_sidebar'); const offcanvas = document.querySelector('.offcanvas'); let isHovered = false; hoverSection.addEventListener('mouseenter', () => { isHovered = true; showOffcanvas(); }); offcanvas.addEventListener('mouseenter', () => { isHovered = true; showOffcanvas(); }); hoverSection.addEventListener('mouseleave', () => { isHovered = false; hideOffcanvas(); }); offcanvas.addEventListener('mouseleave', () => { isHovered = false; hideOffcanvas(); }); function showOffcanvas() { offcanvas.classList.add('show'); } function hideOffcanvas() { if (!isHovered) { offcanvas.classList.remove('show'); } } </script> <!-- OFFCANVAS HIDE & SHOW END --> </body> </html> -------------------------------------------------------------------------------------------------------------------