1- < nav id =" nav ">
2- < div class ="leftSide ">
3-
4- < a href =" / " class ="d-block overflow-hidden " id =" navLogo ">
5- < div class =" notHoverContainer d-block overflow-hidden " style =" height: 5vh; ">
6- < img src =" /assets/img/logo- text.webp " alt ="" class =" notHover " >
1+ < header class =" fixed top-0 left-0 right-0 z-50 border-b border-border-dark glass transition-all duration-300 relative ">
2+ < div class ="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 ">
3+ < div class =" flex items-center justify-between h-20 " >
4+ < div class ="flex items-center gap-3 ">
5+ < img alt =" Logo SaltaDev " class =" h-9 w-auto " src =" /assets/img/logo.png ">
6+ < span class =" text-2xl font-bold tracking-tight text-white " > SaltaDev </ span >
77 </ div >
8- < div class ="inHoverContainer ">
9- < img src ="/assets/img/logo.webp " alt ="" class ="inHover ">
10-
8+ < nav class ="hidden md:flex items-center gap-8 ">
9+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/ "> Inicio</ a >
10+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/#partners "> Colaboradores</ a >
11+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/#staff "> Staff</ a >
12+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/#community "> Comunidad</ a >
13+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/events "> Eventos</ a >
14+ < a class ="text-sm font-medium text-white hover:text-white transition-colors " href ="/reglamento "> Reglamento</ a >
15+ </ nav >
16+ < div class ="flex items-center gap-4 ">
17+ < a class ="hidden md:flex bg-primary hover:bg-red-700 text-white text-sm font-bold px-5 py-2.5 rounded-lg shadow-lg shadow-primary/20 transition-all items-center gap-2 " href ="{{ site.whatsapp }} " target ="_blank ">
18+ < span > Unirse</ span >
19+ < span class ="material-symbols-outlined text-[18px] "> arrow_forward</ span >
20+ </ a >
21+ < button class ="md:hidden text-white p-2 " type ="button " id ="mobileMenuToggle " aria-label ="Abrir menu " aria-expanded ="false ">
22+ < span class ="material-symbols-outlined "> menu</ span >
23+ </ button >
1124 </ div >
12- </ a >
25+ </ div >
1326 </ div >
14-
15- < div class ="rightSide " id ="rightSide ">
16- <!-- <a href="/courses" class="d-block ">Cursos</a> -->
17- <!-- <a href="/jobs" class="d-block">Oportunidades</a> -->
18- < a href ="/#partners " class ="d-block "> Empresas</ a >
19- < a href ="/#staff " class ="d-block "> Staff</ a >
20- < a href ="/#aboutUs " class ="d-block "> Comunidad</ a >
21- < a href ="/events " class ="d-block "> Eventos</ a >
22- < a href ="/reglamento " class ="d-block "> Reglamento</ a >
27+ < div class ="md:hidden hidden absolute top-full left-0 right-0 bg-background-dark border-b border-border-dark " id ="mobileMenu ">
28+ < div class ="px-6 py-4 flex flex-col text-center ">
29+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/ "> Inicio</ a >
30+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/#partners "> Colaboradores</ a >
31+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/#staff "> Staff</ a >
32+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/#community "> Comunidad</ a >
33+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/events "> Eventos</ a >
34+ < a class ="text-sm font-medium text-white py-3 border-b border-border-dark " href ="/reglamento "> Reglamento</ a >
35+ < div class ="pt-4 ">
36+ < a class ="bg-primary hover:bg-red-700 text-white text-sm font-bold px-5 py-2.5 rounded-lg shadow-lg shadow-primary/20 transition-all inline-flex items-center gap-2 justify-center " href ="{{ site.whatsapp }} " target ="_blank ">
37+ < span > Unirse</ span >
38+ < span class ="material-symbols-outlined text-[18px] "> arrow_forward</ span >
39+ </ a >
40+ </ div >
41+ </ div >
2342 </ div >
43+ </ header >
2444
45+ < script >
46+ const mobileToggle = document . getElementById ( 'mobileMenuToggle' ) ;
47+ const mobileMenu = document . getElementById ( 'mobileMenu' ) ;
2548
26- < div id ="toggleContainer ">
49+ if ( mobileToggle && mobileMenu ) {
50+ mobileToggle . addEventListener ( 'click' , ( ) => {
51+ const isOpen = mobileToggle . getAttribute ( 'aria-expanded' ) === 'true' ;
52+ mobileToggle . setAttribute ( 'aria-expanded' , String ( ! isOpen ) ) ;
53+ mobileMenu . classList . toggle ( 'hidden' , isOpen ) ;
54+ } ) ;
2755
28- < a class ="d-block overflow-hidden " id ="navToggle ">
29- < div class ="notHoverContainer d-block overflow-hidden " style ="height: 5vh; ">
30- < i class ="fa-solid fa-bars d-block notHover "> </ i >
31- </ div >
32- < div class ="inHoverContainer ">
33- < i class ="fa-solid fa-x d-block inHover "> </ i >
34-
35- </ div >
36- </ a >
37- </ div >
38- </ nav >
56+ mobileMenu . querySelectorAll ( 'a' ) . forEach ( ( link ) => {
57+ link . addEventListener ( 'click' , ( ) => {
58+ mobileMenu . classList . add ( 'hidden' ) ;
59+ mobileToggle . setAttribute ( 'aria-expanded' , 'false' ) ;
60+ } ) ;
61+ } ) ;
62+ }
63+ </ script >
0 commit comments