feat: add simple language switch
This commit is contained in:
parent
6f826c47df
commit
fc83d7e67d
|
|
@ -5,6 +5,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/co
|
||||||
import type { Sections, translations } from "@/i18n/translations"
|
import type { Sections, translations } from "@/i18n/translations"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import { Menu } from "lucide-react"
|
import { Menu } from "lucide-react"
|
||||||
|
import { LanguageSelector } from "./ui/language-selector"
|
||||||
|
|
||||||
export function MobileNav({
|
export function MobileNav({
|
||||||
t,
|
t,
|
||||||
|
|
@ -35,6 +36,7 @@ export function MobileNav({
|
||||||
{t.nav[value]}
|
{t.nav[value]}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
|
<LanguageSelector />
|
||||||
</nav>
|
</nav>
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { MoonIcon, SunIcon } from "lucide-react"
|
||||||
import { useEffect, useState } from "react"
|
import { useEffect, useState } from "react"
|
||||||
import { MobileNav } from "./mobile-nav"
|
import { MobileNav } from "./mobile-nav"
|
||||||
import { useTheme } from "./providers"
|
import { useTheme } from "./providers"
|
||||||
|
import { LanguageSelector } from "./ui/language-selector"
|
||||||
|
|
||||||
const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
|
const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
|
||||||
"hero",
|
"hero",
|
||||||
|
|
@ -63,15 +64,22 @@ export function Nav({
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xs bg-background/40 border-b">
|
<nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="flex items-center justify-between h-16">
|
<div className="flex items-center justify-between h-16">
|
||||||
<a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
|
<div className="flex gap-4">
|
||||||
{t.siteTitle}
|
<LanguageSelector />
|
||||||
</a>
|
<a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h1>{t.siteTitle}</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{/* Desktop Navigation */}
|
{/* Desktop Navigation */}
|
||||||
<div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
|
<div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
|
||||||
|
|
||||||
{linksOrder.map((value) => (
|
{linksOrder.map((value) => (
|
||||||
<a
|
<a
|
||||||
key={value}
|
key={value}
|
||||||
|
|
@ -88,7 +96,6 @@ export function Nav({
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Theme Toggle */}
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
|
|
@ -98,6 +105,8 @@ export function Nav({
|
||||||
{theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
|
{theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* Mobile Navigation */}
|
{/* Mobile Navigation */}
|
||||||
<div className="md:hidden ml-2">
|
<div className="md:hidden ml-2">
|
||||||
<MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
|
<MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
|
||||||
|
|
|
||||||
17
src/components/ui/language-selector.tsx
Normal file
17
src/components/ui/language-selector.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Lang } from "@/i18n/locales";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
|
||||||
|
|
||||||
|
export const LanguageSelector = () => {
|
||||||
|
const params = useParams<{ locale: Lang }>();
|
||||||
|
|
||||||
|
const lang = params?.locale || 'pl';
|
||||||
|
const hash = window?.location?.hash || '';
|
||||||
|
if (lang === 'pl') return (<>
|
||||||
|
<Link className="pt-1" href={`/en${hash}`}>🇬🇧</Link></>);
|
||||||
|
if (lang === 'en') return (<>
|
||||||
|
<Link className="pt-1" href={`/pl${hash}`}>🇵🇱</Link></>);
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue