1+ import { useState } from 'react' ;
12import { Link , useNavigate } from 'react-router-dom' ;
23import {
34 BookOpen ,
@@ -6,41 +7,40 @@ import {
67 GraduationCap ,
78 ShoppingCart ,
89 Bell ,
10+ Menu ,
11+ X ,
912} from 'lucide-react' ;
1013import { useAuth } from '../../hooks/useAuth' ;
1114
1215export function NavBar ( ) {
1316 const { isAuthenticated, user, logout, isLoading } = useAuth ( ) ;
1417 const navigate = useNavigate ( ) ;
15-
16- console . log (
17- '[NavBar Render] IsLoading:' ,
18- isLoading ,
19- '| IsAuthenticated:' ,
20- isAuthenticated ,
21- '| User:' ,
22- user
23- ) ;
18+ // Estado para controlar la apertura y cierre del menú móvil
19+ const [ isMobileMenuOpen , setIsMobileMenuOpen ] = useState ( false ) ;
2420
2521 const handleLogout = ( ) => {
2622 logout ( ) ;
23+ setIsMobileMenuOpen ( false ) ; // Cierra el menú al desloguearse
2724 navigate ( '/login' ) ;
2825 } ;
2926
3027 const handleApplyClick = ( ) => {
3128 if ( ! isAuthenticated ) {
32- alert ( " Debes iniciar sesión para poder aplicar." ) ;
29+ alert ( ' Debes iniciar sesión para poder aplicar.' ) ;
3330 navigate ( '/login' ) ;
34- return ;
35- }
31+ } else {
3632 navigate ( '/professor/apply' ) ;
33+ }
34+ setIsMobileMenuOpen ( false ) ; // Cierra el menú después de la acción
3735 } ;
3836
3937 return (
4038 < header className = "fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-blue-100 shadow-sm" >
4139 < div className = "container mx-auto px-4 h-16 flex items-center justify-between" >
40+ { /* Logo */ }
4241 < Link
4342 to = "/"
43+ onClick = { ( ) => setIsMobileMenuOpen ( false ) }
4444 className = "flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity"
4545 >
4646 < div className = "w-8 h-8 bg-gradient-to-br from-blue-400 to-green-400 rounded-lg flex items-center justify-center" >
@@ -51,14 +51,26 @@ export function NavBar() {
5151 </ span >
5252 </ Link >
5353
54- < div className = "flex items-center space-x-2 md:space-x-4" >
54+ { /* Botón de Menú Móvil (Hamburguesa) */ }
55+ < div className = "md:hidden" >
56+ < button
57+ onClick = { ( ) => setIsMobileMenuOpen ( ! isMobileMenuOpen ) }
58+ className = "p-2 rounded-md text-slate-700 hover:bg-slate-100"
59+ aria-label = "Abrir menú"
60+ >
61+ { isMobileMenuOpen ? < X className = "w-6 h-6" /> : < Menu className = "w-6 h-6" /> }
62+ </ button >
63+ </ div >
64+
65+ { /* Navegación de Escritorio */ }
66+ < div className = "hidden md:flex items-center space-x-2 md:space-x-4" >
5567 { ( ! user || user . role === 'student' ) && (
5668 < button
5769 className = "hidden sm:flex items-center space-x-2 border-green-200 text-green-700 hover:bg-green-50 hover:border-green-300 bg-transparent px-4 py-2 rounded-lg border text-sm font-medium"
5870 onClick = { handleApplyClick }
5971 >
6072 < GraduationCap className = "w-4 h-4" />
61- < span className = "ml-2" > Quiero ser profesor</ span >
73+ < span > Quiero ser profesor</ span >
6274 </ button >
6375 ) }
6476
@@ -107,6 +119,66 @@ export function NavBar() {
107119 ) }
108120 </ div >
109121 </ div >
122+
123+ { /* Menú Desplegable Móvil */ }
124+ { isMobileMenuOpen && (
125+ < div className = "md:hidden bg-white border-t border-blue-100 px-4 pt-2 pb-4 space-y-2" >
126+ { isLoading ? (
127+ < div className = "h-8 w-full bg-slate-200 rounded-lg animate-pulse" > </ div >
128+ ) : isAuthenticated ? (
129+ < >
130+ < div className = "flex items-center gap-4 mb-4" >
131+ < span className = "text-sm font-medium text-slate-700" >
132+ Hola, { user ?. name }
133+ </ span >
134+ </ div >
135+ { ( ! user || user . role === 'student' ) && (
136+ < button
137+ onClick = { handleApplyClick }
138+ className = "w-full flex items-center justify-center space-x-2 border-green-200 text-green-700 hover:bg-green-50 bg-transparent px-4 py-2 rounded-lg border text-sm font-medium"
139+ >
140+ < GraduationCap className = "w-4 h-4" />
141+ < span > Quiero ser profesor</ span >
142+ </ button >
143+ ) }
144+ < button
145+ onClick = { handleLogout }
146+ className = "w-full text-sm font-medium text-slate-700 hover:text-blue-600 hover:bg-slate-50 py-2 rounded-lg"
147+ >
148+ Salir
149+ </ button >
150+ </ >
151+ ) : (
152+ < >
153+ < Link
154+ to = "/login"
155+ onClick = { ( ) => setIsMobileMenuOpen ( false ) }
156+ className = "flex items-center justify-center text-slate-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg transition-colors font-medium text-sm"
157+ >
158+ < LogIn className = "w-4 h-4 mr-2" />
159+ Login
160+ </ Link >
161+ < Link
162+ to = "/register"
163+ onClick = { ( ) => setIsMobileMenuOpen ( false ) }
164+ className = "flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors font-medium text-sm"
165+ >
166+ < UserPlus className = "w-4 h-4 mr-2" />
167+ Register
168+ </ Link >
169+ { ( ! user || user . role === 'student' ) && (
170+ < button
171+ onClick = { handleApplyClick }
172+ className = "w-full flex items-center justify-center space-x-2 border-green-200 text-green-700 hover:bg-green-50 bg-transparent px-4 py-2 rounded-lg border text-sm font-medium mt-2"
173+ >
174+ < GraduationCap className = "w-4 h-4" />
175+ < span > Quiero ser profesor</ span >
176+ </ button >
177+ ) }
178+ </ >
179+ ) }
180+ </ div >
181+ ) }
110182 </ header >
111183 ) ;
112- }
184+ }
0 commit comments