shoppy/web/templates/components/generic/navbar.html

{% load i18n %}
{% load static %}
{% load web %}
<nav class="bg-white dark:bg-gray-800 antialiased">
  <!-- Left side -->
  <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4">
    <div class="flex items-center justify-between">

      <!-- Title -->
      <div class="flex items-center space-x-8">
        <div class="shrink-0">
          <a class="flex flex-row items-center" href="{% url 'web:index' %}">
            <img class="w-8 h-8 mr-2" src="{% get_logo_image %}" alt="{{ web_title }}">
            <h1 class="text-xl font-semibold text-gray-900 dark:text-white">{{ web_title }}</h1>
          </a>
        </div>

        <!-- Categories -->
        <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
          <li>
            <a href="{% url 'web:index' %}" title=""
               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
              {% translate 'Inicio' %}
            </a>
          </li>
          <li class="shrink-0">
            <a href="{% url 'web:index' %}" title=""
               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
              {% translate 'Más vendidos' %}
            </a>
          </li>
          <li class="shrink-0">
            <a href="{% url 'web:index' %}" title=""
               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
              {% translate 'Ideas de regalo' %}
            </a>
          </li>
          <li class="shrink-0">
            <a href="{% url 'web:index' %}" title=""
               class="text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
              {% translate 'Ofertas del día' %}
            </a>
          </li>
        </ul>
      </div>

      <!-- Right side -->
      <div class="relative flex items-center lg:space-x-2">

        {% include 'components/theme-switch.html' %}
        <!-- Show/Hide cart -->
        <div id="navbar-cart-dropdown" hx-get="{% url 'web:cart_dropdown' %}"
             hx-trigger="load, updated-cart from:body"></div>

        {% if request.user.is_authenticated %}
          <!-- Show/Hide user account dropdown -->
          <button
            hx-on:click="htmx.toggleClass(htmx.find('#userDropdown1'), 'hidden'); htmx.addClass(htmx.find('#myCartDropdown1'), 'hidden')"
            id="userDropdownButton1"
            data-dropdown-toggle="userDropdown1" type="button"
            class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
            {% include 'components/icons/user.svg' %}
            <span class="hidden sm:flex">
              {% translate 'Mi cuenta' %}
            </span>
            {% include 'components/icons/dropdown.svg' %}
          </button>

          <!-- User account dropdown -->
          <div id="userDropdown1"
               class="absolute top-10 hidden z-10 w-56 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0">
            {% include 'components/users/user_dropdown.html' %}
          </div>
        {% else %}
          <a href="{% url 'web:login' %}"
             class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">Inicia
            sesión</a>
        {% endif %}

        <!-- Show/Hide menu items -->
        <button hx-on:click="htmx.toggleClass(htmx.find('#ecommerce-navbar-menu-1'), 'hidden')" type="button"
                data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
                aria-expanded="false"
                class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white">
          <span class="sr-only">
            {% translate 'Abrir menú' %}
          </span>
          {% include 'components/icons/burger.svg' %}
        </button>
      </div>
    </div>

    <div id="ecommerce-navbar-menu-1"
         class="bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 hidden px-4 mt-4">
      <ul class="text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3">
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
        </li>
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Más vendidos' %}</a>
        </li>
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ideas de regalo' %}</a>
        </li>
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Juegos' %}</a>
        </li>
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Electrónica' %}</a>
        </li>
        <li>
          <a href="{% url 'web:index' %}"
             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ofertas del día' %}</a>
        </li>
      </ul>
    </div>
  </div>
</nav>