feat: Added language switcher to navbar
This commit is contained in:
+36
-2
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user