Admin Dashboard

<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);

        }

      }

<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);

        }

      }

<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">