189 lines
9.2 KiB
TypeScript
189 lines
9.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { Globe, Menu } from "lucide-react"
|
|
|
|
interface NavbarProps {
|
|
darkMode?: boolean
|
|
}
|
|
|
|
const Navbar = ({ darkMode = false }: NavbarProps) => {
|
|
const [isScrolled, setIsScrolled] = React.useState(false)
|
|
const [isMenuOpen, setIsMenuOpen] = React.useState(false)
|
|
const { language, setLanguage, t } = useLanguage()
|
|
const useLightNav = isScrolled || !darkMode
|
|
|
|
React.useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20)
|
|
}
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<nav
|
|
className={cn(
|
|
"fixed top-0 left-0 right-0 z-50 transition-all duration-300 px-6 py-4",
|
|
useLightNav
|
|
? "bg-white/80 backdrop-blur-md shadow-sm border-b border-slate-200/60"
|
|
: "bg-transparent"
|
|
)}
|
|
>
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
|
<Link href="/" className="flex items-center space-x-3 group z-50">
|
|
<div className="relative w-40 h-10 md:w-48 md:h-12">
|
|
<Image
|
|
src={useLightNav ? "/images/logo-dark.svg" : "/images/logo-white.svg"}
|
|
alt="SkyFly Travel"
|
|
fill
|
|
sizes="(min-width: 768px) 192px, 160px"
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<Link
|
|
href="/arak"
|
|
className={cn(
|
|
"text-sm font-medium transition-colors",
|
|
useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
|
)}
|
|
>
|
|
{t.nav.prices}
|
|
</Link>
|
|
<Link
|
|
href="/szolgaltatasok"
|
|
className={cn(
|
|
"text-sm font-medium transition-colors",
|
|
useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
|
)}
|
|
>
|
|
{t.nav.services}
|
|
</Link>
|
|
<Link
|
|
href="/feltetelek"
|
|
className={cn(
|
|
"text-sm font-medium transition-colors",
|
|
useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
|
)}
|
|
>
|
|
{t.nav.conditions}
|
|
</Link>
|
|
<Link
|
|
href="/flotta"
|
|
className={cn(
|
|
"text-sm font-medium transition-colors",
|
|
useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
|
)}
|
|
>
|
|
{t.nav.fleet}
|
|
</Link>
|
|
<Link
|
|
href="/kapcsolat"
|
|
className={cn(
|
|
"text-sm font-medium transition-colors",
|
|
useLightNav ? "text-slate-700 hover:text-primary" : "text-white/90 hover:text-slate-900"
|
|
)}
|
|
>
|
|
{t.nav.contact}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
{/* Language Switcher */}
|
|
<div className={cn(
|
|
"flex items-center rounded-full p-1 mr-2 transition-colors",
|
|
useLightNav ? "bg-white border border-slate-200/70 shadow-sm" : "bg-white/10 border border-white/10 backdrop-blur-sm"
|
|
)}>
|
|
<button
|
|
onClick={() => setLanguage("hu")}
|
|
className={cn(
|
|
"text-[10px] font-bold px-3 py-1 rounded-full transition-all",
|
|
language === "hu"
|
|
? "bg-white text-slate-900 shadow-sm"
|
|
: (useLightNav ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
|
|
)}
|
|
>
|
|
{t.nav.language.hu}
|
|
</button>
|
|
<button
|
|
onClick={() => setLanguage("en")}
|
|
className={cn(
|
|
"text-[10px] font-bold px-3 py-1 rounded-full transition-all",
|
|
language === "en"
|
|
? "bg-white text-slate-900 shadow-sm"
|
|
: (useLightNav ? "text-slate-600 hover:text-slate-900" : "text-white/60 hover:text-white")
|
|
)}
|
|
>
|
|
{t.nav.language.en}
|
|
</button>
|
|
</div>
|
|
|
|
<Button
|
|
asChild
|
|
variant={useLightNav ? "pill" : "outline"}
|
|
className={cn(
|
|
"rounded-full px-6",
|
|
(!useLightNav && darkMode) && "text-white border-white/20 hover:bg-white/10 bg-transparent",
|
|
useLightNav && "bg-primary text-white"
|
|
)}
|
|
>
|
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer" className="text-[10px] md:text-sm">
|
|
{t.nav.cta}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className={cn(
|
|
"md:hidden p-2 z-50 rounded-lg backdrop-blur-sm transition-colors",
|
|
useLightNav ? "text-slate-900 bg-white/80 border border-slate-200/70 hover:bg-white" : "text-white bg-black/50 hover:bg-black/70"
|
|
)}
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<Menu className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
{isMenuOpen && (
|
|
<div className="fixed inset-0 z-40 flex flex-col pt-32 px-8 animate-in slide-in-from-top duration-300">
|
|
<div className="absolute inset-0 bg-slate-950/95 backdrop-blur-md" />
|
|
<div className="relative flex flex-col space-y-6 text-center">
|
|
<Link onClick={() => setIsMenuOpen(false)} href="/arak" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.prices}</Link>
|
|
<Link onClick={() => setIsMenuOpen(false)} href="/szolgaltatasok" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.services}</Link>
|
|
<Link onClick={() => setIsMenuOpen(false)} href="/feltetelek" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.conditions}</Link>
|
|
<Link onClick={() => setIsMenuOpen(false)} href="/flotta" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.fleet}</Link>
|
|
<Link onClick={() => setIsMenuOpen(false)} href="/kapcsolat" className="text-2xl font-bold text-white hover:text-primary transition-colors">{t.nav.contact}</Link>
|
|
|
|
<div className="flex justify-center gap-4 pt-8">
|
|
<button onClick={() => { setLanguage("hu"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "hu" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>{t.nav.language.hu}</button>
|
|
<button onClick={() => { setLanguage("en"); setIsMenuOpen(false) }} className={cn("px-6 py-2 rounded-full font-bold", language === "en" ? "bg-white text-slate-900" : "bg-white/10 text-white")}>{t.nav.language.en}</button>
|
|
</div>
|
|
|
|
<Button asChild size="lg" className="mt-8 bg-primary text-white rounded-full">
|
|
<a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
|
|
{t.nav.cta}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|