terminar header finalizado, mejorar la presentacion del menu en pantallas pequeñas y el menu desplegable de servicios especializados en pantallas grandes

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

src/components/Header.astro

@@ -4,7 +4,7 @@ import LogoCondor from "../images/condorLogo.svg";
 ---
 
 <header class="fixed w-screen bg-neutral-900 flex flex-col items-center">
-  <div class="h-28 w-full flex justify-between items-center px-32">
+  <div class="h-28 w-full flex justify-between items-center px-4 lg:px-32">
     <div class="flex items-center">
       <div
         class="bg-white rounded-full p-2 flex w-16 h-16 items-center justify-center"
@@ -18,8 +18,27 @@ import LogoCondor from "../images/condorLogo.svg";
         <div class="text-white text-sm">GROUP</div>
       </div>
     </div>
-    <div class="flex items-center space-x-8">
+    <div class="lg:hidden">
-      <nav class="flex space-x-8 text-white relative">
+      <button id="menu-toggle" class="text-white focus:outline-none">
+        <svg
+          class="w-8 h-8"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16m-7 6h7"></path>
+        </svg>
+      </button>
+    </div>
+    <nav
+      id="nav-links"
+      class="hidden lg:flex lg:items-center lg:space-x-8 text-white flex-col lg:flex-row lg:static absolute bg-neutral-900 lg:bg-transparent top-16 left-0 w-full lg:w-auto"
+    >
       <a href="#inicio" class="hover:text-yellow-500">Inicio</a>
       <a href="#quienes-somos" class="hover:text-yellow-500">Quiénes somos</a>
       <div class="relative group">
@@ -28,7 +47,6 @@ import LogoCondor from "../images/condorLogo.svg";
           href="#servicios-especializados"
           class="hover:text-yellow-500">Servicios Especializados</a
         >
-
         <div
           id="servicios-especializados-dropdown"
           class="absolute hidden bg-neutral-900 text-white mt-2 py-2 rounded shadow-lg w-full"
@@ -36,47 +54,52 @@ import LogoCondor from "../images/condorLogo.svg";
           <ul>
             <li>
               <a href="#servicio1" class="px-4 py-2 hover:bg-yellow-500"
-                  >CiberSeguridad</a>
+                >CiberSeguridad</a
+              >
             </li>
             <li>
               <a href="#servicio2" class="px-4 py-2 hover:bg-yellow-500"
-                  >Minds</a>
+                >Minds</a
+              >
             </li>
             <li>
               <a href="#servicio3" class="px-4 py-2 hover:bg-yellow-500"
-                  >MinOS</a>
+                >MinOS</a
+              >
             </li>
             <li>
               <a href="#servicio4" class="px-4 py-2 hover:bg-yellow-500"
-                  >Globalists</a>
+                >Globalists</a
+              >
             </li>
           </ul>
         </div>
       </div>
       <a href="#blogs" class="hover:text-yellow-500">Blogs</a>
-      </nav>
       <a
         href="#contacto"
         class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600"
         >Contacto</a
       >
+    </nav>
   </div>
-  </div>
+  <div
-  <div class="w-full bg-gray-300 py-2 flex justify-between items-center px-32">
+    class="w-full bg-gray-300 py-2 flex justify-between items-center px-4 lg:px-32"
+  >
     <div class="text-gray-700 flex items-center">
       <i class="nf nf-oct-mail"></i>
       <span>contacto@condorbs.net</span>
     </div>
     <div class="flex space-x-4 text-gray-700">
-      <a href="#" class="hover:text-gray-900">
+      <a href="#" class="hover:text-gray-900"
-        <i class="nf nf-fa-square_facebook"></i>
+        ><i class="nf nf-fa-square_facebook"></i></a
-      </a>
+      >
-      <a href="#" class="hover:text-gray-900">
+      <a href="#" class="hover:text-gray-900"
-        <i class="nf nf-fa-linkedin_square"></i>
+        ><i class="nf nf-fa-linkedin_square"></i></a
-      </a>
+      >
-      <a href="#" class="hover:text-gray-900">
+      <a href="#" class="hover:text-gray-900"
-        <i class="nf nf-fa-whatsapp"></i>
+        ><i class="nf nf-fa-whatsapp"></i></a
-      </a>
+      >
     </div>
   </div>
 </header>
@@ -95,6 +118,27 @@ import LogoCondor from "../images/condorLogo.svg";
   .group:hover .group-hover\:flex {
     display: flex;
   }
+
+  @media (max-width: 1024px) {
+    #nav-links {
+      display: none;
+      flex-direction: column;
+      width: 100%;
+      background-color: #1a202c;
+      position: absolute;
+      top: 70px;
+      left: 0;
+      padding: 1rem;
+    }
+
+    .menu-open {
+      display: flex !important;
+    }
+
+    #menu-toggle {
+      display: block;
+    }
+  }
 </style>
 
 <script>
@@ -105,11 +149,16 @@ import LogoCondor from "../images/condorLogo.svg";
     const serviciosDropdown = document.getElementById(
       "servicios-especializados-dropdown"
     );
+    const menuToggle = document.getElementById("menu-toggle");
+    const navLinks = document.getElementById("nav-links");
 
     serviciosLink.addEventListener("click", function (event) {
-      event.preventDefault(); // Evitar el comportamiento por defecto del enlace
+      event.preventDefault();
+      serviciosDropdown.classList.toggle("hidden");
+    });
 
-      serviciosDropdown.classList.toggle("hidden"); // Alternar la visibilidad de la lista de entradas
+    menuToggle.addEventListener("click", function () {
+      navLinks.classList.toggle("menu-open");
     });
   });
 </script>