Admin Dashboard

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"

        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"

        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="

        crossorigin="anonymous" referrerpolicy="no-referrer" />

​

    <div class="side-bar bg-dark">

​

        <h5>Start Bootstrap</h5>

​

        <div class="span">

            <span>CORE</span>

            <ul>

                <li><a href="#"><i class="fas fa-tachometer-alt me-2"></i>Dashboard</a></li>

            </ul>

            <span>INTERFACE</span>

            <ul>

                <li><a href="#"><i class="fas fa-th-large me-2"></i>Layouts <i class="fas fa-angle-right"></i></a></li>

                <li class="mt-4"><a href="#"><i class="fa-solid fa-file me-2"></i>Pages<i

                            class="fas fa-angle-right"></i></a></li>

            </ul>

            <span>Addons</span>

            <ul>

                <li><a href="#"><i class="fa-solid fa-chart-simple me-2"></i>Charts<i

                            class="fas fa-angle-right"></i></a></li>

                <li class="mt-4"><a href="#"><i class="fa-solid fa-table me-2"></i>Tables<i

                            class="fas fa-angle-right"></i></a></li>

            </ul>

        </div>

        <div class="side-bar-footer bg-dark">

            <span>Logged in as :</span>

            <h5 class="ps-0">Start Bootstrap</h5>

        </div>

    </div>

​

    <div class="nav bg-dark">

        <div class="search-bar">

            <input type="text" placeholder="Search...">

            <button type="submit"><i class="fas fa-search"></i></button>

        </div>

​

        <div class="dropdown mt-3">

            <button class="btn dropdown-toggle text-grey" type="button" id="dropdownMenuButton" data-toggle="dropdown"

                aria-haspopup="true" aria-expanded="false">

                <i class="fa-solid fa-user"></i>

            </button>

            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                <a class="dropdown-item" href="#">Logout</a>

            </div>

        </div>

​

    </div>

​

​

    <div class="container p-3" style="margin-left: 18%; width: 82%;">

        <h4>Dashboard</h4>

    </div>

​

​

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"

        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"

        crossorigin="anonymous"></script>

​

​

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"

        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"

        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"

        crossorigin="anonymous"></script>

   .side-bar {

            position: absolute;

            z-index: 1000;

            width: 18%;

            height: auto;

            background-color: black;

            color: #ffffff;

        }

​

        .side-bar h5 {

            padding: 20px 13px;

        }

​

        .span {

            padding: 10px 13px;

        }

​

        .span span {

            font-size: 13px;

            font-weight: bold;

            letter-spacing: 1px;

            color: gray;

        }

​

        ul {

            margin: 0;

            padding: 20px 0;

        }

​

        ul li {

            list-style: none;

            color: gray;

        }

​

        ul li a {

            color: grey;

            text-decoration: none;

            display: flex;

            align-items: center;

        }

​

        ul li a:hover {

            color: white;

        }

​

        .fa-angle-right {

            margin-left: auto;

            font-size: 15px;

        }

​

        .side-bar-footer {

            color: grey;

            padding: 20px 13px;

            width: 100%;

            height: 100px;

            margin: 7px 0px;

        }

​

        /* navbar */

​

        .nav {

            overflow: hidden;

            color: white;

        }

​

​

        .search-bar {

            display: flex;

            align-items: center;

            max-width: 600px;

            margin-top: 5px;

            margin-bottom: 5px;

            margin-left: 66%;

            border-radius: 5px;

            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

            padding: 8px;

        }

​

        .search-bar input[type="text"] {

            flex: 1;

            border: none;

            padding: 7px;

            border-radius: 5px 0 0 5px;

            outline: none;

        }

​

        .search-bar button {

            background-color: #007bff;

            border: none;

            color: white;

            padding: 7px 15px;

            border-radius: 0 5px 5px 0;

            cursor: pointer;

            transition: background-color 0.3s;

        }

​

        .search-bar button:hover {

            background-color: #0056b3;

        }

​

        .dropdown {

            margin: 0px 5px;

            width: 10%;

            position: absolute;

            z-index: 2000;

            right: 3%;

            /* overflow: h  idden; */

        }

​

        .dropdown i {

            color: grey;

            font-size: 20px;

        }

​

        .text-grey {

            color: grey;

        }