121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
|
import { Menu } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import ClinicSenseButton from "@/components/clinicsense-button"
|
|
import Image from "next/image"
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname()
|
|
|
|
const handleSmoothScroll = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
|
// Only handle smooth scroll if we're on the homepage
|
|
if (pathname === "/" && href.startsWith("/#")) {
|
|
e.preventDefault()
|
|
const targetId = href.substring(2) // Remove "/#" to get the ID
|
|
const element = document.getElementById(targetId)
|
|
if (element) {
|
|
const headerOffset = 80 // Height of sticky header
|
|
const elementPosition = element.getBoundingClientRect().top
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: "smooth",
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
const navItems = [
|
|
{ href: "/#services", label: "Services" },
|
|
{ href: "/#prices", label: "Prices" },
|
|
{ href: "/about", label: "About" },
|
|
{ href: "/contact", label: "Contact" },
|
|
]
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-beige bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex h-16 items-center">
|
|
<div className="grid grid-cols-[1fr_auto_1fr] items-center w-full gap-4">
|
|
{/* Logo - Left aligned */}
|
|
<Link href="/" className="flex items-center space-x-3 justify-self-start">
|
|
<Image
|
|
src="/images/logo.jpg"
|
|
alt="Ebb'nFlow Therapeutics Logo"
|
|
width={40}
|
|
height={40}
|
|
className="object-contain"
|
|
/>
|
|
<div className="text-xl font-light text-gray-800 hidden lg:block">
|
|
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation - Centered */}
|
|
<nav className="hidden md:flex items-center justify-center">
|
|
<div className="flex items-center space-x-6 lg:space-x-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={(e) => handleSmoothScroll(e, item.href)}
|
|
className={`text-sm font-medium transition-colors hover:text-nature-green whitespace-nowrap ${
|
|
pathname === item.href ? "text-nature-green border-b-2 border-nature-green pb-1" : "text-gray-600"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Desktop CTA - Right aligned */}
|
|
<div className="hidden md:flex justify-self-end">
|
|
<ClinicSenseButton size="small" color="green" />
|
|
</div>
|
|
|
|
{/* Mobile Navigation Button */}
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden ml-auto">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
|
|
<div className="flex flex-col space-y-4 mt-8">
|
|
<Link href="/" className="text-lg font-light text-gray-800 mb-4">
|
|
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
|
</Link>
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={(e) => handleSmoothScroll(e, item.href)}
|
|
className={`text-lg font-medium transition-colors hover:text-nature-green ${
|
|
pathname === item.href ? "text-nature-green" : "text-gray-600"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<div className="pt-4">
|
|
<ClinicSenseButton className="w-full" size="small" color="green" />
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|