fix: improve responsive navbar button placement

Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/7bd2469a-6cfb-4a01-824a-07dfafa2392c Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>
2026-04-20 11:19:30 +00:00
parent 465e71e83d
commit 23abe3f832
12 changed files with 37 additions and 18 deletions
@@ -79,8 +79,8 @@
 </head>
 <body class="d-flex flex-column min-vh-100">
    {% cache 500 sidebar request.user.username %}
-    <nav class="navbar navbar-expand-md header" role="banner">
-        <div class="container-fluid">
+    <nav class="navbar navbar-expand-lg header" role="banner">
+        <div class="container-fluid align-items-center">
            <a class="navbar-brand" href="{% url 'home' %}">
                <picture>
                    <source
@@ -95,23 +95,24 @@
                        decoding="async">
                </picture>
            </a>
-            
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+
+            <span class="navbar-text fw-semibold ms-2 me-3 d-none d-xl-inline" style="color: #ffffff">Comercialmeria</span>
+
+            <!-- Barra de búsqueda con sugerencias -->
+            <form class="search-suggestions-container order-3 order-lg-0 w-100 w-lg-auto mt-2 mt-lg-0" method="GET" action="{% url 'search' %}" role="search" id="searchForm">
+                <div class="input-group">
+                    <input class="form-control" type="search" name="q" id="searchInput" placeholder="Buscar productos..." aria-label="Buscar" autocomplete="off">
+                    <button class="btn btn-outline-primary" type="submit">🔍</button>
+                </div>
+                <div class="search-suggestions" id="searchSuggestions"></div>
+            </form>
+
+            <button class="navbar-toggler order-2 ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
-            
-            <div class="collapse navbar-collapse" id="navbarContent">
-                <span class="navbar-text fw-semibold me-3" style="color: #ffffff">Comercialmeria</span>
-                <!-- Barra de búsqueda con sugerencias -->
-                <form class="search-suggestions-container" method="GET" action="{% url 'search' %}" role="search" id="searchForm">
-                    <div class="input-group">
-                        <input class="form-control" type="search" name="q" id="searchInput" placeholder="Buscar productos..." aria-label="Buscar" autocomplete="off">
-                        <button class="btn btn-outline-primary" type="submit">🔍</button>
-                    </div>
-                    <div class="search-suggestions" id="searchSuggestions"></div>
-                </form>
-                
-                <div class="navbar-nav ms-auto d-flex align-items-md-center gap-2 flex-wrap" role="navigation">
+
+            <div class="collapse navbar-collapse order-4 order-lg-0 mt-2 mt-lg-0" id="navbarContent">
+                <div class="navbar-nav ms-lg-auto d-flex align-items-lg-center gap-2" role="navigation">
                    <a href="{% url 'view_cart' %}" class="nav-link position-relative btn btn-outline-primary btn-sm">
                        🛒 Carrito
                        {% if cart_count > 0 %}
@@ -1358,6 +1358,22 @@ class EndpointViewTests(TestCase):
                response = self.client.get(url)
                self.assertEqual(response.status_code, 200)

+    def test_navbar_search_is_visible_outside_collapsible_menu(self):
+        self._login(self.seller)
+        response = self.client.get(reverse("home"))
+        self.assertEqual(response.status_code, 200)
+
+        content = response.content.decode()
+        search_form_index = content.find('id="searchForm"')
+        collapsed_menu_index = content.find('id="navbarContent"')
+        self.assertGreaterEqual(search_form_index, 0)
+        self.assertGreaterEqual(collapsed_menu_index, 0)
+        self.assertLess(search_form_index, collapsed_menu_index)
+
+        self.assertContains(response, "navbar navbar-expand-lg header")
+        self.assertContains(response, "search-suggestions-container order-3 order-lg-0 w-100 w-lg-auto mt-2 mt-lg-0")
+        self.assertContains(response, "navbar-nav ms-lg-auto d-flex align-items-lg-center gap-2")
+
    def test_login_required_endpoints_redirect_anonymous(self):
        secured_get_routes = [
            reverse("mis_productos"),