const NAVBAR_BOOKING_URL = 'https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking';
const NAVBAR_WHATSAPP_URL = 'https://wa.me/971563690151?text=Hi%20HAYRE%2C%20I%27d%20like%20to%20book%20an%20appointment.';
const NAVBAR_CALL_URL = 'tel:+971563690151';
const iconBaseProps = {
fill: 'none',
stroke: 'currentColor',
strokeLinecap: 'round',
strokeLinejoin: 'round',
vectorEffect: 'non-scaling-stroke',
'aria-hidden': 'true',
};
const PhoneIcon = ({ className }) => (
);
const WhatsAppIcon = ({ className }) => (
);
const CalendarIcon = ({ className }) => (
);
const InstagramIcon = ({ className }) => (
);
const FreshaIcon = ({ className }) => (
);
const ArrowIcon = ({ className }) => (
);
window.HayreIcons = { PhoneIcon, WhatsAppIcon, CalendarIcon, InstagramIcon, FreshaIcon, ArrowIcon };
const Navbar = ({ active = 'home', onNav }) => {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
const headerRef = React.useRef(null);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Close the mobile menu on outside click or Escape
React.useEffect(() => {
if (!open) return;
const onDown = (e) => {
if (headerRef.current && !headerRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
document.addEventListener('pointerdown', onDown);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('pointerdown', onDown);
document.removeEventListener('keydown', onKey);
};
}, [open]);
const items = [
{ id: 'home', label: 'Home' },
{ id: 'studio', label: 'Studio' },
{ id: 'services', label: 'Services' },
{ id: 'about', label: 'About' },
{ id: 'contact', label: 'Contact' },
];
const handle = (id) => {
setOpen(false);
onNav && onNav(id);
};
return (
{ e.preventDefault(); handle('home'); }}>
{items.map((it, i) => (
))}
Book Appointment