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

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

@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

Admin Dashboard

BootStrap 5 - Responsive Emerald QuickAccess Sidebar

AdBlock Detected!