feat: improved UI

web/templates/components/generic/navbar.html

@@ -1,19 +1,33 @@
 {% load i18n %}
 {% load static %}
-<nav class="navbar">
-  <div class="text-base-content">
-    <a href="{% url 'web:index' %}" class="flex text-xl">
-      <img class="mr-4" src="{{ logo }}" alt="{{ web_title }} logo">
+<nav class="navbar sticky top-0 z-30 bg-base-100/90 backdrop-blur border-b border-base-300 px-4 sm:px-6 lg:px-8">
+  <div class="flex-1">
+    <a href="{% url 'web:index' %}" class="flex items-center gap-2 text-lg sm:text-xl font-display font-bold text-base-content">
+      {% if logo %}
+        <img class="h-8 w-8 rounded-md object-cover" src="{{ logo }}" alt="{{ web_title }}">
+      {% endif %}
       {{ web_title }}
     </a>
   </div>
 
-  <div class="flex gap-2">
+  <div class="flex items-center gap-1 sm:gap-2">
     {% include 'components/generic/theme-switch.html' %}
+
+    <div class="dropdown dropdown-end">
+      <div tabindex="0" role="button" class="btn btn-ghost btn-circle" aria-label="{% translate 'Carrito' %}">
+        {% include 'components/icons/cart.svg' %}
+      </div>
+      <div tabindex="-1" class="dropdown-content menu z-20 mt-3 w-80 rounded-box bg-base-100 p-4 shadow-lg border border-base-300">
+        <div hx-get="{% url 'web:cart_dropdown' %}" hx-trigger="load, updated-cart from:body" hx-swap="innerHTML">
+          {% include 'components/generic/spinner.html' %}
+        </div>
+      </div>
+    </div>
+
     {% if user.is_authenticated %}
       {% include 'components/generic/user_dropdown.html' %}
     {% else %}
-      <a href="{% url 'users:login' %}" class="link-button flex items-center">
+      <a href="{% url 'users:login' %}" class="btn btn-primary btn-sm sm:btn-md ml-1">
         {% translate 'Inicia sesión' %}
       </a>
     {% endif %}

web/templates/components/generic/theme-switch.html

@@ -3,7 +3,7 @@
   id="theme-toggle"
   type="button"
   aria-label="switchtheme"
-  class="btn btn-circle">
+  class="btn btn-ghost btn-circle">
     {% include 'components/icons/moon.svg' %}
     {% include 'components/icons/sun.svg' %}
 </button>

web/templates/components/generic/user_dropdown.html

@@ -1,19 +1,32 @@
 {% load i18n %}
 <div class="dropdown dropdown-end">
-  <div tabindex="0" role="button" class="btn btn-circle avatar">
-    <div class="w-10 flex rounded-full justify-center items-center">
+  <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+    <div class="w-9 flex rounded-full bg-primary text-primary-content justify-center items-center font-semibold">
       {{ request.user.first_name.0 | upper }}{{ request.user.last_name.0 | upper }}
     </div>
   </div>
   <ul
     tabindex="-1"
-    class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+    class="menu menu-sm dropdown-content bg-base-100 rounded-box z-20 mt-3 w-56 p-2 shadow-lg border border-base-300">
     <li>
-      <a class="justify-between" href="{% url 'users:my_account' %}">
-        {% trans 'Mi cuenta' %}
+      <a href="{% url 'users:my_account' %}">
+        {% translate 'Mi cuenta' %}
+      </a>
+    </li>
+    <li>
+      <a href="{% url 'web:orders' %}">
+        {% translate 'Mis pedidos' %}
+      </a>
+    </li>
+    <li>
+      <a href="{% url 'web:wishlist' %}">
+        {% translate 'Lista de deseados' %}
+      </a>
+    </li>
+    <li class="mt-1 border-t border-base-300 pt-1">
+      <a href="{% url 'users:logout' %}" class="text-error">
+        {% translate 'Cerrar sesión' %}
       </a>
     </li>
-    <li><a>{% trans 'Ajustes' %}</a></li>
-    <li><a href="{% url 'users:logout' %}">{% trans 'Cerrar sesión' %}</a></li>
   </ul>
-</div>
+</div>