Localize sidebar
parent
715effeb99
commit
0c3ea132c8
|
@ -2,7 +2,7 @@
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import { mdiCloseCircle } from '@mdi/js';
|
import { mdiCloseCircle } from '@mdi/js';
|
||||||
import { locale } from 'svelte-i18n';
|
import { locale, t } from 'svelte-i18n';
|
||||||
|
|
||||||
import Icon from '../Icon.svelte';
|
import Icon from '../Icon.svelte';
|
||||||
|
|
||||||
|
@ -61,26 +61,32 @@
|
||||||
<Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
|
<Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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
|
<SidebarItem
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'characters'}
|
active={segment === 'characters'}
|
||||||
image="/images/characters.png"
|
image="/images/characters.png"
|
||||||
label="Character"
|
label={$t('sidebar.character')}
|
||||||
href="/characters"
|
href="/characters"
|
||||||
/>
|
/>
|
||||||
<SidebarItem
|
<SidebarItem
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'wish'}
|
active={segment === 'wish'}
|
||||||
image="/images/wish.png"
|
image="/images/wish.png"
|
||||||
label="Wish Counter"
|
label={$t('sidebar.wishCounter')}
|
||||||
href="/wish"
|
href="/wish"
|
||||||
/>
|
/>
|
||||||
<SidebarItem
|
<SidebarItem
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'calculator'}
|
active={segment === 'calculator'}
|
||||||
image="/images/calculator.png"
|
image="/images/calculator.png"
|
||||||
label="Calculator"
|
label={$t('sidebar.calculator')}
|
||||||
href="/calculator"
|
href="/calculator"
|
||||||
/>
|
/>
|
||||||
<SidebarItem on:clicked={close} active={segment === 'items'} image="/images/items.png" label="Items" href="/items" />
|
<SidebarItem on:clicked={close} active={segment === 'items'} image="/images/items.png" label="Items" href="/items" />
|
||||||
|
@ -88,21 +94,21 @@
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'todo'}
|
active={segment === 'todo'}
|
||||||
image="/images/todos.png"
|
image="/images/todos.png"
|
||||||
label="Todo List"
|
label={$t('sidebar.todoList')}
|
||||||
href="/todo"
|
href="/todo"
|
||||||
/>
|
/>
|
||||||
<SidebarItem
|
<SidebarItem
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'timeline'}
|
active={segment === 'timeline'}
|
||||||
image="/images/timeline.png"
|
image="/images/timeline.png"
|
||||||
label="Timeline"
|
label={$t('sidebar.timeline')}
|
||||||
href="/timeline"
|
href="/timeline"
|
||||||
/>
|
/>
|
||||||
<SidebarItem
|
<SidebarItem
|
||||||
on:clicked={close}
|
on:clicked={close}
|
||||||
active={segment === 'settings'}
|
active={segment === 'settings'}
|
||||||
image="/images/settings.png"
|
image="/images/settings.png"
|
||||||
label="Settings"
|
label={$t('sidebar.settings')}
|
||||||
href="/settings"
|
href="/settings"
|
||||||
/>
|
/>
|
||||||
<div class="mt-8 md:mt-0 md:flex-1" />
|
<div class="mt-8 md:mt-0 md:flex-1" />
|
||||||
|
@ -127,7 +133,7 @@
|
||||||
</div>
|
</div>
|
||||||
<Button on:click={openDonationModal}>
|
<Button on:click={openDonationModal}>
|
||||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
||||||
Donate
|
{$t('sidebar.donate')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -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": {
|
"home": {
|
||||||
"welcome": "Welcome to Paimon.moe! 👋",
|
"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.",
|
"message": "Your best Genshin Impact companion! Help you plan what to farm with ascension calculator, also track your progress with todo and wish counter.",
|
||||||
|
|
|
@ -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": {
|
"home": {
|
||||||
"welcome": "Selamat Datang di Paimon.moe! 👋",
|
"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.",
|
"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.",
|
||||||
|
|
|
@ -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">
|
<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>
|
<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">
|
<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>
|
</a>
|
||||||
</div>
|
</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">
|
<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">
|
||||||
|
|
Loading…
Reference in New Issue