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

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

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

@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

Admin Dashboard

Bootstrap 5 - Responsive Sapphire Colored Sidebar Template

AdBlock Detected!