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 %}