feat: Added language switcher to navbar

This commit is contained in:
2026-06-09 17:07:20 +03:00
parent 5ad01d1f34
commit e55074cf31
+36 -2
View File
@@ -5,7 +5,7 @@ import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { Menu, X } from "lucide-react"; import { Menu, X, Globe } from "lucide-react";
const navLinks = [ const navLinks = [
// { name: "Odalar", href: "/odalar" }, // { name: "Odalar", href: "/odalar" },
@@ -30,7 +30,19 @@ export default function Navbar() {
useEffect(() => { setIsOpen(false); }, [pathname]); useEffect(() => { setIsOpen(false); }, [pathname]);
const isHome = pathname === "/"; const isHome = pathname === "/" || pathname === "/tr" || pathname === "/en";
const currentLang = pathname.startsWith("/en") ? "en" : "tr";
const toggleLang = currentLang === "en" ? "tr" : "en";
const getToggleHref = () => {
if (pathname === "/") return `/${toggleLang}`;
if (pathname.startsWith("/tr/")) return pathname.replace("/tr/", `/${toggleLang}/`);
if (pathname === "/tr") return `/${toggleLang}`;
if (pathname.startsWith("/en/")) return pathname.replace("/en/", `/${toggleLang}/`);
if (pathname === "/en") return `/${toggleLang}`;
return `/${toggleLang}${pathname}`;
};
return ( return (
<nav <nav
@@ -87,6 +99,21 @@ export default function Navbar() {
> >
Rezervasyon Rezervasyon
</Link> </Link>
{/* Lang Toggle */}
<Link
href={getToggleHref()}
className={`flex items-center gap-1.5 text-[11px] font-bold tracking-[0.12em] uppercase transition-colors hover:text-accent ${
scrolled
? "text-dark"
: isHome
? "text-white"
: "text-dark"
}`}
>
<Globe size={14} />
<span>{currentLang === "tr" ? "EN" : "TR"}</span>
</Link>
</div> </div>
{/* Mobile toggle */} {/* Mobile toggle */}
@@ -131,6 +158,13 @@ export default function Navbar() {
</Link> </Link>
</motion.div> </motion.div>
))} ))}
<Link
href={getToggleHref()}
className="mt-2 flex items-center justify-center gap-2 text-sm font-bold uppercase text-dark border border-sand py-3 rounded-full hover:bg-sand/20 transition-colors"
>
<Globe size={16} />
{currentLang === "tr" ? "English" : "Türkçe"}
</Link>
<Link <Link
href="/iletisim" href="/iletisim"
className="mt-4 block w-full text-center bg-accent text-white px-6 py-3.5 rounded-full text-sm font-bold uppercase tracking-wider" className="mt-4 block w-full text-center bg-accent text-white px-6 py-3.5 rounded-full text-sm font-bold uppercase tracking-wider"