Localize sidebar

src/components/Sidebar/Sidebar.svelte

@@ -2,7 +2,7 @@
   import { fly } from 'svelte/transition';
   import { getContext } from 'svelte';
   import { mdiCloseCircle } from '@mdi/js';
-  import { locale } from 'svelte-i18n';
+  import { locale, t } from 'svelte-i18n';
 
   import Icon from '../Icon.svelte';
 
@@ -61,26 +61,32 @@
       <Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
     </div>
   {/if}
-  <SidebarItem on:clicked={close} active={segment === undefined} image="/images/home.png" label="Home" href="/" />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === undefined}
+    image="/images/home.png"
+    label={$t('sidebar.home')}
+    href="/"
+  />
   <SidebarItem
     on:clicked={close}
     active={segment === 'characters'}
     image="/images/characters.png"
-    label="Character"
+    label={$t('sidebar.character')}
     href="/characters"
   />
   <SidebarItem
     on:clicked={close}
     active={segment === 'wish'}
     image="/images/wish.png"
-    label="Wish Counter"
+    label={$t('sidebar.wishCounter')}
     href="/wish"
   />
   <SidebarItem
     on:clicked={close}
     active={segment === 'calculator'}
     image="/images/calculator.png"
-    label="Calculator"
+    label={$t('sidebar.calculator')}
     href="/calculator"
   />
   <SidebarItem on:clicked={close} active={segment === 'items'} image="/images/items.png" label="Items" href="/items" />
@@ -88,21 +94,21 @@
     on:clicked={close}
     active={segment === 'todo'}
     image="/images/todos.png"
-    label="Todo List"
+    label={$t('sidebar.todoList')}
     href="/todo"
   />
   <SidebarItem
     on:clicked={close}
     active={segment === 'timeline'}
     image="/images/timeline.png"
-    label="Timeline"
+    label={$t('sidebar.timeline')}
     href="/timeline"
   />
   <SidebarItem
     on:clicked={close}
     active={segment === 'settings'}
     image="/images/settings.png"
-    label="Settings"
+    label={$t('sidebar.settings')}
     href="/settings"
   />
   <div class="mt-8 md:mt-0 md:flex-1" />
@@ -127,7 +133,7 @@
   </div>
   <Button on:click={openDonationModal}>
     <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
-    Donate
+    {$t('sidebar.donate')}
   </Button>
 </div>
 

src/locales/en.json

@@ -1,4 +1,15 @@
 {
+  "sidebar": {
+    "home": "Home",
+    "character": "Character",
+    "wishCounter": "Wish Counter",
+    "calculator": "Calculator",
+    "items": "Items",
+    "todoList": "Todo List",
+    "timeline": "Timeline",
+    "settings": "Settings",
+    "donate": "Donate"
+  },
   "home": {
     "welcome": "Welcome to Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Help you plan what to farm with ascension calculator, also track your progress with todo and wish counter.",

src/locales/id.json

@@ -1,4 +1,15 @@
 {
+  "sidebar": {
+    "home": "Home",
+    "character": "Karakter",
+    "wishCounter": "Wish Counter",
+    "calculator": "Kalkulator",
+    "items": "Item",
+    "todoList": "Todo List",
+    "timeline": "Timeline",
+    "settings": "Pengaturan",
+    "donate": "Donasi"
+  },
   "home": {
     "welcome": "Selamat Datang di Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Membantu kamu merencanakan apa yang harus di farm dengan kalkulator ascension, juga catat progress mu dengan todo dan wish counter.",

src/routes/_layout.svelte

@@ -69,7 +69,7 @@
     <div class="text-gray-400 mt-4 md:mt-0 md:ml-4 flex flex-col md:pl-4 md:border-l border-gray-600">
       <span class="text-gray-500">{$t('footer.community')}</span>
       <a class="text-gray-400 hover:text-primary" href="https://t.me/GenshinImpact_ID" target="_blank">
-        <Icon path={mdiTelegram} size={1} /> Telegram
+        <Icon path={mdiTelegram} size={1} /> Telegram	🇮🇩
       </a>
     </div>
     <div class="text-gray-400 mt-4 md:mt-0 md:ml-4 flex flex-col md:pl-4 md:border-l border-gray-600">