135 lines
4.9 KiB
JavaScript
135 lines
4.9 KiB
JavaScript
'use client'
|
|
import Link from "next/link";
|
|
import Menu from "../Menu"
|
|
import MobileMenu from "../MobileMenu"
|
|
import { useState, useEffect } from "react"; // Import useState and useEffect
|
|
|
|
export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
|
|
const [email, setEmail] = useState("");
|
|
|
|
useEffect(() => {
|
|
// Set the email address safely
|
|
const user = "bloor";
|
|
const domain = "rapharehab.ca";
|
|
setEmail(`${user}@${domain}`);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<header className={`main-header ${scroll ? "fixed-header" : ""}`}>
|
|
{/* Header Top */}
|
|
<div className="header-top">
|
|
<div className="auto-container">
|
|
<div className="top-inner">
|
|
<ul className="info-list clearfix">
|
|
<li>
|
|
<img
|
|
src="/assets/images/icons/call.webp"
|
|
alt="Phone"
|
|
style={{ marginRight: "8px" }}
|
|
className="red-icon"
|
|
/>
|
|
<Link href="tel:647-722-3434" aria-label="647-722-3434">
|
|
<span style={{
|
|
color: "white",
|
|
}} >
|
|
647-722-3434
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="/assets/images/icons/mail.png"
|
|
alt="Mail"
|
|
style={{ marginRight: "8px" }}
|
|
className="red-icon"
|
|
/>
|
|
{email ? (
|
|
<Link href={`mailto:${email}`} aria-label={email}>
|
|
<span style={{
|
|
color: "white",
|
|
}} >
|
|
{email}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<span style={{
|
|
color: "white",
|
|
}} >
|
|
Loading...
|
|
</span>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
|
|
<ul className="social-links clearfix">
|
|
<li><Link href="/why-rapha-physiotherapy-etobicoke" aria-label="Why us">Why Us</Link></li>
|
|
<li><Link href="/faq-physiotherapy-etobicoke" aria-label="Faq">FAQ's</Link></li>
|
|
<li><Link href="/what-to-expect" aria-label="What to expect">What To Expect</Link></li>
|
|
<li><Link href="/payment-insurance" aria-label="Payment and insurance">Payment And Insurance</Link></li>
|
|
{/* <li><Link href="/refugee-physiotherapy">Refugee Physiotherapy</Link></li> */}
|
|
<li>
|
|
<Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
|
|
<i className="icon-4"></i>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
|
|
<i className="icon-7"></i>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header Upper */}
|
|
<div className="header-lower">
|
|
<div className="outer-container">
|
|
<div className="outer-box new">
|
|
<div className="logo-box">
|
|
<figure className="logo" >
|
|
<Link href="/" aria-label="Logo"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
|
|
</figure>
|
|
</div>
|
|
|
|
<div className="menu-area">
|
|
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
|
|
<i className="icon-bar"></i>
|
|
<i className="icon-bar"></i>
|
|
<i className="icon-bar"></i>
|
|
</div>
|
|
|
|
<nav className="main-menu new-menu navbar-expand-md navbar-light clearfix">
|
|
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
|
|
<Menu />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sticky-header">
|
|
<div className="auto-container">
|
|
<div className="outer-box">
|
|
<div className="logo-box">
|
|
<figure className="logo">
|
|
<Link href="/" aria-label="Logo"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
|
|
</figure>
|
|
</div>
|
|
|
|
<nav className="main-menu navbar-expand-md navbar-light clearfix">
|
|
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
|
|
<Menu />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MobileMenu handleMobileMenu={handleMobileMenu} />
|
|
</header>
|
|
</>
|
|
)
|
|
} |