feat: add simple language switch

This commit is contained in:
Dariusz Niemczyk 2025-02-09 02:51:40 +01:00
parent 6f826c47df
commit fc83d7e67d
No known key found for this signature in database
3 changed files with 33 additions and 5 deletions

View file

@ -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>

View file

@ -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} />

View 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></>);
};