45 lines
1.9 KiB
Svelte
45 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { ArrowLeft, MenuIcon } from "lucide-svelte";
|
|
import { language } from "src/lang";
|
|
import { DataBase } from "src/ts/storage/database";
|
|
import { MobileGUIStack, MobileSearch, selectedCharID, SettingsMenuIndex, MobileSideBar } from "src/ts/stores";
|
|
|
|
</script>
|
|
<div class="w-full px-4 h-16 border-b border-b-darkborderc bg-darkbg flex justify-start items-center gap-2">
|
|
{#if $selectedCharID !== -1 && $MobileSideBar > 0}
|
|
<button onclick={() => {
|
|
MobileSideBar.set(0)
|
|
}}>
|
|
<ArrowLeft />
|
|
</button>
|
|
<span class="font-bold text-lg w-2/3 truncate">{language.menu}</span>
|
|
{:else if $selectedCharID !== -1}
|
|
<button onclick={() => {
|
|
selectedCharID.set(-1)
|
|
}}>
|
|
<ArrowLeft />
|
|
</button>
|
|
<span class="font-bold text-lg w-2/3 truncate">{$DataBase.characters[$selectedCharID].name}</span>
|
|
<div class="flex-1 flex justify-end">
|
|
<button onclick={() => {
|
|
MobileSideBar.set(1)
|
|
}}>
|
|
<MenuIcon />
|
|
</button>
|
|
</div>
|
|
{:else if $MobileGUIStack === 2 && $SettingsMenuIndex > -1}
|
|
<button onclick={() => {
|
|
SettingsMenuIndex.set(-1)
|
|
}}>
|
|
<ArrowLeft />
|
|
</button>
|
|
<span class="font-bold text-lg">RisuAI</span>
|
|
{:else if $MobileGUIStack === 1}
|
|
<div class="flex items-stretch w-2xl max-w-full">
|
|
<input placeholder={language.search + '...'} bind:value={$MobileSearch} class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border bg-transparent rounded-md input-text text-xl flex-grow mx-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full">
|
|
</div>
|
|
{:else}
|
|
<span class="font-bold text-lg">RisuAI</span>
|
|
|
|
{/if}
|
|
</div> |