From ec8e1d4bc760923196cf2ad639736cb7ed2386dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Mu=C3=B1oz?= <kmunoz@condorbs.net>
Date: Thu, 16 May 2024 13:59:53 -0500
Subject: [PATCH] =?UTF-8?q?terminar=20header=20finalizado,=20mejorar=20la?=
 =?UTF-8?q?=20presentacion=20del=20menu=20en=20pantallas=20peque=C3=B1as?=
 =?UTF-8?q?=20y=20el=20menu=20desplegable=20de=20servicios=20especializado?=
 =?UTF-8?q?s=20en=20pantallas=20grandes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json     |   4 -
 .vscode/launch.json         |  11 ---
 src/components/Header.astro | 149 ++++++++++++++++++++++++------------
 3 files changed, 99 insertions(+), 65 deletions(-)
 delete mode 100644 .vscode/extensions.json
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 22a1505..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}
diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index d642209..0000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index b0eb021..a1c1155 100644
--- a/src/components/Header.astro
+++ b/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,65 +18,88 @@ import LogoCondor from "../images/condorLogo.svg";
         <div class="text-white text-sm">GROUP</div>
       </div>
     </div>
-    <div class="flex items-center space-x-8">
-      <nav class="flex space-x-8 text-white relative">
-        <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">
-          <a
-            id="servicios-especializados-link"
-            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"
-          >
-            <ul>
-              <li>
-                <a href="#servicio1" class="px-4 py-2 hover:bg-yellow-500"
-                  >CiberSeguridad</a>
-              </li>
-              <li>
-                <a href="#servicio2" class="px-4 py-2 hover:bg-yellow-500"
-                  >Minds</a>
-              </li>
-              <li>
-                <a href="#servicio3" class="px-4 py-2 hover:bg-yellow-500"
-                  >MinOS</a>
-              </li>
-              <li>
-                <a href="#servicio4" class="px-4 py-2 hover:bg-yellow-500"
-                  >Globalists</a>
-              </li>
-            </ul>
-          </div>
+    <div class="lg:hidden">
+      <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">
+        <a
+          id="servicios-especializados-link"
+          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"
+        >
+          <ul>
+            <li>
+              <a href="#servicio1" class="px-4 py-2 hover:bg-yellow-500"
+                >CiberSeguridad</a
+              >
+            </li>
+            <li>
+              <a href="#servicio2" class="px-4 py-2 hover:bg-yellow-500"
+                >Minds</a
+              >
+            </li>
+            <li>
+              <a href="#servicio3" class="px-4 py-2 hover:bg-yellow-500"
+                >MinOS</a
+              >
+            </li>
+            <li>
+              <a href="#servicio4" class="px-4 py-2 hover:bg-yellow-500"
+                >Globalists</a
+              >
+            </li>
+          </ul>
         </div>
-        <a href="#blogs" class="hover:text-yellow-500">Blogs</a>
-      </nav>
+      </div>
+      <a href="#blogs" class="hover:text-yellow-500">Blogs</a>
       <a
         href="#contacto"
         class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600"
         >Contacto</a
       >
-    </div>
+    </nav>
   </div>
-  <div class="w-full bg-gray-300 py-2 flex justify-between items-center px-32">
+  <div
+    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">
-        <i class="nf nf-fa-square_facebook"></i>
-      </a>
-      <a href="#" class="hover:text-gray-900">
-        <i class="nf nf-fa-linkedin_square"></i>
-      </a>
-      <a href="#" class="hover:text-gray-900">
-        <i class="nf nf-fa-whatsapp"></i>
-      </a>
+      <a href="#" class="hover:text-gray-900"
+        ><i class="nf nf-fa-square_facebook"></i></a
+      >
+      <a href="#" class="hover:text-gray-900"
+        ><i class="nf nf-fa-linkedin_square"></i></a
+      >
+      <a href="#" class="hover:text-gray-900"
+        ><i class="nf nf-fa-whatsapp"></i></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>