93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
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 navItems = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/about", label: "About" },
|
|
{ href: "/contact", label: "Contact" },
|
|
]
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-green-200 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 justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center space-x-3">
|
|
<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">
|
|
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`text-sm font-medium transition-colors hover:text-nature-green ${
|
|
pathname === item.href ? "text-nature-green border-b-2 border-nature-green pb-1" : "text-gray-600"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Desktop CTA */}
|
|
<div className="hidden md:flex">
|
|
<ClinicSenseButton size="small" color="green" />
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden">
|
|
<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}
|
|
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>
|
|
</header>
|
|
)
|
|
}
|