Pablo Moreno
101 lines
4.4 KiB
HTML
101 lines
4.4 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<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="{{ logo }}" 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>
|
|
{% for category in navbar_categories %}
|
|
<li class="shrink-0">
|
|
<a href="{% url 'web:category_view' slug=category.slug %}" title=""
|
|
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
|
|
{{ category.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</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>
|
|
|
|
{% for category in navbar_categories %}
|
|
<li>
|
|
<a href="{% url 'web:category_view' slug=category.slug %}"
|
|
class="hover:text-primary-700 dark:hover:text-primary-500">{{ category.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|