feat: dark mode switch

shop/templates/components/generic/navbar.html

@@ -44,6 +44,7 @@
       <!-- Right side -->
       <div class="relative flex items-center lg:space-x-2">
 
+        {% include 'components/theme-switch.html' %}
         <!-- Show/Hide cart -->
         <button hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
           id="myCartDropdownButton1"
@@ -57,7 +58,7 @@
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7H7.312"/>
           </svg>
-          <span class="hidden sm:flex">{% translate 'Carrito' %}</span>
+          <span class="sm:flex">{% translate 'Carrito' %}</span>
           <svg class="hidden sm:flex w-4 h-4 text-gray-900 dark:text-white ms-1" aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -305,22 +306,22 @@
          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="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
         </li>
         <li>
-          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Best Sellers</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Más vendidos' %}</a>
         </li>
         <li>
-          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Gift Ideas</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ideas de regalo' %}</a>
         </li>
         <li>
-          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Games</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Juegos' %}</a>
         </li>
         <li>
-          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Electronics</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Electrónica' %}</a>
         </li>
         <li>
-          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home & Garden</a>
+          <a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ofertas del día' %}</a>
         </li>
       </ul>
     </div>

shop/templates/shop/index.html

@@ -3,7 +3,6 @@
 
 {% block main %}
   {% include 'components/generic/navbar.html' %}
-  {% include 'components/theme-switch.html' %}
   <div>
     {% include 'components/products/list_filters.html' %}
     <section