<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow no-print">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#"><i class="fa-solid fa-chart-line"></i> TA Guide</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <form class="w-100" action="/search" method="post">
    <input class="form-control-dark form-control-dark form-control w-100 rounded-0 border-0" name="searchQuery" type="text" placeholder="Search Candidate Lastname" aria-label="Search">
    <button type="submit" class="navbar-toggler position-absolute d-none" name="button">Search</button>
  </form>
  <div class="navbar-nav">
    <div class="nav-item text-nowrap ">
      <a class="nav-link px-3 d-none d-md-block" href="/logout">Sign out</a>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse no-print">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/dashboard">
              <span data-feather="home" class="align-text-bottom"></span>
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/settings">
              <span data-feather="users" class="align-text-bottom"></span>
              My Settings
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/reports">
              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/logs">
              <span data-feather="calendar" class="align-text-bottom"></span>
              Actions Log
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/api">
              <span data-feather="layers" class="align-text-bottom"></span>
              API Integrations
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/help">
              <span data-feather="file" class="align-text-bottom"></span>
              Help FAQ
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mailto:support@ta-guide.herokuapp.com?subject=Feedback">
              <span data-feather="phone-call" class="align-text-bottom"></span>
              Contact Technical Support
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/logout">
              <span data-feather="log-out" class="align-text-bottom"></span>
              Sign Out
            </a>
          </li>
        </ul>


      </div>
    </nav>
