Admin Dashboard

BootStrap 5 - Responsive Emerald QuickAccess Sidebar

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />

<div class="body" id="body-pd">
      <header class="header" id="header">
        <div class="header_toggle">
          <i class="bx bx-menu" id="header-toggle"></i>
        </div>
        <div class="header_img">
          <img
            src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="Profile photo"
          />
        </div>
      </header>

      <div class="left-navbar" id="nav-bar">
        <nav class="nav">
          <div>
            <a href="#" class="nav_logo">
              <i class="bx bx-diamond nav_logo-icon"></i>
              <span class="nav_logo-name">SnipCraft</span>
            </a>

            <div class="nav_list">
              <a href="#" class="nav_link">
                <i class="bx bxs-dashboard nav_icon"></i>
                <span class="nav_name">Dashboard</span>
              </a>

              <a href="#" class="nav_link active">
                <i class="bx bx-book-reader nav_icon"></i>
                <span class="nav_name">Blogs</span>
              </a>

              <a href="#" class="nav_link">
                <i class="bx bx-category-alt nav_icon"></i>
                <span class="nav_name">Categories</span>
              </a>

              <a href="#" class="nav_link">
                <i class="bx bx-menu-alt-left nav_icon"></i>
                <span class="nav_name">Tools</span>
              </a>

              <a href="#" class="nav_link">
                <i class="bx bx-file nav_icon"></i>
                <span class="nav_name">Templates</span>
              </a>

              <a href="#" class="nav_link">
                <i class="bx bx-purchase-tag-alt nav_icon"></i>
                <span class="nav_name">SEO</span>
              </a>
            </div>
          </div>

          <a href="#" class="nav_link">
            <i class="bx bx-log-out nav_icon"></i>
            <span class="nav_name">Logout</span>
          </a>
        </nav>
      </div>

      <div class="main-container">Main Content of the Page</div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function (event) {
        const showNavbar = (toggleId, navId, bodyId, headerId) => {
          const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId);

          // Validate that all variables exist
          if (toggle && nav && bodypd && headerpd) {
            toggle.addEventListener("click", () => {
              // show navbar
              nav.classList.toggle("show");
              // change icon
              toggle.classList.toggle("bx-x");
              // add padding to body
              bodypd.classList.toggle("body-pd");
              // add padding to header
              headerpd.classList.toggle("body-pd");
            });
          }
        };

        showNavbar("header-toggle", "nav-bar", "body-pd", "header");

        /*===== LINK ACTIVE =====*/
        const linkColor = document.querySelectorAll(".nav_link");

        function colorLink() {
          if (linkColor) {
            linkColor.forEach((l) => l.classList.remove("active"));
            this.classList.add("active");
          }
        }
        linkColor.forEach((l) => l.addEventListener("click", colorLink));

        // Your code to run since DOM is loaded and ready
      });
    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

      :root {
        --header-height: 3rem;
        --nav-width: 68px;
        --body-font: "Nunito", sans-serif;
        --normal-font-size: 1rem;
        --z-fixed: 100;
        --white-color: #ecf0f1;
        --nav-link-color: #a9dfbf;
        --active-color: #00b12b;
      }

      *,
      ::before,
      ::after {
        box-sizing: border-box;
      }

      .body {
        position: relative;
        margin: var(--header-height) 0 0 0;
        padding: 0 1rem;
        font-family: var(--body-font);
        font-size: var(--normal-font-size);
        transition: 0.5s;
      }

      .body a {
        text-decoration: none;
      }

      .header {
        width: 100%;
        height: var(--header-height);
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        background-color: var(--nav-link-color);

        z-index: var(--z-fixed);
        transition: 0.5s;
      }
      .header_toggle {
        cursor: pointer;
        font-size: 1.5rem;
      }
      .header_img {
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
      }
      .header_img img {
        width: 60px;
      }

      .left-navbar {
        position: fixed;
        top: 0;
        left: -30%;
        width: var(--nav-width);
        height: 100vh;
        background-color: #000;
        padding: 0.5rem 1rem 0 0;
        transition: 0.5s;
        z-index: var(--z-fixed);
      }
      .nav {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
      }
      .nav_logo,
      .nav_link {
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: center;
        column-gap: 1rem;
        padding: 0.5rem 0 0.5rem 1.5rem;
      }
      .nav_logo {
        margin-bottom: 2rem;
      }
      .nav_logo-icon {
        font-size: 1.25rem;
        color: var(--white-color);
      }
      .nav_logo-name {
        color: var(--white-color);
        font-weight: 700;
      }
      .nav_link {
        position: relative;
        color: var(--nav-link-color);
        margin-bottom: 1.5rem;
        transition: 0.3s;
      }
      .nav_link:hover {
        color: var(--active-color);
      }
      .nav_icon {
        font-size: 1.25rem;
      }
      .show {
        left: 0;
      }
      .body-pd {
        padding-left: calc(var(--nav-width) + 1rem);
      }
      .active {
        color: var(--active-color);
      }
      .active::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(--active-color);
      }
      .height-100 {
        height: 100vh;
      }
      .main-container {
        padding: 25px 0;
        font-weight: 700;
      }

      @media screen and (min-width: 768px) {
        .body {
          margin: calc(var(--header-height) + 1rem) 0 0 0;
          padding-left: calc(var(--nav-width) + 2rem);
        }
        .header {
          height: calc(var(--header-height) + 1rem);
          padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
        }
        .header_img {
          width: 35px;
          height: 35px;
        }
        .header_img img {
          width: 45px;
        }
        .left-navbar {
          left: 0;
          padding: 1rem 1rem 0 0;
        }
        .show {
          width: calc(var(--nav-width) + 156px);
        }
        .body-pd {
          padding-left: calc(var(--nav-width) + 188px);
        }
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Bootstrap 5 - Responsive Sapphire Colored Sidebar Template

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />

<div class="body" id="body-padd">
      <header
        class="header d-flex align-items-center justify-content-between"
        role="navigation"
        id="header"
      >
        <div class="header-toggle" id="header_toggle">
          <i class="bx bx-menu" id="header_toggle_icon"></i>
        </div>

        <div class="d-flex justify-content-end align-items-center">
          <i class="header-icon bx bx-bell me-4"></i>
          <i class="header-icon bx bx-message-rounded-dots me-4"></i>
          <i class="header-icon bx bx-help-circle me-4"></i>

          <div class="header-user d-flex align-items-center px-2 px-md-4">
            <img
              src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              alt="profile picture"
              class="rounded-circle border border-2 m-0 me-md-2 d-none d-md-block"
            />
            <div class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle d-none d-md-block"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                John Doe
              </a>
              <!-- element to use in small screens -->
              <a
                class="nav-link d-block d-md-none"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img
                  src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="profile picture"
                  class="small-screen-image rounded-circle border border-1 m-0 d-block d-md-none"
                />
              </a>
              <ul class="dropdown-menu dropdown-menu-end mt-3">
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li><a class="dropdown-item" href="#">Dashboard</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Logout</a></li>
              </ul>
            </div>
          </div>
        </div>
      </header>

      <div class="left-navbar" id="nav-bar">
        <nav class="nav d-flex flex-column h-100">
          <div class="left-navbar-user">
            <img
              src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              alt="profile picture"
              class="rounded-circle border border-2 me-2"
            />
            <div class="">
              <span class="user-name d-block">John Doe</span>
              <span class="user-status d-block">Online</span>
            </div>
          </div>

          <div>
            <a href="#" class="nav-logo">
              <i class="bx bxl-unity nav-logo-icon me-3"></i>
              <span class="nav-logo-name">SnipCraft</span>
            </a>

            <hr class="m-0 mb-4 navbar-hrz-line" />

            <div class="nav-list">
              <a href="#" class="custom-nav-link">
                <i class="bx bxs-dashboard nav-icon me-3"></i>
                <span class="nav-name">Dashboard</span>
              </a>

              <a href="#" class="custom-nav-link active">
                <i class="bx bx-book-reader nav-icon me-3"></i>
                <span class="nav-name">Blogs</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-category-alt nav-icon me-3"></i>
                <span class="nav-name">Categories</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-menu-alt-left nav-icon me-3"></i>
                <span class="nav-name">Tools</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-file nav-icon me-3"></i>
                <span class="nav-name">Templates</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-table nav-icon me-3"></i>
                <span class="nav-name">Tables</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-tv nav-icon me-3"></i>
                <span class="nav-name">Apps</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-map-alt nav-icon me-3"></i>
                <span class="nav-name">Map</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bxs-contact nav-icon me-3"></i>
                <span class="nav-name">Contact</span>
              </a>

              <a href="#" class="custom-nav-link">
                <i class="bx bx-line-chart nav-icon me-3"></i>
                <span class="nav-name">Charts</span>
              </a>
            </div>
          </div>
        </nav>
      </div>

      <div class="p-4">
        <h3>Dashboard Content</h3>
      </div>
    </div>
    <!-- .body -->

    <script>
      document.addEventListener("DOMContentLoaded", function (event) {
        const showNavbar = (
          toggleId,
          toggleIconId,
          navId,
          bodyId,
          headerId
        ) => {
          const toggle = document.getElementById(toggleId),
            toggleicon = document.getElementById(toggleIconId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId);

          // Validate that all variables exist
          if (toggle && toggleicon && nav && bodypd && headerpd) {
            toggle.addEventListener("click", () => {
              // show navbar
              nav.classList.toggle("show-nav");
              // change icon
              toggleicon.classList.toggle("bx-x");
              // add padding to body
              bodypd.classList.toggle("body-padd");
              // add padding to header
              headerpd.classList.toggle("body-padd");
            });
          }
        };

        showNavbar(
          "header_toggle",
          "header_toggle_icon",
          "nav-bar",
          "body-padd",
          "header"
        );

        /*===== LINK ACTIVE =====*/
        const linkColor = document.querySelectorAll(".custom-nav-link");

        function colorLink() {
          if (linkColor) {
            linkColor.forEach((l) => l.classList.remove("active"));
            this.classList.add("active");
          }
        }
        linkColor.forEach((l) => l.addEventListener("click", colorLink));

        // Your code to run since DOM is loaded and ready
      });
    </script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
      :root {
        --nav-width: 85px;
        --normal-font-size: 1rem;
        --header-height: 3rem;
        --header-bg: #a0153e;
        --navbar-bg: #00224d;
        --navbar-user-bg: #ff204e;
        --left-navbar-user-bg: #003980;
        --navlink-color: #e2dfd0;
        --active-color: #ff204e;
      }
      .body {
        position: relative;
        font-family: "Nunito", sans-serif;
        font-size: var(--normal-font-size);
        margin: var(--header-height) 0 0 0;
        transition: 0.5s;
      }
      .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height);
        padding-left: 1rem;
        background-color: var(--header-bg);
        transition: 0.5s;
        z-index: 100;
      }
      .header-toggle {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--header-height);
        margin-left: -1rem;
        color: var(--navlink-color);
        font-size: 1.3rem;
        cursor: pointer;
      }
      .header-icon {
        cursor: pointer;
        font-size: 1.2rem;
        color: var(--navlink-color);
      }
      .header-icon:hover {
        color: var(--active-color);
      }
      .header-user {
        height: var(--header-height);
        background-color: var(--navbar-user-bg);
        transition: 0.5s;
      }
      .header-user img {
        width: 30px;
      }
      .header-user .small-screen-image {
        width: 25px;
      }
      .left-navbar {
        position: fixed;
        top: 0;
        left: -30%;
        width: var(--nav-width);
        height: 100vh;
        padding: 0 1rem 0 0;
        z-index: 100;
        transition: 0.5s;
      }
      .nav {
        background-color: var(--navbar-bg);
        overflow: hidden;
      }
      .left-navbar-user {
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: center;
        column-gap: 1rem;
        padding: 1.2rem 0 1.2rem 0.9rem;
        background-color: var(--left-navbar-user-bg);
      }
      .left-navbar-user img {
        width: 40px;
      }
      .user-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--navlink-color);
      }
      .user-status {
        font-size: 0.8rem;
        color: greenyellow;
      }
      .user-status::before {
        content: "\A";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: greenyellow;
        display: inline-block;
        margin-right: 5px;
      }
      .navbar-hrz-line {
        border-bottom: 2px solid #fff;
      }
      .body a {
        text-decoration: none;
      }
      .nav-logo,
      .custom-nav-link {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 1rem;
        align-items: center;
        padding: 0.5rem 0 0.5rem 1.5rem;
      }
      .nav-logo {
        font-size: 1.25rem;
        font-weight: 700;
        color: #fff;
      }
      .custom-nav-link {
        position: relative;
        margin-bottom: 0.5rem;
        color: var(--navlink-color);
        transition: 0.3s;
      }
      .custom-nav-link:hover {
        color: var(--active-color);
      }
      .nav-icon {
        font-size: 1.25rem;
      }
      .active {
        color: var(--active-color);
        background-color: #003980;
      }
      .active::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 39px;
        background-color: var(--active-color);
      }
      .body-padd {
        padding-left: calc(var(--nav-width));
      }
      .show-nav {
        left: 0;
      }
      .height-100 {
        height: 100vh;
      }

      @media screen and (min-width: 768px) {
        .body {
          margin: calc(var(--header-height) + 1rem) 0 0 0;
          padding-left: calc(var(--nav-width));
        }
        .header {
          height: calc(var(--header-height) + 1rem);
          padding-left: calc(var(--nav-width));
        }
        .header-toggle,
        .header-icon {
          font-size: 1.5rem;
        }
        .header-user {
          height: calc(var(--header-height) + 1rem);
        }
        .header-user img {
          width: 40px;
        }
        .left-navbar {
          left: 0;
        }
        .left-navbar-user {
          padding: 1.5rem 0 1.5rem 0.4rem;
        }
        .left-navbar-user img {
          width: 55px;
        }
        .show-nav {
          width: calc(var(--nav-width) + 156px);
        }
        .body-padd {
          padding-left: calc(var(--nav-width) + 156px);
        }
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

BootStrap 5 - Adaptive Admin Panel with Sidebar and Topbar

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />

<div class="body" id="body-padd">
      <header
        class="header d-flex justify-content-between align-items-center"
        id="header"
      >
        <div
          class="nav-control-box d-flex align-items-center"
          id="nav-control-bxx"
        >
          <h2 class="org-name d-none d-lg-block" id="org-name">SnipCraft</h2>
          <div class="header-toggle mx-auto mx-lg-0">
            <i class="bx bx-menu" id="header-toggle"></i>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center w-100">
          <div
            class="menu-div d-flex justify-content-center align-items-center"
          >
            <div class="search-container ms-4 mx-sm-3 ms-xl-5 me-xl-4">
              <div class="search-box">
                <button
                  class="btn-search d-flex justify-content-center align-items-center"
                >
                  <i class="bx bx-search"></i>
                </button>
                <input
                  type="text"
                  class="input-search"
                  placeholder="Type to Search..."
                />
              </div>
            </div>
            <div class="d-none d-sm-block">
              <div class="nav-item dropdown me-2 me-xl-3">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <i class="bx bx-food-menu"></i>
                  <span>Menu</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end mt-3">
                  <li><a class="dropdown-item" href="#">Menu 1</a></li>
                  <li><a class="dropdown-item" href="#">Menu 2</a></li>
                  <li><hr class="dropdown-divider" /></li>
                  <li><a class="dropdown-item" href="#">Menu 3</a></li>
                </ul>
              </div>
            </div>
            <div class="d-none d-sm-block">
              <div class="nav-item dropdown me-2 me-xl-3">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <i class="bx bx-cog"></i>
                  <span>Settings</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end mt-3">
                  <li><a class="dropdown-item" href="#">Setting 1</a></li>
                  <li><a class="dropdown-item" href="#">Setting 2</a></li>
                  <li><hr class="dropdown-divider" /></li>
                  <li><a class="dropdown-item" href="#">Setting 3</a></li>
                </ul>
              </div>
            </div>
            <div class="d-none d-sm-block">
              <div class="nav-item dropdown me-2 me-xl-3">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <i class="bx bx-message-square-dots"></i>
                  <span>Projects</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end mt-3">
                  <li><a class="dropdown-item" href="#">Project 1</a></li>
                  <li><a class="dropdown-item" href="#">Project 2</a></li>
                  <li><hr class="dropdown-divider" /></li>
                  <li><a class="dropdown-item" href="#">Project 3</a></li>
                </ul>
              </div>
            </div>
          </div>
          <!-- .menu-div -->

          <h2 class="mobile-org-name d-block d-sm-none" id="org-name">
            SnipCraft
          </h2>

          <div
            class="profile-div d-flex justify-content-center align-items-center"
          >
            <div
              class="header-icon-container d-none d-sm-flex justify-content-center align-items-center rounded-circle bg-primary bg-opacity-10 me-2 me-xl-3"
            >
              <i class="bx bxs-grid text-primary"></i>
            </div>
            <div
              class="header-icon-container d-none d-sm-flex justify-content-center align-items-center rounded-circle bg-danger bg-opacity-10 me-2 me-xl-3"
            >
              <i class="bx bxs-bell text-danger"></i>
            </div>
            <div
              class="header-icon-container d-none d-sm-flex justify-content-center align-items-center rounded-circle bg-success bg-opacity-10"
            >
              <i class="bx bxs-flag-alt text-success"></i>
            </div>

            <div class="vertical-line mx-3 mx-xl-4 d-none d-sm-block"></div>

            <div class="nav-item dropdown me-2 me-xl-3">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img
                  src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="profile picture"
                  class="user-picture rounded-circle border border-1 m-0"
                />
              </a>
              <ul class="dropdown-menu dropdown-menu-end mt-3">
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li><a class="dropdown-item" href="#">Dashboard</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Logout</a></li>
              </ul>
            </div>

            <div
              class="d-none d-lg-flex flex-column justify-content-center align-items-start"
            >
              <span class="user-name fw-bold">John Doe</span>
              <span class="user-designation">Assistant HR Manager</span>
            </div>
          </div>
          <!-- .profile-div -->
        </div>
      </header>

      <!--======= Left Navbar  =========-->

      <div class="left-navbar" id="nav-bar">
        <nav class="nav">
          <div class="accordion" id="nav-accordion">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingOne">
                <button
                  class="accordion-button"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseOne"
                  aria-expanded="true"
                  aria-controls="collapseOne"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bxs-dashboard nav-top-icon"></i>
                    <span>Dashboard</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseOne"
                class="accordion-collapse collapse show"
                aria-labelledby="headingOne"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bx-analyse nav-icon me-3"></i>
                      <span class="nav-name">Analytics</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bx-money nav-icon me-3"></i>
                      <span class="nav-name">Commerce</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bx-cart-download nav-icon me-3"></i>
                      <span class="nav-name">Sales</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bx-shield-minus nav-icon me-3"></i>
                      <span class="nav-name">Minimal</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bx-hard-hat nav-icon me-3"></i>
                      <span class="nav-name">CRM</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingTwo">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseTwo"
                  aria-expanded="false"
                  aria-controls="collapseTwo"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bx-category-alt nav-top-icon"></i>
                    <span>Pages</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseTwo"
                class="accordion-collapse collapse"
                aria-labelledby="headingTwo"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Home</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Contact</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Summary</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Credits</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">About</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingThree">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseThree"
                  aria-expanded="false"
                  aria-controls="collapseThree"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bx-tv nav-top-icon"></i>
                    <span>Applications</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseThree"
                class="accordion-collapse collapse"
                aria-labelledby="headingThree"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Color Tools</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">CSS Generator</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Editor</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">SEO</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Templates</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingFour">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseFour"
                  aria-expanded="false"
                  aria-controls="collapseFour"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bx-selection nav-top-icon"></i>
                    <span>Elements</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseFour"
                class="accordion-collapse collapse"
                aria-labelledby="headingFour"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Analytics</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Commerce</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Sales</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Minimal</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">CRM</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="headingFive">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseFive"
                  aria-expanded="false"
                  aria-controls="collapseFive"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bxs-component nav-top-icon"></i>
                    <span>Components</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseFive"
                class="accordion-collapse collapse"
                aria-labelledby="headingFive"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Component 1</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Component 2</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Component 3</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Component 4</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Component 5</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="headingSix">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseSix"
                  aria-expanded="false"
                  aria-controls="collapseSix"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bx-table nav-top-icon"></i>
                    <span>Tables</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseSix"
                class="accordion-collapse collapse"
                aria-labelledby="headingSix"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Table 1</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Table 2</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Table 3</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Table 4</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Table 5</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="headingSeven">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseSeven"
                  aria-expanded="false"
                  aria-controls="collapseSeven"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bxs-widget nav-top-icon"></i>
                    <span>Dashboard Widgets</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseSeven"
                class="accordion-collapse collapse"
                aria-labelledby="headingSeven"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Widget 1</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Widget 2</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Widget 3</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Widget 4</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Widget 5</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="headingEight">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#collapseEight"
                  aria-expanded="false"
                  aria-controls="collapseEight"
                >
                  <div class="custom-top-nav-link">
                    <i class="bx bx-rfid nav-top-icon"></i>
                    <span>Forms</span>
                  </div>
                </button>
              </h2>
              <div
                id="collapseEight"
                class="accordion-collapse collapse"
                aria-labelledby="headingEight"
                data-bs-parent="#nav-accordion"
              >
                <div class="accordion-body">
                  <div>
                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Form 1</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Form 2</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Form 3</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Form 4</span>
                    </a>

                    <a href="#" class="custom-nav-link">
                      <i class="bx bxs-dashboard nav-icon me-3"></i>
                      <span class="nav-name">Form 5</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- accordion -->
        </nav>
      </div>

      <div class="main-content">
        <h3>Main Content of the Page</h3>
      </div>
    </div>
    <!-- .body -->

    <script>
      document.addEventListener("DOMContentLoaded", function (event) {
        const showNavbar = (
          toggleId,
          navId,
          bodyId,
          headerId,
          controlBoxId,
          orgNameId
        ) => {
          const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            controlbx = document.getElementById(controlBoxId),
            orgname = document.getElementById(orgNameId);

          // Validate that all variables exist
          if (toggle && nav && bodypd && headerpd && controlbx && orgname) {
            toggle.addEventListener("click", () => {
              // show navbar
              nav.classList.toggle("hide-nav");
              // change icon
              toggle.classList.toggle("bx-menu-alt-left");
              // add padding to body
              bodypd.classList.toggle("body-padd");
              // add padding to header
              headerpd.classList.toggle("body-padd");
              // add class to control box div
              controlbx.classList.toggle("control-bxx");
              controlbx.classList.toggle("justify-content-center");

              orgname.classList.toggle("hide-org-name");
              orgname.classList.toggle("d-lg-block");
            });
          }
        };

        showNavbar(
          "header-toggle",
          "nav-bar",
          "body-padd",
          "header",
          "nav-control-bxx",
          "org-name"
        );

        /*===== LINK ACTIVE =====*/
        const linkColor = document.querySelectorAll(".nav_link");

        function colorLink() {
          if (linkColor) {
            linkColor.forEach((l) => l.classList.remove("active"));
            this.classList.add("active");
          }
        }
        linkColor.forEach((l) => l.addEventListener("click", colorLink));

        // Your code to run since DOM is loaded and ready
      });
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Playwrite+HR:wght@100..400&display=swap");

      :root {
        --header-height: 2.5rem;
        --nav-width: 80px;
        --large-nav-width: 180px;
        --normal-font-size: 1rem;
        --bg-transparent: transparent;
        --custom-accordion-btn-icon-width: 0.6rem;
        --nav-top-link-color: #3abef9;
        --nav-link-color: #22a6b3;
      }
      .body {
        position: relative;
        font-family: "Nunito", sans-serif;
        font-size: var(--normal-font-size);
        padding: var(--header-height) 0 0 0;
        transition: 0.5s;
      }
      .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height);
        padding: 0 15px 0 50px;
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
          0px 4px 6px -4px rgba(194, 193, 193, 1);
        transition: 0.5s;
        z-index: 100;
      }
      .body.body-padd {
        padding-left: var(--nav-width);
      }
      .nav-control-box {
        position: absolute;
        left: 0;
        width: var(--nav-width);
        height: var(--header-height);
        padding: 0 1rem;
        transition: 0.5s;
      }
      .org-name,
      .mobile-org-name {
        font-family: "Playwrite HR", cursive;
        font-weight: 400;
      }
      .org-name {
        font-size: 1.15rem;
      }
      .mobile-org-name {
        font-size: 1rem;
      }
      .header-toggle {
        font-size: 1.5rem;
      }

      .menu-div {
        font-size: 0.7rem;
        color: gray;
      }

      /***** Search box css  ******/
      .search-container {
        font-family: "Lato" !important;
      }
      .search-box {
        width: fit-content;
        height: fit-content;
        position: relative;
      }
      .input-search {
        height: 25px;
        width: 25px;
        border-style: none;
        padding: 15px;
        font-size: 1rem;
        letter-spacing: 2px;
        outline: none;
        border-radius: 50%;
        transition: all 0.5s ease-in-out;
        background-color: var(--nav-top-link-color);
        color: #fff;
      }
      .input-search::placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        letter-spacing: 1px;
        font-weight: 100;
      }
      .btn-search {
        width: 30px;
        height: 30px;
        border-style: none;
        font-size: 1.2rem;
        font-weight: bold;
        outline: none;
        cursor: pointer;
        border-radius: 50%;
        position: absolute;
        right: 0px;
        color: #ffffff;
        background-color: transparent;
        pointer-events: painted;
      }
      .btn-search:focus ~ .input-search {
        width: 150px;
        border-radius: 25px;
        background-color: var(--nav-top-link-color);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
      }
      .input-search:focus {
        width: 150px;
        border-radius: 25px;
        background-color: var(--nav-link-color);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
      }
      /***** Search box css  ******/

      .header-icon-container {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .header-icon-container:hover {
        background-color: rgba(196, 194, 194, 0.5) !important;
      }
      .header-icon-container:hover .bx {
        color: #000 !important;
      }

      .vertical-line {
        height: 20px;
        border-left: 2px solid lightgray;
      }
      .user-picture {
        width: 30px;
      }

      .user-name {
        color: darkslategray;
      }
      .user-designation {
        font-size: 0.8rem;
        color: darkgray;
      }

      .left-navbar {
        background: rgb(79, 76, 130);
        background: linear-gradient(
          118deg,
          rgba(79, 76, 130, 1) 0%,
          rgba(23, 23, 133, 1) 33%,
          rgba(9, 159, 189, 1) 100%
        );
        position: fixed;
        top: 0;
        left: -30%;
        width: var(--nav-width);
        min-height: 100vh;
        margin: var(--header-height) 0 0 0;
        padding: 1rem 1rem 0 0;
        transition: 0.5s;
        z-index: 100;
      }
      .hide-nav {
        left: 0;
      }
      .nav {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .custom-top-nav-link,
      .custom-nav-link {
        display: grid;
        grid-template-columns: max-content max-content;
      }
      .custom-top-nav-link {
        column-gap: 1.5rem;
        color: var(--nav-top-link-color);
      }
      .custom-nav-link {
        align-items: center;
        column-gap: 1rem;
        padding: 0.5rem 0 0.5rem 1rem;
        text-decoration: none;
        color: var(--nav-link-color);
      }
      .accordion-button::after {
        width: var(--custom-accordion-btn-icon-width) !important;
        height: var(--custom-accordion-btn-icon-width) !important;
        background-size: var(--custom-accordion-btn-icon-width) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A7E6FF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
      }
      .accordion-button,
      .accordion-button:not(.collapsed),
      .accordion-item {
        background-color: var(--bg-transparent) !important;
      }
      .accordion-button {
        padding-right: 0 !important;
        padding-left: 1.8rem !important;
      }
      .accordion-button:not(.collapsed) {
        box-shadow: none !important;
      }
      .accordion-button:focus {
        box-shadow: none !important;
      }
      .accordion-item {
        border: none !important;
      }
      .main-content {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        margin: var(--header-height) 0 0 0;
        background-color: lightgray;
        padding: 25px;
        transition: 0.5s;
      }

      @media (min-width: 576px) and (max-width: 991px) {
        .body {
          padding: var(--header-height) 0 0 var(--nav-width);
        }
        .header {
          height: calc(var(--header-height) + 0.5rem);
          padding-left: var(--nav-width);
        }
        .body.body-padd {
          padding-left: 0px;
        }
        .header.body-padd {
          padding-left: var(--nav-width);
        }
        .nav-control-box {
          width: var(--nav-width);
        }

        /***** Search box css  ******/
        .input-search::placeholder {
          font-size: 1rem;
          letter-spacing: 1.5px;
        }
        .btn-search:focus ~ .input-search {
          width: 200px;
        }
        .input-search:focus {
          width: 200px;
        }

        .menu-div {
          font-size: 0.9rem;
        }
        .header-icon-container {
          width: 35px;
          height: 35px;
          font-size: 1rem;
        }

        .vertical-line {
          height: 25px;
        }
        .user-picture {
          width: 35px;
        }

        .left-navbar {
          left: 0;
          width: var(--nav-width);
          margin: calc(var(--header-height) + 0.5rem) 0 0 0;
        }
        .hide-nav {
          left: -30%;
        }
        .main-content {
          margin: calc(var(--header-height) + 0.5rem) 0 0 0;
        }
      }
      @media screen and (min-width: 992px) {
        .body {
          padding-left: calc(var(--nav-width) + var(--large-nav-width));
        }
        .header {
          height: calc(var(--header-height) + 1rem);
          padding-left: calc(var(--nav-width) + var(--large-nav-width));
        }
        .body-padd {
          padding-left: var(--nav-width);
        }
        .nav-control-box {
          width: calc(var(--nav-width) + var(--large-nav-width));
          justify-content: space-between;
        }

        /***** Search box css  ******/
        .input-search::placeholder {
          font-size: 1.1rem;
          letter-spacing: 2px;
        }
        .btn-search:focus ~ .input-search {
          width: 250px;
        }
        .input-search:focus {
          width: 250px;
        }

        .menu-div {
          font-size: 1rem;
        }
        .header-icon-container {
          width: 40px;
          height: 40px;
          font-size: 1.2rem;
        }

        .vertical-line {
          height: 30px;
        }
        .user-picture {
          width: 40px;
        }

        .left-navbar {
          left: 0;
          width: calc(var(--nav-width) + var(--large-nav-width));
          margin: calc(var(--header-height) + 1rem) 0 0 0;
        }
        .hide-nav {
          width: var(--nav-width);
        }
        .hide-nav .nav-control-box {
          width: var(--nav-width);
        }
        .control-bxx {
          width: var(--nav-width);
        }
        .hide-org-name {
          display: none !important;
        }
        .main-content {
          margin: calc(var(--header-height) + 1rem) 0 0 0;
        }
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Admin Dashboard

BootStrap 5 - Responsive Emerald QuickAccess Sidebar

Bootstrap 5 - Responsive Sapphire Colored Sidebar Template

BootStrap 5 - Adaptive Admin Panel with Sidebar and Topbar

AdBlock Detected!