fix: mostrar categorias con toggle en diseño móvil

Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/2db304a5-95b5-4161-99c1-ce4d68b014df

Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>

tienda/templates/tienda/index.html

@@ -2,7 +2,23 @@
 {% 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">
+        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#mobileCategoriasCollapse" aria-expanded="false" aria-controls="mobileCategoriasCollapse">
+            Categorias
+        </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">Categorias</h5>
         <ul class="list-group categorias-lista">
             {% if 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,14 @@ 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, ">Categorias<")
+
     def test_login_required_endpoints_redirect_anonymous(self):
         secured_get_routes = [
             reverse("mis_productos"),