<style>
    body {
      padding-top: 56px; /* Ajustar según la altura del navbar */
    }

    .navbar-brand i {
      font-size: 1.5rem; /* Tamaño del icono en la marca */
    }

    .navbar-toggler-icon {
      color: white; /* Color del icono del botón de navegación */
    }

    .offcanvas-body {
      padding: 10px;
    }

    .navbar-nav .nav-link i {
      margin-right: 5px; /* Espaciado entre el icono y el texto del enlace */
    }

    @media (max-width: 991px) {
      body {
        padding-top: 0; /* Eliminar el espacio superior en pantallas pequeñas */
      }
    }
  </style>
</head>
<body>

<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
  <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="offcanvas"
      data-bs-target="#offcanvasDarkNavbar"
      aria-controls="offcanvasDarkNavbar"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      class="offcanvas offcanvas-end text-bg-dark"
      tabindex="-1"
      id="offcanvasDarkNavbar"
      aria-labelledby="offcanvasDarkNavbarLabel"
    >
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">
          Menú
        </h5>
        <button
          type="button"
          class="btn-close btn-close-white"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav flex-grow-1">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/principalTienda"><!-- arregar este enlace -->
              <i class="bi bi-house-fill"></i> Inicio
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/productos/productos">
                <i class="bi bi-card-list"></i> Productos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/productos/productos/nuevoproducto">
                <i class="bi bi-plus-circle"></i> Nuevo Producto
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/logout">
              <i class="bi bi-person-down"></i> Cerrar Sesión
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>