<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-card-list"></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-plus-circle"></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 = "/productos/productos";
      });
    document
      .getElementById("profile-tab2")
      .addEventListener("click", function () {
        window.location.href = "/productos/productos";
      });
    document.getElementById("crearusr").addEventListener("click", function () {
      window.location.href = "/productos/productos/nuevoproducto";
    });
    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>