46 lines
3.8 KiB
TypeScript
46 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { mockData } from "@/lib/mock-data";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
|
|
export function Navbar() {
|
|
const t = useTranslations("nav");
|
|
|
|
return (
|
|
<header className="fixed top-0 w-full z-50 bg-surface/80 dark:bg-inverse-surface/80 backdrop-blur-md shadow-sm shadow-primary-container/5 transition-colors duration-200">
|
|
<nav className="flex justify-between items-center px-4 md:px-12 py-4 max-w-7xl mx-auto" aria-label="Main Navigation">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/" className="flex items-center space-x-2 group cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-md min-h-[44px]" aria-label="Ana Sayfa - Kordon Apart">
|
|
<Image src={mockData.logos.main} alt="Kordon Apart Logo" width={120} height={40} className="h-10 w-auto group-hover:opacity-80 transition-opacity duration-200" priority />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center gap-8">
|
|
<Link href="/" className="text-primary dark:text-primary-fixed-dim font-bold border-b border-primary dark:border-primary-fixed-dim font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("home")}</Link>
|
|
<Link href="/odalar" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("accommodations")}</Link>
|
|
<Link href="/galeri" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("gallery")}</Link>
|
|
<Link href="/iletisim" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("contact")}</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="hidden md:flex gap-3 text-on-surface-variant dark:text-outline font-label-sm text-[12px]">
|
|
<Link href="/tr" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Türkçe">TR</Link>
|
|
<Link href="/en" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="English">EN</Link>
|
|
</div>
|
|
<div className="w-px h-4 bg-outline-variant dark:bg-outline mx-2 hidden md:block" aria-hidden="true" />
|
|
<ThemeToggle />
|
|
<Link
|
|
href="/iletisim"
|
|
className="hidden md:flex bg-[#CA8A04] text-white px-6 py-2 rounded-full font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-md cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[44px] items-center"
|
|
>
|
|
{t("bookNow")}
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|