1- import React from 'react' ;
2- import { Bell , Box , CheckCircle2 , MessageSquare } from 'lucide-react' ;
1+ import React , { useState } from 'react' ;
2+ import { Bell , Box , CheckCircle2 , MessageSquare , Menu , X , LogOut , User as UserIcon } from 'lucide-react' ;
33import { Link , useNavigate } from 'react-router-dom' ;
44import { Avatar , AvatarFallback , AvatarImage } from "../../components/ui/avatar" ;
55import { Button } from "../../components/ui/button" ;
@@ -12,16 +12,23 @@ import useAuthStore from "../../store/authStore";
1212const TopNav = ( ) => {
1313 const navigate = useNavigate ( ) ;
1414 const { notifications = [ ] , markNotificationsRead } = useTicketStore ( ) ;
15- const { profile } = useAuthStore ( ) ;
15+ const { profile, logout } = useAuthStore ( ) ;
16+ const [ isMenuOpen , setIsMenuOpen ] = useState ( false ) ;
17+
1618 const initials = profile ?. full_name ? profile . full_name [ 0 ] . toUpperCase ( ) : ( profile ?. email ? profile . email [ 0 ] . toUpperCase ( ) : 'U' ) ;
1719
20+ const handleLogout = async ( ) => {
21+ await logout ( ) ;
22+ navigate ( '/login' ) ;
23+ } ;
24+
1825 const unreadCount = notifications . filter ( n => ! n . read ) . length ;
1926
2027 return (
2128 < header className = "w-full bg-white border-b border-gray-200 sticky top-0 z-50" >
22- < div className = "max-w-[1100px] mx-auto px-6 h-16 flex items-center justify-between" >
29+ < div className = "max-w-[1100px] mx-auto px-4 md:px- 6 h-16 flex items-center justify-between" >
2330 { /* Left: Logo */ }
24- < div className = "flex items-center gap-3" >
31+ < div className = "flex items-center gap-3 cursor-pointer" onClick = { ( ) => navigate ( '/dashboard' ) } >
2532 < div className = "flex items-center justify-center overflow-hidden" >
2633 < img src = "/favicon.png" alt = "HELPDESK.AI Logo" className = "w-7 h-7 object-contain" />
2734 </ div >
@@ -36,17 +43,76 @@ const TopNav = () => {
3643 </ nav >
3744
3845 { /* Right: Profile */ }
39- < div className = "flex items-center gap-4 " >
46+ < div className = "flex items-center gap-3 " >
4047 < NotificationPopover />
41- < Avatar
42- onClick = { ( ) => navigate ( '/profile' ) }
43- className = "size-9 border border-gray-200 cursor-pointer hover:ring-2 hover:ring-emerald-500 hover:ring-offset-2 transition-all"
48+ < div className = "hidden md:block" >
49+ < Avatar
50+ onClick = { ( ) => navigate ( '/profile' ) }
51+ className = "size-9 border border-gray-200 cursor-pointer hover:ring-2 hover:ring-emerald-500 hover:ring-offset-2 transition-all"
52+ >
53+ < AvatarImage src = { profile ?. profile_picture } />
54+ < AvatarFallback className = "bg-gray-100 font-bold text-gray-600 text-xs" > { initials } </ AvatarFallback >
55+ </ Avatar >
56+ </ div >
57+ < button
58+ onClick = { ( ) => setIsMenuOpen ( ! isMenuOpen ) }
59+ className = "md:hidden p-2 text-gray-600 focus:outline-none"
4460 >
45- < AvatarImage src = { profile ?. profile_picture } />
46- < AvatarFallback className = "bg-gray-100 font-bold text-gray-600 text-xs" > { initials } </ AvatarFallback >
47- </ Avatar >
61+ { isMenuOpen ? < X size = { 24 } /> : < Menu size = { 24 } /> }
62+ </ button >
4863 </ div >
4964 </ div >
65+
66+ { /* Mobile Menu Overlay */ }
67+ { isMenuOpen && (
68+ < div className = "md:hidden bg-white border-t border-gray-100 absolute w-full shadow-2xl z-50 animate-in fade-in slide-in-from-top-2 duration-200" >
69+ < div className = "px-6 py-8 space-y-6" >
70+ < div className = "flex items-center gap-4 border-b border-gray-50 pb-6" >
71+ < Avatar className = "size-12 border border-gray-100" >
72+ < AvatarImage src = { profile ?. profile_picture } />
73+ < AvatarFallback className = "bg-emerald-50 text-emerald-700 font-black" > { initials } </ AvatarFallback >
74+ </ Avatar >
75+ < div >
76+ < p className = "font-bold text-gray-900" > { profile ?. full_name } </ p >
77+ < p className = "text-xs text-gray-400 font-medium" > { profile ?. email } </ p >
78+ </ div >
79+ </ div >
80+
81+ < div className = "space-y-4" >
82+ < Link
83+ to = "/dashboard"
84+ onClick = { ( ) => setIsMenuOpen ( false ) }
85+ className = "flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
86+ >
87+ < Box size = { 20 } className = "text-gray-400" /> Dashboard
88+ </ Link >
89+ < Link
90+ to = "/my-tickets"
91+ onClick = { ( ) => setIsMenuOpen ( false ) }
92+ className = "flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
93+ >
94+ < MessageSquare size = { 20 } className = "text-gray-400" /> My Tickets
95+ </ Link >
96+ < Link
97+ to = "/profile"
98+ onClick = { ( ) => setIsMenuOpen ( false ) }
99+ className = "flex items-center gap-3 text-lg font-bold text-gray-700 hover:text-emerald-700 transition-colors"
100+ >
101+ < UserIcon size = { 20 } className = "text-gray-400" /> My Profile
102+ </ Link >
103+ </ div >
104+
105+ < div className = "pt-6 border-t border-gray-50" >
106+ < button
107+ onClick = { handleLogout }
108+ className = "w-full py-4 bg-gray-50 rounded-2xl flex items-center justify-center gap-2 text-red-600 font-bold active:scale-95 transition-all"
109+ >
110+ < LogOut size = { 18 } /> Sign Out
111+ </ button >
112+ </ div >
113+ </ div >
114+ </ div >
115+ ) }
50116 </ header >
51117 ) ;
52118} ;
0 commit comments