68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
|
|
export default function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
const toggleMenu = () => setIsOpen(!isOpen)
|
|
const closeMenu = () => setIsOpen(false)
|
|
|
|
return (
|
|
<header id="navbar">
|
|
<div className="container">
|
|
<nav>
|
|
<Link href="/" className="logo">
|
|
<Image src="./images/logo.jpg" alt="Ebb'nFlow Therapeutics Logo" width={100} height={100} />
|
|
<span className="logo-text">
|
|
Ebb'nFlow <span className="highlight">Therapeutics</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<button className="mobile-menu-btn" onClick={toggleMenu}>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<ul className={`nav-links ${isOpen ? "active" : ""}`} id="navLinks">
|
|
<li>
|
|
<a href="#services" onClick={closeMenu}>
|
|
Services
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#prices" onClick={closeMenu}>
|
|
Prices
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<Link href="/about" onClick={closeMenu}>
|
|
About
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/contact" onClick={closeMenu}>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
<li className="cta-nav">
|
|
<a
|
|
href="https://ebbnflowmassage.clinicsense.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn btn-primary"
|
|
style={{ color: "white" }}
|
|
>
|
|
Book Appointment
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|