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,24 @@
 {% 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 %}
+                        <li class="list-group-item categoria-item">
+                            <a href="{% url 'categoria' category.id %}">{{ category.name }}</a>
+                        </li>
+                    {% endfor %}
+                {% endif %}
+            </ul>
+        </div>
+    </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 %}
@@ -14,7 +30,7 @@
             {% endif %}
         </ul>
     </div>
-    <div class="col-12 col-md-10 grid">
+    <div class="col-12 col-lg-10 grid">
         {% if products %}
             {% for producto in products %}
                 <div class="card card-producto mt-5" style="width: 18rem;">
@@ -39,4 +55,4 @@
         {% endif %}
     </div>
 </div>
-{% endblock %}
+{% endblock %}

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)