refactor: Reimplement header functionality within CommonHeader and add new profile menu icons.
This commit is contained in:
pradeepkumar
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
@@ -14,6 +14,24 @@ const navLinks = [
|
||||
export function CommonHeader() {
|
||||
const { data: session } = useSession();
|
||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||
const profileMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
|
||||
setShowProfileMenu(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (showProfileMenu) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [showProfileMenu]);
|
||||
|
||||
const userName = session?.user?.name;
|
||||
const userEmail = session?.user?.email;
|
||||
@@ -65,53 +83,114 @@ export function CommonHeader() {
|
||||
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
|
||||
{/* Profile Icon with Dropdown */}
|
||||
<div className="relative">
|
||||
{/* Profile Section with Greeting - Entire area clickable */}
|
||||
<div className="relative" ref={profileMenuRef}>
|
||||
<button
|
||||
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
||||
className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
|
||||
className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src="/assets/profile-icon.svg"
|
||||
alt="Profile"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
{/* Avatar */}
|
||||
<div className="w-[35px] h-[35px] rounded-full overflow-hidden border-2 border-[#e58625]">
|
||||
<Image
|
||||
src="/assets/icons/user-placeholder-icon.svg"
|
||||
alt="Profile"
|
||||
width={35}
|
||||
height={35}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Greeting Text */}
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-bold text-[14px] text-[#e58625] leading-tight">
|
||||
Hi {userName?.split(' ')[0] || 'User'} !
|
||||
</span>
|
||||
<span className="font-bold text-[9px] text-[#00293d] leading-tight">
|
||||
Welcome back !
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown Menu */}
|
||||
{showProfileMenu && (
|
||||
<div className="absolute right-0 mt-2 w-56 bg-white rounded-[15px] border border-[#00293d]/10 py-3 z-50">
|
||||
<div className="px-4 py-2 border-b border-[#00293d]/10">
|
||||
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
|
||||
{userName || 'User'}
|
||||
<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)]">
|
||||
{/* Arrow/Triangle at top */}
|
||||
<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>
|
||||
|
||||
{/* User Profile Section */}
|
||||
<div className="flex items-center gap-3 px-4 py-4 border-b border-black/10">
|
||||
<div className="w-[42px] h-[42px] rounded-full overflow-hidden flex-shrink-0">
|
||||
<Image
|
||||
src="/assets/icons/user-placeholder-icon.svg"
|
||||
alt="Profile"
|
||||
width={42}
|
||||
height={42}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-fractul font-medium text-[16px] leading-[20px] text-black">
|
||||
{userName?.split(' ')[0] || 'User'}
|
||||
</p>
|
||||
<p className="font-serif text-[14px] leading-[18px] text-black/50">
|
||||
{userEmail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Account Settings */}
|
||||
<Link
|
||||
href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
|
||||
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(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>
|
||||
|
||||
{/* Notification Settings */}
|
||||
<Link
|
||||
href={userRole === 'AGENT' ? '/agent/settings/notifications' : '/user/settings/notifications'}
|
||||
className="flex items-center gap-3 px-4 py-3 border-b border-black/10 hover:bg-black/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(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>
|
||||
<p className="font-serif text-[12px] leading-[16px] text-[#00293D]/50">{userEmail}</p>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
<Link
|
||||
href={dashboardLink}
|
||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(false)}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
|
||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||
onClick={() => setShowProfileMenu(false)}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-[#00293d]/10 pt-2">
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||
className="w-full text-left px-4 py-2 font-serif text-[14px] leading-[19px] text-[#e58625] hover:bg-[#00293d]/5 transition-colors"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Log Out */}
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-black/5 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/logout-icon.svg"
|
||||
alt="Log Out"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<p className="font-fractul font-bold text-[16px] leading-[18px] text-[#e58625]">
|
||||
Log Out
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user