Merge pull request #31 from dsaub/copilot/add-categories-toggle-button

Mostrar categorías en móvil con botón desplegable sobre el grid de productos

tienda/templates/tienda/index.html

@@ -2,8 +2,11 @@
 {% load vat_filters %}
 {% block content %}
 <div class="row mt-2">
-    <div class="col-md-2 d-none d-lg-block">
+    <div class="col-12 d-lg-none mb-3">
-        <h5 class="categorias-titulo">Categorias</h5>
+        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#mobileCategoriasCollapse" aria-expanded="false" aria-controls="mobileCategoriasCollapse">
+            Categorías
+        </button>
+        <div class="collapse mt-2" id="mobileCategoriasCollapse">
             <ul class="list-group categorias-lista">
                 {% if categories %}
                     {% for category in categories %}
@@ -14,7 +17,20 @@
                 {% endif %}
             </ul>
         </div>
-    <div class="col-12 col-md-10 grid">
+    </div>
+    <div class="col-lg-2 d-none d-lg-block">
+        <h5 class="categorias-titulo">Categorías</h5>
+        <ul class="list-group categorias-lista">
+            {% if categories %}
+                {% for category in categories %}
+                    <li class="list-group-item categoria-item">
+                        <a href="{% url 'categoria' category.id %}">{{ category.name }}</a>
+                    </li>
+                {% endfor %}
+            {% endif %}
+        </ul>
+    </div>
+    <div class="col-12 col-lg-10 grid">
         {% if products %}
             {% for producto in products %}
                 <div class="card card-producto mt-5" style="width: 18rem;">

tienda/tests.py

@@ -1358,6 +1358,13 @@ class EndpointViewTests(TestCase):
                 response = self.client.get(url)
                 self.assertEqual(response.status_code, 200)
 
+    def test_index_shows_mobile_categories_toggle(self):
+        response = self.client.get(reverse("index"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, 'data-bs-target="#mobileCategoriasCollapse"')
+        self.assertContains(response, 'id="mobileCategoriasCollapse"')
+        self.assertContains(response, ">Categorías<")
     def test_home_header_renders_mobile_title_outside_collapsible_menu(self):
         response = self.client.get(reverse("home"))
         self.assertEqual(response.status_code, 200)