feat: Add a 'Coming Soon' education page and implement responsive mobile menu functionality and styling adjustments in the common header.
This commit is contained in:
pradeepkumar
@@ -19,27 +19,32 @@ const navLinks = [
|
||||
export function CommonHeader() {
|
||||
const { data: session } = useSession();
|
||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
||||
const profileMenuRef = useRef<HTMLDivElement>(null);
|
||||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [profileImage, setProfileImage] = useState<string | null>(null);
|
||||
const [profileName, setProfileName] = useState<string | null>(null);
|
||||
const [notificationCount, setNotificationCount] = useState(0);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
// Close dropdowns when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
|
||||
setShowProfileMenu(false);
|
||||
}
|
||||
if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
|
||||
setShowMobileMenu(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (showProfileMenu) {
|
||||
if (showProfileMenu || showMobileMenu) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [showProfileMenu]);
|
||||
}, [showProfileMenu, showMobileMenu]);
|
||||
|
||||
// Fetch profile data (image and name) from backend based on user role
|
||||
const fetchProfileData = useCallback(async () => {
|
||||
@@ -131,20 +136,20 @@ export function CommonHeader() {
|
||||
const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/dashboard';
|
||||
|
||||
return (
|
||||
<header className="bg-[#648188] rounded-[20px] px-8">
|
||||
<div className="flex justify-between items-center h-[70px]">
|
||||
<header className="bg-[#648188] rounded-[20px] px-4 md:px-8 relative" ref={mobileMenuRef}>
|
||||
<div className="flex justify-between items-center h-[60px] md:h-[70px]">
|
||||
{/* Logo */}
|
||||
<Link href={dashboardLink}>
|
||||
<Link href={dashboardLink} className="flex-shrink-0">
|
||||
<Image
|
||||
src="/assets/logo.svg"
|
||||
alt="RE-QuestN"
|
||||
width={150}
|
||||
height={40}
|
||||
className="h-10 w-auto"
|
||||
className="h-8 md:h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Navigation */}
|
||||
{/* Navigation - Desktop only */}
|
||||
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
@@ -158,7 +163,7 @@ export function CommonHeader() {
|
||||
</nav>
|
||||
|
||||
{/* Right Side Icons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
{session ? (
|
||||
<>
|
||||
{/* Notification Bell */}
|
||||
@@ -172,7 +177,6 @@ export function CommonHeader() {
|
||||
width={20}
|
||||
height={22}
|
||||
/>
|
||||
{/* Notification Badge */}
|
||||
{notificationCount > 0 && (
|
||||
<span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
|
||||
<span className="text-white text-[10px] font-bold leading-none">
|
||||
@@ -182,14 +186,14 @@ export function CommonHeader() {
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Profile Section with Greeting - Entire area clickable */}
|
||||
{/* Profile Section */}
|
||||
<div className="relative" ref={profileMenuRef}>
|
||||
<button
|
||||
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
||||
className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
|
||||
className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="w-[35px] h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100">
|
||||
<div className="w-[32px] h-[32px] md:w-[35px] md:h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100 flex-shrink-0">
|
||||
{userImage ? (
|
||||
<img
|
||||
src={userImage}
|
||||
@@ -207,8 +211,8 @@ export function CommonHeader() {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* Greeting Text */}
|
||||
<div className="flex flex-col text-left">
|
||||
{/* Greeting Text - hidden on mobile */}
|
||||
<div className="hidden sm:flex flex-col text-left">
|
||||
<span className="font-bold text-[14px] text-[#e58625] leading-tight">
|
||||
Hi {userName?.split(' ')[0] || 'User'} !
|
||||
</span>
|
||||
@@ -221,10 +225,8 @@ export function CommonHeader() {
|
||||
{/* Profile Dropdown Menu */}
|
||||
{showProfileMenu && (
|
||||
<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 bg-gray-100">
|
||||
{userImage ? (
|
||||
@@ -254,46 +256,27 @@ export function CommonHeader() {
|
||||
</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}
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Log Out */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowProfileMenu(false);
|
||||
@@ -304,15 +287,8 @@ export function CommonHeader() {
|
||||
}}
|
||||
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>
|
||||
<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>
|
||||
)}
|
||||
@@ -330,23 +306,43 @@ export function CommonHeader() {
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className="md:hidden p-2 hover:opacity-80 transition-opacity">
|
||||
<button
|
||||
className="md:hidden p-1 hover:opacity-80 transition-opacity"
|
||||
onClick={() => setShowMobileMenu(!showMobileMenu)}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6 text-[#00293d]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
{showMobileMenu ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Menu */}
|
||||
{showMobileMenu && (
|
||||
<div className="md:hidden border-t border-white/20 py-3 pb-4">
|
||||
<nav className="flex flex-col gap-1">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setShowMobileMenu(false)}
|
||||
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors px-2 py-2 rounded-[10px] hover:bg-white/10"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user