Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement guest menu in the common header for unauthenticated users and enhance JWT session handling for user profile updates.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-13 12:41:35 +05:30
parent 45adaf2deb
commit b339dd865c
4 changed files with 96 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/layout/CommonHeader.tsx
View File

@@ -19,8 +19,10 @@ const navLinks = [
export function CommonHeader() {
const { data: session } = useSession();
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [showGuestMenu, setShowGuestMenu] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false);
const profileMenuRef = useRef<HTMLDivElement>(null);
const guestMenuRef = useRef<HTMLDivElement>(null);
const mobileMenuRef = useRef<HTMLDivElement>(null);
const [profileImage, setProfileImage] = useState<string | null>(null);
const [profileName, setProfileName] = useState<string | null>(null);
@@ -32,19 +34,22 @@ export function CommonHeader() {
if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
setShowProfileMenu(false);
}
if (guestMenuRef.current && !guestMenuRef.current.contains(event.target as Node)) {
setShowGuestMenu(false);
}
if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
setShowMobileMenu(false);
}
}
if (showProfileMenu || showMobileMenu) {
if (showProfileMenu || showGuestMenu || showMobileMenu) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [showProfileMenu, showMobileMenu]);
}, [showProfileMenu, showGuestMenu, showMobileMenu]);
// Fetch profile data (image and name) from backend based on user role
const fetchProfileData = useCallback(async () => {
@@ -292,14 +297,83 @@ export function CommonHeader() {
</div>
</>
) : (
<Link href="/login" className="hover:opacity-80 transition-opacity">
<Image
src="/assets/icons/profile-circle-orange-icon.svg"
alt="Login"
width={32}
height={32}
/>
</Link>
<div className="relative" ref={guestMenuRef}>
<button
onClick={() => setShowGuestMenu(!showGuestMenu)}
className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
>
<Image
src="/assets/icons/signin-user-icon.svg"
alt="Sign in"
width={20}
height={22}
/>
<div className="hidden sm:flex flex-col text-left">
<span className="font-fractul font-bold text-[14px] text-[#e58625] leading-tight">
Sign in
</span>
<span className="font-fractul font-bold text-[10px] text-[#00293d] leading-tight">
Sign into connect
</span>
</div>
</button>
{showGuestMenu && (
<div className="absolute right-0 top-full mt-3 w-[271px] bg-white rounded-[15px] border border-black/20 z-50 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
<div className="absolute -top-2 right-6 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-white"></div>
<div className="flex flex-col items-center pt-6 pb-4 border-b border-black/10">
<Image
src="/assets/icons/signin-user-icon.svg"
alt="User"
width={36}
height={40}
/>
<p className="font-serif text-[14px] text-black/50 mt-3">
Sign in or create account to continue
</p>
</div>
<Link
href="/login"
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
onClick={() => setShowGuestMenu(false)}
>
<Image src="/assets/icons/settings-icon.svg" alt="Settings" width={24} height={24} />
<div className="flex flex-col">
<p className="font-fractul text-[16px] leading-[18px] text-black">Account Settings</p>
<p className="font-serif text-[14px] leading-[18px] text-black/50">Profile, Security</p>
</div>
</Link>
<Link
href="/login"
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
onClick={() => setShowGuestMenu(false)}
>
<Image src="/assets/icons/notification-settings-icon.svg" alt="Notifications" width={24} height={24} />
<p className="font-fractul text-[16px] leading-[18px] text-black">Notification Settings</p>
</Link>
<div className="flex gap-3 px-4 py-4">
<Link
href="/signup"
onClick={() => setShowGuestMenu(false)}
className="flex-1 h-[37px] bg-[#e58625] rounded-[15px] flex items-center justify-center font-fractul text-[14px] text-white hover:bg-[#d47920] transition-colors"
>
Sign up
</Link>
<Link
href="/login"
onClick={() => setShowGuestMenu(false)}
className="flex-1 h-[37px] border border-[#e58625] rounded-[15px] flex items-center justify-center font-fractul text-[14px] text-[#e58625] hover:bg-[#e58625]/5 transition-colors"
>
Login
</Link>
</div>
</div>
)}
</div>
)}
{/* Mobile Menu Button */}