i18n: Add language selection dropdown

Author: danielhjacobs

src/components/header.module.css

@@ -34,6 +34,12 @@
   }
 }
 
+.hiddenOnDesktop {
+  @media (min-width: $mantine-breakpoint-md) {
+    display: none;
+  }
+}
+
 .burger {
   --burger-color: var(--ruffle-orange);
 }

src/components/header.tsx

@@ -3,6 +3,7 @@
 import { Burger, Container, Drawer, Group } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import classes from "./header.module.css";
+import { LanguagePicker } from "./language-picker";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -43,7 +44,7 @@ export function Header() {
 
   return (
     <header className={classes.header}>
-      <Container size="md" className={classes.inner}>
+      <Container size="lg" className={classes.inner}>
         <Link href="/">
           <Image
             src="/logo.svg"
@@ -55,6 +56,7 @@ export function Header() {
         </Link>
         <Group gap={5} visibleFrom="md">
           {items}
+          <LanguagePicker />
         </Group>{" "}
         <Drawer
           opened={opened}
@@ -69,6 +71,9 @@ export function Header() {
         >
           {items}
         </Drawer>
+        <span className={classes.hiddenOnDesktop}>
+          <LanguagePicker />
+        </span>
         <Burger
           opened={opened}
           onClick={toggle}

src/components/language-picker.module.css

@@ -0,0 +1,36 @@
+.control {
+  width: 200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+  transition: background-color 150ms ease;
+  background-color: var(--ruffle-blue);
+}
+
+.label {
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+}
+
+.icon {
+  transition: transform 150ms ease;
+  transform: rotate(0deg);
+
+  [data-expanded] & {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown {
+  background-color: var(--ruffle-blue);
+}
+
+.item {
+  @mixin hover {
+    background-color: var(--ruffle-blue-7);
+  }
+}

src/components/language-picker.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { Group, Menu, UnstyledButton } from "@mantine/core";
+import { LanguageSwitcher } from "next-export-i18n";
+import classes from "./language-picker.module.css";
+
+const data = [
+  { label: "English (United States)", locale: "en" },
+  { label: "العربية", locale: "ar" },
+  { label: "Català", locale: "ca" },
+  { label: "简体中文", locale: "zh" },
+  { label: "Čeština", locale: "cs" },
+  { label: "Nederlands", locale: "nl" },
+  { label: "Français (France)", locale: "fr" },
+  { label: "Deutsch", locale: "de" },
+  { label: "עברית (ישראל)", locale: "he" },
+  { label: "Magyar", locale: "hu" },
+  { label: "Indonesian", locale: "id" },
+  { label: "Italiano (Italia)", locale: "it" },
+  { label: "日本語", locale: "ja" },
+  { label: "한국어", locale: "ko" },
+  { label: "Polski (Polska)", locale: "pl" },
+  { label: "Português (Portugal)", locale: "pt" },
+  { label: "Romanian", locale: "ro" },
+  { label: "Русский", locale: "ru" },
+  { label: "Slovenčina (Slovensko)", locale: "sk" },
+  { label: "Español", locale: "es" },
+  { label: "Svenska", locale: "sv" },
+  { label: "Türkçe", locale: "tr" },
+  { label: "Українська", locale: "uk" },
+];
+
+export function LanguagePicker() {
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState(data[0]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const browserLang = (
+        (window.navigator.languages && window.navigator.languages[0]) ||
+        window.navigator.language
+      )
+        .split("-")[0]
+        .toLowerCase();
+      const currentLocale = data.some((item) => item.locale === browserLang)
+        ? browserLang
+        : "en";
+      const storedLang =
+        localStorage.getItem("next-export-i18n-lang") || currentLocale;
+      const match = data.find((item) => item.locale === storedLang);
+      if (match) setSelected(match);
+    }
+  }, []);
+
+  const items = data.map((item) => (
+    <LanguageSwitcher lang={item.locale} key={item.locale}>
+      <Menu.Item
+        component="span"
+        className={classes.item}
+        onClick={() => setSelected(item)}
+      >
+        {item.label}
+      </Menu.Item>
+    </LanguageSwitcher>
+  ));
+
+  return (
+    <Menu
+      onOpen={() => setOpened(true)}
+      onClose={() => setOpened(false)}
+      radius="md"
+      width="target"
+      withinPortal
+    >
+      <Menu.Target>
+        <UnstyledButton
+          className={classes.control}
+          data-expanded={opened || undefined}
+        >
+          <Group gap="xs">
+            <span className={classes.label}>{selected.label}</span>
+          </Group>
+          <IconChevronDown size={16} className={classes.icon} stroke={1.5} />
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown className={classes.dropdown}>{items}</Menu.Dropdown>
+    </Menu>
+  );
+}