Update sidebar
Made Baruna
parent
4a985028f4
commit
e80fb9d89a
|
|
@ -50,97 +50,103 @@
|
|||
<div
|
||||
in:fly={{ x: 100, duration: 100 }}
|
||||
out:fly={{ x: 100, duration: 100 }}
|
||||
class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col p-5 bg-background items-center z-50
|
||||
class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col bg-background items-center z-50
|
||||
${mobile ? 'flex' : 'hidden lg:flex'}`}
|
||||
>
|
||||
{#if !mobile}
|
||||
<SidebarTitle />
|
||||
{/if}
|
||||
{#if mobile}
|
||||
<div class="cursor-pointer" on:click={close}>
|
||||
<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={$t('sidebar.home')}
|
||||
href="/"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'characters'}
|
||||
image="/images/characters.png"
|
||||
label={$t('sidebar.character')}
|
||||
href="/characters"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'wish'}
|
||||
image="/images/wish.png"
|
||||
label={$t('sidebar.wishCounter')}
|
||||
href="/wish"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'calculator'}
|
||||
image="/images/calculator.png"
|
||||
label={$t('sidebar.calculator')}
|
||||
href="/calculator"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'items'}
|
||||
image="/images/items.png"
|
||||
label={$t('sidebar.items')}
|
||||
href="/items"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'todo'}
|
||||
image="/images/todos.png"
|
||||
label={$t('sidebar.todoList')}
|
||||
href="/todo"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'timeline'}
|
||||
image="/images/timeline.png"
|
||||
label={$t('sidebar.timeline')}
|
||||
href="/timeline"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'settings'}
|
||||
image="/images/settings.png"
|
||||
label={$t('sidebar.settings')}
|
||||
href="/settings"
|
||||
/>
|
||||
<div class="mt-8 md:mt-0 md:flex-1" />
|
||||
<div
|
||||
class="locale-selector flex items-center justify-center my-4 py-2 cursor-pointer
|
||||
rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
|
||||
>
|
||||
<img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
|
||||
<span class="text-gray-400">{currentLocale.label}</span>
|
||||
<div class="locale-dropdown" style="top: {locales.length * -45}px;">
|
||||
{#each locales as locale}
|
||||
<div
|
||||
class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
|
||||
on:click={() => changeLocale(locale.id)}
|
||||
>
|
||||
<img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
|
||||
<span class="text-gray-400">{locale.label}</span>
|
||||
</div>
|
||||
<div class="w-40" style="height: 5px;" />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5">
|
||||
{#if !mobile}
|
||||
<SidebarTitle />
|
||||
{/if}
|
||||
{#if mobile}
|
||||
<div class="cursor-pointer" on:click={close}>
|
||||
<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={$t('sidebar.home')}
|
||||
href="/"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'characters'}
|
||||
image="/images/characters.png"
|
||||
label={$t('sidebar.character')}
|
||||
href="/characters"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'wish'}
|
||||
image="/images/wish.png"
|
||||
label={$t('sidebar.wishCounter')}
|
||||
href="/wish"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'calculator'}
|
||||
image="/images/calculator.png"
|
||||
label={$t('sidebar.calculator')}
|
||||
href="/calculator"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'items'}
|
||||
image="/images/items.png"
|
||||
label={$t('sidebar.items')}
|
||||
href="/items"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'todo'}
|
||||
image="/images/todos.png"
|
||||
label={$t('sidebar.todoList')}
|
||||
href="/todo"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'timeline'}
|
||||
image="/images/timeline.png"
|
||||
label={$t('sidebar.timeline')}
|
||||
href="/timeline"
|
||||
/>
|
||||
<SidebarItem
|
||||
on:clicked={close}
|
||||
active={segment === 'settings'}
|
||||
image="/images/settings.png"
|
||||
label={$t('sidebar.settings')}
|
||||
href="/settings"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="pt-2 pb-4 flex flex-col items-center w-full z-10"
|
||||
style="width: 248px; background: linear-gradient(180deg, rgba(32, 36, 66, 0) 0%, rgba(32, 36, 66, 1) 10%);"
|
||||
>
|
||||
<div
|
||||
class="locale-selector flex items-center justify-center mb-4 mt-0 py-2 cursor-pointer
|
||||
rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
|
||||
>
|
||||
<img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
|
||||
<span class="text-gray-400">{currentLocale.label}</span>
|
||||
<div class="locale-dropdown" style="top: {locales.length * -45}px;">
|
||||
{#each locales as locale}
|
||||
<div
|
||||
class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
|
||||
on:click={() => changeLocale(locale.id)}
|
||||
>
|
||||
<img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
|
||||
<span class="text-gray-400">{locale.label}</span>
|
||||
</div>
|
||||
<div class="w-40" style="height: 5px;" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<Button on:click={openDonationModal}>
|
||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
||||
{$t('sidebar.donate')}
|
||||
</Button>
|
||||
</div>
|
||||
<Button on:click={openDonationModal}>
|
||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
||||
{$t('sidebar.donate')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -167,4 +173,19 @@
|
|||
@apply block;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
@apply rounded-xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,19 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<a on:click={clicked} class={`w-full rounded-xl ease-in duration-150 ${active ? 'active' : ''}`} {href}>
|
||||
<div class="group w-full py-3 flex items-center px-4 cursor-pointer transition-colors">
|
||||
<div class="h-8 w-8 flex justify-center mr-3 opacity-75 group-hover:opacity-100 ease-in duration-150">
|
||||
<img class="h-full" src={image} alt={label} />
|
||||
</div>
|
||||
<span
|
||||
class="font-body font-semibold flex-1 text-lg leading-none text-gray-500 group-hover:text-white ease-in duration-150"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.active {
|
||||
@apply bg-primary;
|
||||
|
|
@ -27,13 +40,3 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<a on:click={clicked} class={`w-full rounded-xl ease-in duration-150 ${active ? 'active' : ''}`} {href}>
|
||||
<div class="group w-full py-3 flex items-center px-6 cursor-pointer transition-colors">
|
||||
<div class="h-8 w-8 flex justify-center mr-3 opacity-75 group-hover:opacity-100 ease-in duration-150">
|
||||
<img class="h-full" src={image} alt={label} />
|
||||
</div>
|
||||
<span
|
||||
class="font-body font-semibold text-lg leading-none text-gray-500 group-hover:text-white ease-in duration-150">{label}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue