look: move language selector to RHS, don't use country flags
Some checks failed
/ deploy (push) Failing after 1s
Some checks failed
/ deploy (push) Failing after 1s
The language selection being a flag never sat right wight me:
1. Its positioning next to 'CEBULACAMP' implied more that it's a
cebula.camp logo or intrinsic flag of the event or something.
2. I think it's the first site I've ever seen that has a language
selector on the left hand side of the navigation bar.
3. Using country flags as language icons is wrong [1].
[1] - just ask the Swiss or the Belgians.
This commit is contained in:
parent
96861a4490
commit
af1a4e6c74
|
|
@ -14,18 +14,17 @@ export function NavContainer({ children, title, }: { children: React.ReactNode,
|
|||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex gap-4">
|
||||
<LanguageSelector />
|
||||
<Link href="/" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
|
||||
<h1>{title}</h1>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{children}
|
||||
<LanguageSelector />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
className="ml-4"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<SunIcon className="h-5 w-5" />
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import { Lang } from "@/i18n/locales";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { Button } from "./button";
|
||||
import { LanguagesIcon } from "lucide-react";
|
||||
|
||||
|
||||
export const LanguageSelector = () => {
|
||||
|
|
@ -15,10 +17,22 @@ export const LanguageSelector = () => {
|
|||
}
|
||||
|
||||
const lang = params?.locale || 'pl';
|
||||
const changedLang = pathname.replace(`/${lang}`, `/${replacements[lang]}`)
|
||||
const otherLang = replacements[lang];
|
||||
const changedLang = pathname.replace(`/${lang}`, `/${otherLang}`)
|
||||
|
||||
if (lang === 'pl') return (<>
|
||||
<Link suppressHydrationWarning className="pt-1" href={changedLang}>🇬🇧</Link></>);
|
||||
if (lang === 'en') return (<>
|
||||
<Link suppressHydrationWarning className="pt-1" href={changedLang}>🇵🇱</Link></>);
|
||||
return (<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:ml-6 w-15"
|
||||
>
|
||||
<Link
|
||||
href={changedLang}
|
||||
className="flex space-x-2 items-center"
|
||||
>
|
||||
<LanguagesIcon className="h-5 w-5 mr-1" />
|
||||
<span>{otherLang.toUpperCase()}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</>);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue