update
This commit is contained in:
Iliyan Angelov
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Hotel,
|
||||
@@ -9,7 +9,10 @@ import {
|
||||
LogIn,
|
||||
UserPlus,
|
||||
Heart,
|
||||
Phone,
|
||||
Mail,
|
||||
} from 'lucide-react';
|
||||
import { useClickOutside } from '../../hooks/useClickOutside';
|
||||
|
||||
interface HeaderProps {
|
||||
isAuthenticated?: boolean;
|
||||
@@ -30,6 +33,14 @@ const Header: React.FC<HeaderProps> = ({
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] =
|
||||
useState(false);
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
const userMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close user menu when clicking outside
|
||||
useClickOutside(userMenuRef, () => {
|
||||
if (isUserMenuOpen) {
|
||||
setIsUserMenuOpen(false);
|
||||
}
|
||||
});
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
@@ -48,112 +59,151 @@ const Header: React.FC<HeaderProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-white shadow-md sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
||||
<header className="bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] sticky top-0 z-50 border-b border-[#d4af37]/20 shadow-2xl">
|
||||
{/* Top Bar - Contact Info */}
|
||||
<div className="hidden lg:block bg-[#0a0a0a]/50 border-b border-[#d4af37]/10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
|
||||
<div className="flex items-center justify-end space-x-6 text-sm">
|
||||
<a href="tel:+1234567890" className="flex items-center space-x-2 text-[#d4af37] hover:text-[#f5d76e] transition-colors duration-300 font-light">
|
||||
<Phone className="w-3.5 h-3.5" />
|
||||
<span className="tracking-wide">+1 (234) 567-890</span>
|
||||
</a>
|
||||
<a href="mailto:info@luxuryhotel.com" className="flex items-center space-x-2 text-[#d4af37] hover:text-[#f5d76e] transition-colors duration-300 font-light">
|
||||
<Mail className="w-3.5 h-3.5" />
|
||||
<span className="tracking-wide">info@luxuryhotel.com</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Header */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center space-x-2
|
||||
hover:opacity-80 transition-opacity"
|
||||
className="flex items-center space-x-3
|
||||
group transition-all duration-300 hover:opacity-90"
|
||||
>
|
||||
<Hotel className="w-8 h-8 text-blue-600" />
|
||||
<span className="text-2xl font-bold text-gray-800">
|
||||
Hotel Booking
|
||||
</span>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#d4af37] to-[#f5d76e] rounded-full blur-md opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
|
||||
<Hotel className="relative w-10 h-10 text-[#d4af37] drop-shadow-lg" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-serif font-semibold text-white tracking-tight leading-tight">
|
||||
Luxury Hotel
|
||||
</span>
|
||||
<span className="text-[10px] text-[#d4af37] tracking-[0.2em] uppercase font-light">
|
||||
Excellence Redefined
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center
|
||||
space-x-6"
|
||||
space-x-1"
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className="text-gray-700 hover:text-blue-600
|
||||
transition-colors font-medium"
|
||||
className="text-white/90 hover:text-[#d4af37]
|
||||
transition-all duration-300 font-light px-4 py-2
|
||||
relative group tracking-wide"
|
||||
>
|
||||
Home
|
||||
<span className="relative z-10">Home</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/rooms"
|
||||
className="text-gray-700 hover:text-blue-600
|
||||
transition-colors font-medium"
|
||||
className="text-white/90 hover:text-[#d4af37]
|
||||
transition-all duration-300 font-light px-4 py-2
|
||||
relative group tracking-wide"
|
||||
>
|
||||
Rooms
|
||||
<span className="relative z-10">Rooms</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/bookings"
|
||||
className="text-gray-700 hover:text-blue-600
|
||||
transition-colors font-medium"
|
||||
className="text-white/90 hover:text-[#d4af37]
|
||||
transition-all duration-300 font-light px-4 py-2
|
||||
relative group tracking-wide"
|
||||
>
|
||||
Bookings
|
||||
<span className="relative z-10">Bookings</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/favorites"
|
||||
className="text-gray-700 hover:text-blue-600
|
||||
transition-colors font-medium flex
|
||||
items-center gap-1"
|
||||
className="text-white/90 hover:text-[#d4af37]
|
||||
transition-all duration-300 font-light px-4 py-2
|
||||
relative group tracking-wide flex items-center gap-2"
|
||||
>
|
||||
<Heart className="w-4 h-4" />
|
||||
Favorites
|
||||
<Heart className="w-4 h-4 relative z-10" />
|
||||
<span className="relative z-10">Favorites</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-gray-700 hover:text-blue-600
|
||||
transition-colors font-medium"
|
||||
className="text-white/90 hover:text-[#d4af37]
|
||||
transition-all duration-300 font-light px-4 py-2
|
||||
relative group tracking-wide"
|
||||
>
|
||||
About
|
||||
<span className="relative z-10">About</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Auth Section */}
|
||||
<div className="hidden md:flex items-center
|
||||
space-x-4"
|
||||
space-x-3"
|
||||
>
|
||||
{!isAuthenticated ? (
|
||||
<>
|
||||
<Link
|
||||
to="/login"
|
||||
className="flex items-center space-x-2
|
||||
px-4 py-2 text-blue-600
|
||||
hover:text-blue-700 transition-colors
|
||||
font-medium"
|
||||
px-5 py-2 text-white/90
|
||||
hover:text-[#d4af37] transition-all duration-300
|
||||
font-light tracking-wide relative group"
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
<span>Login</span>
|
||||
<LogIn className="w-4 h-4 relative z-10" />
|
||||
<span className="relative z-10">Login</span>
|
||||
<span className="absolute inset-0 border border-[#d4af37]/30 rounded-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
className="flex items-center space-x-2
|
||||
px-4 py-2 bg-blue-600 text-white
|
||||
rounded-lg hover:bg-blue-700
|
||||
transition-colors font-medium"
|
||||
px-6 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227]
|
||||
text-[#0f0f0f] rounded-sm hover:from-[#f5d76e]
|
||||
hover:to-[#d4af37] transition-all duration-300
|
||||
font-medium tracking-wide shadow-lg shadow-[#d4af37]/20
|
||||
hover:shadow-[#d4af37]/30 relative overflow-hidden group"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
<span>Register</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
|
||||
<UserPlus className="w-4 h-4 relative z-10" />
|
||||
<span className="relative z-10">Register</span>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<div className="relative" ref={userMenuRef}>
|
||||
<button
|
||||
onClick={toggleUserMenu}
|
||||
className="flex items-center space-x-3
|
||||
px-3 py-2 rounded-lg hover:bg-gray-100
|
||||
transition-colors"
|
||||
px-3 py-2 rounded-sm hover:bg-white/10
|
||||
transition-all duration-300 border border-transparent
|
||||
hover:border-[#d4af37]/30"
|
||||
>
|
||||
{userInfo?.avatar ? (
|
||||
<img
|
||||
src={userInfo.avatar}
|
||||
alt={userInfo.name}
|
||||
className="w-8 h-8 rounded-full
|
||||
object-cover"
|
||||
className="w-9 h-9 rounded-full
|
||||
object-cover ring-2 ring-[#d4af37]/50"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 bg-blue-500
|
||||
<div className="w-9 h-9 bg-gradient-to-br from-[#d4af37] to-[#c9a227]
|
||||
rounded-full flex items-center
|
||||
justify-center"
|
||||
justify-center ring-2 ring-[#d4af37]/50 shadow-lg"
|
||||
>
|
||||
<span className="text-white
|
||||
<span className="text-[#0f0f0f]
|
||||
font-semibold text-sm"
|
||||
>
|
||||
{userInfo?.name?.charAt(0)
|
||||
@@ -161,7 +211,7 @@ const Header: React.FC<HeaderProps> = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="font-medium text-gray-700">
|
||||
<span className="font-light text-white/90 tracking-wide">
|
||||
{userInfo?.name}
|
||||
</span>
|
||||
</button>
|
||||
@@ -169,18 +219,21 @@ const Header: React.FC<HeaderProps> = ({
|
||||
{/* User Dropdown Menu */}
|
||||
{isUserMenuOpen && (
|
||||
<div className="absolute right-0 mt-2
|
||||
w-48 bg-white rounded-lg shadow-lg
|
||||
py-2 border border-gray-200 z-50"
|
||||
w-52 bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f]
|
||||
rounded-sm shadow-2xl py-2 border border-[#d4af37]/20
|
||||
z-50 backdrop-blur-xl animate-fade-in"
|
||||
>
|
||||
<Link
|
||||
to="/profile"
|
||||
onClick={() => setIsUserMenuOpen(false)}
|
||||
className="flex items-center space-x-2
|
||||
px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 transition-colors"
|
||||
className="flex items-center space-x-3
|
||||
px-4 py-2.5 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
transition-all duration-300 border-l-2 border-transparent
|
||||
hover:border-[#d4af37]"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Profile</span>
|
||||
<span className="font-light tracking-wide">Profile</span>
|
||||
</Link>
|
||||
{userInfo?.role === 'admin' && (
|
||||
<Link
|
||||
@@ -189,22 +242,26 @@ const Header: React.FC<HeaderProps> = ({
|
||||
setIsUserMenuOpen(false)
|
||||
}
|
||||
className="flex items-center
|
||||
space-x-2 px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 transition-colors"
|
||||
space-x-3 px-4 py-2.5 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
transition-all duration-300 border-l-2 border-transparent
|
||||
hover:border-[#d4af37]"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Admin</span>
|
||||
<span className="font-light tracking-wide">Admin</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className="border-t border-[#d4af37]/20 my-1"></div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center
|
||||
space-x-2 px-4 py-2 text-red-600
|
||||
hover:bg-gray-100 transition-colors
|
||||
text-left"
|
||||
space-x-3 px-4 py-2.5 text-red-400/90
|
||||
hover:bg-red-500/10 hover:text-red-400
|
||||
transition-all duration-300 border-l-2 border-transparent
|
||||
hover:border-red-500/50 text-left"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span>Logout</span>
|
||||
<span className="font-light tracking-wide">Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -215,13 +272,14 @@ const Header: React.FC<HeaderProps> = ({
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={toggleMobileMenu}
|
||||
className="md:hidden p-2 rounded-lg
|
||||
hover:bg-gray-100 transition-colors"
|
||||
className="md:hidden p-2 rounded-sm
|
||||
hover:bg-white/10 border border-transparent
|
||||
hover:border-[#d4af37]/30 transition-all duration-300"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6" />
|
||||
<X className="w-6 h-6 text-[#d4af37]" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6" />
|
||||
<Menu className="w-6 h-6 text-white/90" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
@@ -229,42 +287,52 @@ const Header: React.FC<HeaderProps> = ({
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden py-4 border-t
|
||||
border-gray-200 mt-4"
|
||||
border-[#d4af37]/20 mt-4 bg-[#0a0a0a]/50
|
||||
backdrop-blur-xl animate-fade-in rounded-b-sm"
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<Link
|
||||
to="/"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
className="px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/rooms"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
className="px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
Rooms
|
||||
</Link>
|
||||
<Link
|
||||
to="/bookings"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
className="px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
Bookings
|
||||
</Link>
|
||||
<Link
|
||||
to="/favorites"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors flex items-center gap-2"
|
||||
className="px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide
|
||||
flex items-center gap-2"
|
||||
>
|
||||
<Heart className="w-4 h-4" />
|
||||
Favorites
|
||||
@@ -272,15 +340,17 @@ const Header: React.FC<HeaderProps> = ({
|
||||
<Link
|
||||
to="/about"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
className="px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
|
||||
<div className="border-t border-gray-200
|
||||
pt-2 mt-2"
|
||||
<div className="border-t border-[#d4af37]/20
|
||||
pt-3 mt-3"
|
||||
>
|
||||
{!isAuthenticated ? (
|
||||
<>
|
||||
@@ -290,9 +360,11 @@ const Header: React.FC<HeaderProps> = ({
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
className="flex items-center
|
||||
space-x-2 px-4 py-2 text-blue-600
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
space-x-2 px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
<span>Login</span>
|
||||
@@ -303,9 +375,12 @@ const Header: React.FC<HeaderProps> = ({
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
className="flex items-center
|
||||
space-x-2 px-4 py-2 text-blue-600
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
space-x-2 px-4 py-3 bg-gradient-to-r
|
||||
from-[#d4af37] to-[#c9a227] text-[#0f0f0f]
|
||||
rounded-sm hover:from-[#f5d76e]
|
||||
hover:to-[#d4af37] transition-all
|
||||
duration-300 font-medium tracking-wide
|
||||
mt-2"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
<span>Register</span>
|
||||
@@ -314,7 +389,7 @@ const Header: React.FC<HeaderProps> = ({
|
||||
) : (
|
||||
<>
|
||||
<div className="px-4 py-2 text-sm
|
||||
text-gray-500"
|
||||
text-[#d4af37]/70 font-light tracking-wide"
|
||||
>
|
||||
Hello, {userInfo?.name}
|
||||
</div>
|
||||
@@ -324,9 +399,11 @@ const Header: React.FC<HeaderProps> = ({
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
className="flex items-center
|
||||
space-x-2 px-4 py-2 text-gray-700
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors"
|
||||
space-x-2 px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Profile</span>
|
||||
@@ -338,9 +415,11 @@ const Header: React.FC<HeaderProps> = ({
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
className="flex items-center
|
||||
space-x-2 px-4 py-2
|
||||
text-gray-700 hover:bg-gray-100
|
||||
rounded-lg transition-colors"
|
||||
space-x-2 px-4 py-3 text-white/90
|
||||
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-[#d4af37] font-light tracking-wide"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Admin</span>
|
||||
@@ -349,9 +428,12 @@ const Header: React.FC<HeaderProps> = ({
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center
|
||||
space-x-2 px-4 py-2 text-red-600
|
||||
hover:bg-gray-100 rounded-lg
|
||||
transition-colors text-left"
|
||||
space-x-2 px-4 py-3 text-red-400/90
|
||||
hover:bg-red-500/10 hover:text-red-400
|
||||
rounded-sm transition-all duration-300
|
||||
border-l-2 border-transparent
|
||||
hover:border-red-500/50 text-left
|
||||
font-light tracking-wide"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span>Logout</span>
|
||||
|
||||
Reference in New Issue
Block a user