mrhacker/condorastro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/extensions.json vendored
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"
}
]
}

149
src/components/Header.astro
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">
<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>