126 lines
4.5 KiB
TypeScript
126 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Menu, X } from "lucide-react"
|
|
|
|
export function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
const [activeSection, setActiveSection] = useState("home")
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50)
|
|
|
|
const sections = ["home", "artists", "services", "contact"]
|
|
const scrollPosition = window.scrollY + 100
|
|
|
|
for (const section of sections) {
|
|
const element = document.getElementById(section)
|
|
if (element) {
|
|
const { offsetTop, offsetHeight } = element
|
|
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
|
setActiveSection(section)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
const navItems = [
|
|
{ href: "#home", label: "Home", id: "home" },
|
|
{ href: "#artists", label: "Artists", id: "artists" },
|
|
{ href: "#services", label: "Services", id: "services" },
|
|
{ href: "#contact", label: "Contact", id: "contact" },
|
|
]
|
|
|
|
return (
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-700 ease-out ${
|
|
isScrolled
|
|
? "bg-black/95 backdrop-blur-md shadow-lg border-b border-white/10 opacity-100"
|
|
: "bg-black/80 backdrop-blur-md lg:bg-transparent lg:opacity-0 lg:pointer-events-none opacity-100"
|
|
}`}
|
|
>
|
|
<div className="max-w-screen-2xl mx-auto px-6 lg:px-12">
|
|
<div className="flex items-center justify-between h-20">
|
|
<Link
|
|
href="/"
|
|
className="font-bold text-xl lg:text-2xl tracking-[0.2em] transition-all duration-500 drop-shadow-lg text-white"
|
|
>
|
|
UNITED TATTOO
|
|
</Link>
|
|
|
|
<div className="hidden lg:flex items-center space-x-12">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`relative text-sm font-semibold tracking-[0.1em] uppercase transition-all duration-300 group ${
|
|
activeSection === item.id ? "text-white" : "text-white/80 hover:text-white"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
<span
|
|
className={`absolute -bottom-1 left-0 h-0.5 bg-white transition-all duration-300 ${
|
|
activeSection === item.id ? "w-full" : "w-0 group-hover:w-full"
|
|
}`}
|
|
/>
|
|
</Link>
|
|
))}
|
|
<Button
|
|
asChild
|
|
className="bg-white hover:bg-gray-100 text-black !text-black px-8 py-3 text-sm font-semibold tracking-[0.05em] uppercase shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105"
|
|
>
|
|
<Link href="/book">Book Now</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<button
|
|
className="lg:hidden p-4 rounded-lg transition-all duration-300 text-white hover:bg-white/10"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="lg:hidden bg-black/98 backdrop-blur-md border-t border-white/10">
|
|
<div className="px-6 py-8 space-y-5">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`px-4 py-4 block text-lg font-semibold tracking-[0.1em] uppercase transition-all duration-300 ${
|
|
activeSection === item.id
|
|
? "text-white border-l-4 border-white pl-4"
|
|
: "text-white/70 hover:text-white hover:pl-2"
|
|
}`}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<Button
|
|
asChild
|
|
className="w-full bg-white hover:bg-gray-100 text-black !text-black py-5 text-lg font-semibold tracking-[0.05em] uppercase shadow-xl mt-8"
|
|
>
|
|
<Link href="/book" onClick={() => setIsOpen(false)}>
|
|
Book Now
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|