<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <i class="bi bi-fire"></i>
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mt-2 mb-lg-0">
        <ul
          class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm"
          id="pillNav2"
          role="tablist"
          style="
            --bs-nav-link-color: var(--bs-white);
            --bs-nav-pills-link-active-color: var(--bs-primary);
            --bs-nav-pills-link-active-bg: var(--bs-white);
          "
        >
          <li class="nav-item" role="presentation">
            <button
              class="nav-link active rounded-5"
              id="home-tab"
              data-bs-toggle="tab"
              type="button"
              role="tab"
              aria-selected="true"
            >
            <i class="bi bi-house-fill"></i>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link rounded-5"
              id="profile-tab2"
              data-bs-toggle="tab"
              type="button"
              role="tab"
              aria-selected="false"
            >
            <i class="bi bi-person-lines-fill"></i>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link rounded-5"
              id="crearusr"
              data-bs-toggle="tab"
              type="button"
              role="tab"
              aria-selected="false"
            >
            <i class="bi bi-person-plus-fill"></i>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link rounded-5"
              id="productos-tab"
              data-bs-toggle="tab"
              type="button"
              role="tab"
              aria-selected="false"
            >
            <i class="bi bi-file-plus-fill"></i>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link rounded-5"
              id="logout-tab"
              data-bs-toggle="tab"
              type="button"
              role="tab"
              aria-selected="false"
            >
            <i class="bi bi-person-down"></i>
            </button>
          </li>
        </ul>
      </ul>
    </div>
  </div>
</nav>
<script>
  document
    .getElementById("home-tab")
    .addEventListener("click", function () {
      window.location.href = "/";
    });
  document
    .getElementById("profile-tab2")
    .addEventListener("click", function () {
      window.location.href = "/usuarios/usuarios";
    });
  document.getElementById("crearusr").addEventListener("click", function () {
    window.location.href = "/usuarios/usuarios/nuevousuario";
  });
  document.getElementById("productos-tab").addEventListener("click", function () {
    window.location.href = "/productos/productos";
  });
  document.getElementById("logout-tab").addEventListener("click", function () {
      window.location.href = "/logout";
    });
</script>
<style>
  @media (max-width: 767px) {
  .form-control {
    margin-right: 0; /* Ajusta el margen derecho */
    width: 100%; /* Ajusta el ancho */
  }
}
</style>