<nav class="navbar navbar-header navbar-expand-lg mb-4">
<div class="container-fluid px-4">
  <button class="navbar-toggler p-0 me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Offcanvas Navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand d-flex align-items-center me-4" href="#">
    <img src="../../img/cfb-logo.svg" width="36" height="36" class="me-2 svg-fill-white" alt="Facts"/>
    <h4 class="fw-bold m-0">FACTS</h4>
  </a>
  <div class="offcanvas offcanvas-start flex-grow-1" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h4 class="offcanvas-title fw-bold m-0 d-flex align-items-center"><img src="../../img/cfb-logo.svg" width="36" height="36" class="me-2 svg-fill-white" alt="Facts"/> FACTS</h4>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="cancommDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Candidates & Committees <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down nav-link-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg> 
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="auditDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Audit <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down nav-link-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg> 
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="complianceDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Compliance <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down nav-link-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg> 
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Documents <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down nav-link-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg> 
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
              <li><a class="dropdown-item" href="#">Action Link</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" role="button">
              Reports <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down nav-link-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg> 
            </a>
          </li>
        </ul>
    </div>
  </div>
    <div class="d-flex align-items-center ms-auto">
      <span class="me-1">Welcome, John</span>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle p-1" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="avatar avatar-sm"><span class="avatar-title rounded-circle">SR</span></span>
        </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Sign Out</a></li>
          </ul>
      </div> 
    </div>
  <button id="theme-toggle" class="btn btn-theme-toggle p-0 ms-3 border-start ps-3" type="button">
    <span class="d-block-light d-none">
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <use href="../../img/feather-sprite.svg#moon"/>
      </svg>
    </span>
    <span class="d-block-dark d-none">
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <use href="../../img/feather-sprite.svg#sun"/>
      </svg>
    </span>
  </button>
</div>
</nav>