feat: Redesign header with mobile menu and authenticated user profile, add search input validation to the hero section, and enhance user session data.
This commit is contained in:
pradeepkumar
@@ -3,79 +3,171 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { Button } from '../ui/Button';
|
||||
import { useState } from 'react';
|
||||
|
||||
export function Header() {
|
||||
const { data: session } = useSession();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
// Get first name from session
|
||||
const firstName = session?.user?.name?.split(' ')[0] || 'User';
|
||||
|
||||
return (
|
||||
<header className="bg-[#00293d] text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header className="bg-[#5d7a87]">
|
||||
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Link href="/" className="flex items-center">
|
||||
<Image
|
||||
src="/assets/logo-white.svg"
|
||||
alt="RE-Quest"
|
||||
width={150}
|
||||
height={40}
|
||||
className="h-10 w-auto"
|
||||
width={184}
|
||||
height={44}
|
||||
className="h-11 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<Link href="/education" className="hover:text-[#f5a623] transition-colors">
|
||||
Education
|
||||
</Link>
|
||||
<Link href="/about" className="hover:text-[#f5a623] transition-colors">
|
||||
About Us
|
||||
</Link>
|
||||
<Link href="/faq" className="hover:text-[#f5a623] transition-colors">
|
||||
FAQ's
|
||||
</Link>
|
||||
</nav>
|
||||
{session ? (
|
||||
/* ============ AUTHENTICATED HEADER ============ */
|
||||
<>
|
||||
{/* Navigation - Desktop */}
|
||||
<nav className="hidden md:flex items-center gap-10">
|
||||
<Link
|
||||
href="/education"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors"
|
||||
>
|
||||
Education
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors"
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors"
|
||||
>
|
||||
FAQ's
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Right Side */}
|
||||
<div className="flex items-center gap-4">
|
||||
{session ? (
|
||||
<>
|
||||
{/* Right Side - Authenticated */}
|
||||
<div className="flex items-center gap-5">
|
||||
{/* Notification Bell */}
|
||||
<button className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* Profile */}
|
||||
<Link href="/user/dashboard" className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<Link
|
||||
href="/notifications"
|
||||
className="relative hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<Image
|
||||
src="/assets/icons/notification-bell-icon.svg"
|
||||
alt="Notifications"
|
||||
width={20}
|
||||
height={22}
|
||||
/>
|
||||
{/* Red notification dot */}
|
||||
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full border border-[#5d7a87]"></span>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/login">
|
||||
<Button variant="outline" size="sm" className="border-white text-white hover:bg-white hover:text-[#00293d]">
|
||||
Login
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/register">
|
||||
<Button variant="primary" size="sm">
|
||||
Sign Up
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className="md:hidden p-2 hover:bg-white/10 rounded-lg transition-colors">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/* Profile Section */}
|
||||
<Link href="/user/dashboard" className="flex items-center gap-3">
|
||||
{/* Profile Avatar */}
|
||||
<div className="w-[35px] h-[35px] rounded-full overflow-hidden bg-gray-300 flex-shrink-0">
|
||||
{session.user?.image ? (
|
||||
<Image
|
||||
src={session.user.image}
|
||||
alt="Profile"
|
||||
width={35}
|
||||
height={35}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<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="hidden sm:flex flex-col">
|
||||
<span className="font-bold text-[14px] text-[#e58625] leading-tight">
|
||||
Hi {firstName} !
|
||||
</span>
|
||||
<span className="font-bold text-[9px] text-[#00293d] leading-tight">
|
||||
Welcome back !
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<Image
|
||||
src="/assets/icons/close-icon.svg"
|
||||
alt="Close menu"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src="/assets/icons/menu-icon.svg"
|
||||
alt="Open menu"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* ============ NON-AUTHENTICATED HEADER ============ */
|
||||
/* Simple: Just logo + Get Started button */
|
||||
<div className="flex items-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="bg-[#e58625] hover:bg-[#d4780f] text-white font-bold text-[14px] px-6 py-2.5 rounded-[15px] transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Dropdown - Authenticated Only */}
|
||||
{session && mobileMenuOpen && (
|
||||
<div className="md:hidden pb-4 border-t border-white/20 mt-2 pt-4">
|
||||
<nav className="flex flex-col gap-3">
|
||||
<Link
|
||||
href="/education"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors py-2"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Education
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors py-2"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="font-bold text-[15px] text-[#00293d] hover:text-[#e58625] transition-colors py-2"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
FAQ's
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user