Merge 55ad59bca7 into 378ea8d88b

src/components/I18nSwitch.astro

@@ -0,0 +1,49 @@
+---
+import { Dropdown, DropdownItems } from 'astro-navbar'
+import { i18n } from '~/constants/i18n'
+import LanguagesIcon from '~/icons/LanguagesIcon.astro'
+import { getPath } from '~/utils/i18n'
+
+interface Props {
+  label?: string
+  className?: string
+}
+
+const { label = 'Toggle i18n', className = '' } = Astro.props
+---
+
+<Dropdown class="group">
+  <button
+    type="button"
+    class:list={['inline-flex h-8 w-8 cursor-pointer items-center justify-center', className]}
+    aria-label={label}
+  >
+    <LanguagesIcon />
+  </button>
+  <DropdownItems>
+    <div class="navbar-dropdown !grid-cols-1 gap-1">
+      {
+        i18n.LOCALES.map(locale => (
+          <a class="dropdown-item" href={getPath(locale.value)(Astro.url.pathname)} aria-label={locale.label}>
+            <div class="dropdown-title">{locale.label}</div>
+          </a>
+        ))
+      }
+    </div>
+  </DropdownItems>
+</Dropdown>
+
+<style>
+  .navbar-dropdown {
+    @apply absolute mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm;
+  }
+  .navbar-dropdown .dropdown-item {
+    @apply flex cursor-pointer select-none flex-col gap-1 rounded-lg p-3 pl-8 transition-colors duration-200;
+  }
+  .navbar-dropdown .dropdown-item:hover {
+    @apply bg-muted;
+  }
+  .navbar-dropdown .dropdown-title {
+    @apply text-right font-bold;
+  }
+</style>

src/components/NavBar.astro

@@ -6,6 +6,7 @@ import ChevronDownIcon from '~/icons/ChevronDownIcon.astro'
 import DownloadIcon from '~/icons/DownloadIcon.astro'
 import MenuIcon from '~/icons/MenuIcon.astro'
 import { getLocale, getPath, getUI } from '~/utils/i18n'
+import I18nSwitch from './I18nSwitch.astro'
 import Logo from './Logo.astro'
 import MobileMenu from './MobileMenu.astro'
 import ThemeSwitch from './ThemeSwitch.astro'
@@ -106,6 +107,9 @@ const {
       </a>
     </div>
     <div class="flex items-center gap-2 place-self-end lg:gap-4">
+      <div id="i18n-switcher">
+        <I18nSwitch label="Toggle language" />
+      </div>
       <div id="theme-switcher">
         <ThemeSwitch label="Toggle theme" />
       </div>

src/icons/LanguagesIcon.astro

@@ -0,0 +1,19 @@
+---
+const { class: className, ...props } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class:list={['lucide lucide-languages-icon lucide-languages', className]}
+  {...props}
+  ><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path
+    d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg
+>