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

This commit is contained in:
Kevin Muñoz 2024-05-16 13:59:53 -05:00
parent 1e692c97d9
commit ec8e1d4bc7
No known key found for this signature in database
GPG Key ID: 3CA0B9DF1BE7CE09
3 changed files with 99 additions and 65 deletions

View File

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

11
.vscode/launch.json vendored
View File

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

View File

@ -4,7 +4,7 @@ import LogoCondor from "../images/condorLogo.svg";
--- ---
<header class="fixed w-screen bg-neutral-900 flex flex-col items-center"> <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="flex items-center">
<div <div
class="bg-white rounded-full p-2 flex w-16 h-16 items-center justify-center" 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 class="text-white text-sm">GROUP</div>
</div> </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="#inicio" class="hover:text-yellow-500">Inicio</a>
<a href="#quienes-somos" class="hover:text-yellow-500">Quiénes somos</a> <a href="#quienes-somos" class="hover:text-yellow-500">Quiénes somos</a>
<div class="relative group"> <div class="relative group">
@ -28,7 +47,6 @@ import LogoCondor from "../images/condorLogo.svg";
href="#servicios-especializados" href="#servicios-especializados"
class="hover:text-yellow-500">Servicios Especializados</a class="hover:text-yellow-500">Servicios Especializados</a
> >
<div <div
id="servicios-especializados-dropdown" id="servicios-especializados-dropdown"
class="absolute hidden bg-neutral-900 text-white mt-2 py-2 rounded shadow-lg w-full" 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> <ul>
<li> <li>
<a href="#servicio1" class="px-4 py-2 hover:bg-yellow-500" <a href="#servicio1" class="px-4 py-2 hover:bg-yellow-500"
>CiberSeguridad</a> >CiberSeguridad</a
>
</li> </li>
<li> <li>
<a href="#servicio2" class="px-4 py-2 hover:bg-yellow-500" <a href="#servicio2" class="px-4 py-2 hover:bg-yellow-500"
>Minds</a> >Minds</a
>
</li> </li>
<li> <li>
<a href="#servicio3" class="px-4 py-2 hover:bg-yellow-500" <a href="#servicio3" class="px-4 py-2 hover:bg-yellow-500"
>MinOS</a> >MinOS</a
>
</li> </li>
<li> <li>
<a href="#servicio4" class="px-4 py-2 hover:bg-yellow-500" <a href="#servicio4" class="px-4 py-2 hover:bg-yellow-500"
>Globalists</a> >Globalists</a
>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<a href="#blogs" class="hover:text-yellow-500">Blogs</a> <a href="#blogs" class="hover:text-yellow-500">Blogs</a>
</nav>
<a <a
href="#contacto" href="#contacto"
class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600" class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600"
>Contacto</a >Contacto</a
> >
</nav>
</div> </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"> <div class="text-gray-700 flex items-center">
<i class="nf nf-oct-mail"></i> <i class="nf nf-oct-mail"></i>
<span>contacto@condorbs.net</span> <span>contacto@condorbs.net</span>
</div> </div>
<div class="flex space-x-4 text-gray-700"> <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>
</div> </div>
</header> </header>
@ -95,6 +118,27 @@ import LogoCondor from "../images/condorLogo.svg";
.group:hover .group-hover\:flex { .group:hover .group-hover\:flex {
display: 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> </style>
<script> <script>
@ -105,11 +149,16 @@ import LogoCondor from "../images/condorLogo.svg";
const serviciosDropdown = document.getElementById( const serviciosDropdown = document.getElementById(
"servicios-especializados-dropdown" "servicios-especializados-dropdown"
); );
const menuToggle = document.getElementById("menu-toggle");
const navLinks = document.getElementById("nav-links");
serviciosLink.addEventListener("click", function (event) { 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> </script>