feat: language selection dropdown

.vscode/settings.json

@@ -15,7 +15,7 @@
   "eslint.format.enable": false,
   "prettier.requireConfig": true,
   "[astro]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "astro-build.astro-vscode"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

src/components/I18nSwitch.astro

@@ -0,0 +1,66 @@
+---
+import { Dropdown, DropdownItems } from 'astro-navbar'
+import LanguagesIcon from '~/icons/Languages.astro'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
+
+const locale = getLocale(Astro)
+const getLocalePath = getPath(locale)
+
+const {
+  components: {
+    nav: { menu },
+  },
+} = getUI(locale)
+
+interface Props {
+  label?: string
+  className?: string
+}
+
+const { label, className = '' } = Astro.props
+---
+
+<Dropdown class="group">
+  <button
+    type="button"
+    class:list={['inline-flex h-8 w-8 cursor-pointer items-center justify-center', className]}
+    id="i18n-switcher"
+    aria-label={label || 'Toggle i18n'}
+  >
+    <LanguagesIcon />
+  </button>
+  <DropdownItems>
+    <div class="navbar-dropdown !grid-cols-1 gap-1">
+      <a class="dropdown-item" href={Astro.url.pathname.replace(/^\/ja\//, '/')}>
+        <div class="dropdown-title">English</div>
+      </a>
+      <a
+        class="dropdown-item"
+        href={Astro.url.pathname.startsWith('/ja')
+          ? Astro.url.pathname
+          : `/ja${Astro.url.pathname}`}
+      >
+        <div class="dropdown-title">日本語</div>
+      </a>
+    </div>
+  </DropdownItems>
+</Dropdown>
+
+<script></script>
+
+<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;
+    & .dropdown-item {
+      @apply flex cursor-pointer select-none flex-col gap-1 rounded-lg p-3 pl-8 transition-colors duration-200;
+
+      &:hover {
+        @apply bg-muted;
+      }
+
+      & .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 i18n" />
+      </div>
       <div id="theme-switcher">
         <ThemeSwitch label="Toggle theme" />
       </div>

src/icons/Languages.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
+>

src/pages/[...locale]/about.astro

@@ -1,10 +1,10 @@
 ---
 import { Image } from 'astro:assets'
+import Button from '~/components/Button.astro'
 import Description from '~/components/Description.astro'
 import Layout from '~/layouts/Layout.astro'
 import { getLocale, getUI } from '~/utils/i18n'
 export { getStaticPaths } from '~/utils/i18n'
-import Button from '~/components/Button.astro'
 
 const locale = getLocale(Astro)