[+] Multi-language switch

src/lib/ui/appbar/AppBar.svelte

@@ -8,12 +8,13 @@
     onclick: () => void
   }
 
-  let { title, sub, account, right, children }: {
+  let { title, sub, account, right, children, moreIcon }: {
     title?: string
     sub?: string
     account?: () => void
     right?: Icon[]
     children?: any
+    moreIcon?: string
   } = $props()
 
   let showMenu = $state(false)
@@ -37,7 +38,7 @@
   {/each}
 
   {#if children}
-    <IconButton icon="i-material-symbols:more-vert" onclick={() => showMenu = !showMenu} />
+    <IconButton icon={moreIcon ?? 'i-material-symbols:more-vert'} onclick={() => showMenu = !showMenu} />
   {/if}
 </div>
 

src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import { Layer } from "m3-svelte"
   import { goto } from "$app/navigation"
   import { getI18n, setLanguage } from "$lib/i18n"
+    import MenuItem from "$lib/ui/material3/MenuItem.svelte";
 
   let { data }: PageProps = $props()
 
@@ -19,13 +20,11 @@
 </script>
 
 
-<AppBar account={() => goto('/user')} right={[
-  // {icon: "i-material-symbols:settings-rounded", onclick: () => alert('Settings clicked')}
-  // Language switching button
-  {icon: "i-material-symbols:translate-rounded", onclick: () => {
-    setLanguage(data.lang === 'en' ? 'zh' : 'en')
-  }}
-]} />
+<AppBar account={() => goto('/user')} moreIcon="i-material-symbols:translate-rounded">
+  <MenuItem onclick={() => setLanguage('en')}>English</MenuItem>
+  <MenuItem onclick={() => setLanguage('zh')}>中文</MenuItem>
+  <MenuItem onclick={() => setLanguage('ja')}>日本語</MenuItem>
+</AppBar>
 
 <div class="vbox gap-16px overflow-y-auto flex-1">
   {#if data.last}