responsive buscador ok

Author: s0raya

src/components/Navbar.astro

@@ -4,18 +4,23 @@ const { posts } = Astro.props;
 ---
 
 <nav class="nav">
-  <a href="/astro-proyect/"><img src="/astro-proyect/images/logo_TB_horiz_negativo-01.png" alt="The_bridge" class="logo"></a>
+  <a href="/astro-proyect/" class="logo-link">
+    <img src="/astro-proyect/images/logo_TB_horiz_negativo-01.png" alt="The_bridge" class="logo">
+  </a>
 
-  <div class="search-container">
-    <input
-      type="text"
-      id="search-input"
-      placeholder="Buscar..."
-      aria-label="Buscar"
-      class="search-input"
-      style="padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #ccc;"
-    />
-    <ul id="search-results" class="search-dropdown"></ul>
+  <div class="top-bar">
+    <div class="search-container">
+      <input
+        type="text"
+        id="search-input"
+        placeholder="Buscar..."
+        aria-label="Buscar"
+        class="search-input"
+        style="padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #ccc;"
+      />
+      <ul id="search-results" class="search-dropdown"></ul>
+    </div>
+    <button class="hamburger" aria-label="Toggle menu">&#9776;</button>
   </div>
 
   <ul class="navList">
@@ -24,7 +29,6 @@ const { posts } = Astro.props;
     <li class="navItem"><a href="/astro-proyect/frontend/">FrontEnd</a></li>
   </ul>
 
-  <button class="hamburger" aria-label="Toggle menu">&#9776;</button>
 </nav>
 
 <script type="module">
@@ -51,7 +55,7 @@ const { posts } = Astro.props;
 
     const contentPosts = data.map(post => ({
       title: post.title,
-      description: post.description,
+      description: '',
       url: `/astro-proyect/${post.slug}`
     }));
 
@@ -68,8 +72,7 @@ const { posts } = Astro.props;
     }
 
     const results = posts.filter(post =>
-      post.title.toLowerCase().includes(input) ||
-      post.description.toLowerCase().includes(input)
+      post.title.toLowerCase().includes(input)
     );
 
     if (results.length === 0) {
@@ -81,6 +84,7 @@ const { posts } = Astro.props;
       <li class="search-result-item">
         <a href="${post.url}">
           <strong>${post.title}</strong><br>
+          <span>${post.description}</span>
         </a>
       </li>
     `).join('');
@@ -116,5 +120,14 @@ const { posts } = Astro.props;
       initSearch();
     })
   });
+  
+  document.addEventListener("DOMContentLoaded", function () {
+    const nav = document.querySelector(".nav");
+    const hamburger = document.querySelector(".hamburger");
+
+    hamburger.addEventListener("click", function () {
+      nav.classList.toggle("active");
+    });
+  });
 </script>
 

src/styles/global.css

@@ -134,9 +134,39 @@ h4 {
 
 @media screen and (max-width: 768px) {
     .nav {
+        display: flex;
         flex-direction: column;
+        align-items: flex-start;
+        padding: 1rem;
+    }
+    .logo-link {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    .logo {
+        max-width: 180px;
+    }
+    .top-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: 1rem;
+    }
+    .search-container {
+        flex: none;
+        width: 70%;
+    }
+
+    .hamburger {
+        display: block;
+        background: none;
+        border: none;
+        font-size: 2rem;
+        cursor: pointer;
+        color: white;
     }
-    
     .navList {
         display: none;
         flex-direction: column;
@@ -145,35 +175,16 @@ h4 {
         right: 0;
         margin-right: 0;
         background-color: #232323;
-        width: 100%;
         padding: 1rem;
         transition: max-height 0.3s ease-in-out;
         max-height: 0;
         overflow: hidden;
     }
 
-    .hamburger {
-        display: block;
-        background: none;
-        border: none;
-        font-size: 2rem;
-        cursor: pointer;
-        color: white;
-        margin-right: 1rem;
-        padding: 0;
-    }
-
-    .nav.active .navList .search-container {
+    .nav.active .navList {
         display: flex;
         max-height: 300px;
-        max-width: max-content;
-        padding: 1rem;
     }
-
-    .search-container {
-        order: 2;
-    }
-
 }
 
 .back-breadcrumbs {