103 lines
3.6 KiB
HTML
103 lines
3.6 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<nav class="navbar-bg">
|
|
<!-- Left side -->
|
|
<div class="navbar-content">
|
|
<div class="navbar-align">
|
|
|
|
<!-- Title -->
|
|
<div class="navbar-title">
|
|
<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 }} logo">
|
|
<h1 class="navbar-web-title">{{ web_title }}</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<ul class="navbar-categories">
|
|
<li>
|
|
<a href="{% url 'web:index' %}" title=""
|
|
class="navbar-category-link">
|
|
{% translate 'Inicio' %}
|
|
</a>
|
|
</li>
|
|
{% for category in navbar_categories %}
|
|
<li class="shrink-0">
|
|
<a href="{% url 'web:category_view' slug=category.slug %}" title=""
|
|
class="navbar-category-link">
|
|
{{ 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"
|
|
aria-label="show menu"
|
|
class="icon-button">
|
|
{% 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-12 hidden z-12 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="link-button">
|
|
{% translate '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"
|
|
aria-label="show menu"
|
|
class="icon-button lg:hidden">
|
|
<span class="sr-only">
|
|
{% translate 'Abrir menú' %}
|
|
</span>
|
|
{% include 'components/icons/burger.svg' %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ecommerce-navbar-menu-1"
|
|
class="navbar-dropdown-menu hidden">
|
|
<ul class="navbar-dropdown-menu-list">
|
|
<li>
|
|
<a href="{% url 'web:index' %}"
|
|
class="navbar-dropdown-menu-title">{% translate 'Inicio' %}</a>
|
|
</li>
|
|
|
|
{% for category in navbar_categories %}
|
|
<li>
|
|
<a href="{% url 'web:category_view' slug=category.slug %}"
|
|
class="navbar-dropdown-menu-title">{{ category.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|