Update sidebar
Made Baruna
parent
4a985028f4
commit
e80fb9d89a
|
|
@ -50,97 +50,103 @@
|
||||||
<div
|
<div
|
||||||
in:fly={{ x: 100, duration: 100 }}
|
in:fly={{ x: 100, duration: 100 }}
|
||||||
out: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'}`}
|
${mobile ? 'flex' : 'hidden lg:flex'}`}
|
||||||
>
|
>
|
||||||
{#if !mobile}
|
<div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5">
|
||||||
<SidebarTitle />
|
{#if !mobile}
|
||||||
{/if}
|
<SidebarTitle />
|
||||||
{#if mobile}
|
{/if}
|
||||||
<div class="cursor-pointer" on:click={close}>
|
{#if mobile}
|
||||||
<Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
|
<div class="cursor-pointer" on:click={close}>
|
||||||
</div>
|
<Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
|
||||||
{/if}
|
</div>
|
||||||
<SidebarItem
|
{/if}
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === undefined}
|
on:clicked={close}
|
||||||
image="/images/home.png"
|
active={segment === undefined}
|
||||||
label={$t('sidebar.home')}
|
image="/images/home.png"
|
||||||
href="/"
|
label={$t('sidebar.home')}
|
||||||
/>
|
href="/"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'characters'}
|
on:clicked={close}
|
||||||
image="/images/characters.png"
|
active={segment === 'characters'}
|
||||||
label={$t('sidebar.character')}
|
image="/images/characters.png"
|
||||||
href="/characters"
|
label={$t('sidebar.character')}
|
||||||
/>
|
href="/characters"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'wish'}
|
on:clicked={close}
|
||||||
image="/images/wish.png"
|
active={segment === 'wish'}
|
||||||
label={$t('sidebar.wishCounter')}
|
image="/images/wish.png"
|
||||||
href="/wish"
|
label={$t('sidebar.wishCounter')}
|
||||||
/>
|
href="/wish"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'calculator'}
|
on:clicked={close}
|
||||||
image="/images/calculator.png"
|
active={segment === 'calculator'}
|
||||||
label={$t('sidebar.calculator')}
|
image="/images/calculator.png"
|
||||||
href="/calculator"
|
label={$t('sidebar.calculator')}
|
||||||
/>
|
href="/calculator"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'items'}
|
on:clicked={close}
|
||||||
image="/images/items.png"
|
active={segment === 'items'}
|
||||||
label={$t('sidebar.items')}
|
image="/images/items.png"
|
||||||
href="/items"
|
label={$t('sidebar.items')}
|
||||||
/>
|
href="/items"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'todo'}
|
on:clicked={close}
|
||||||
image="/images/todos.png"
|
active={segment === 'todo'}
|
||||||
label={$t('sidebar.todoList')}
|
image="/images/todos.png"
|
||||||
href="/todo"
|
label={$t('sidebar.todoList')}
|
||||||
/>
|
href="/todo"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'timeline'}
|
on:clicked={close}
|
||||||
image="/images/timeline.png"
|
active={segment === 'timeline'}
|
||||||
label={$t('sidebar.timeline')}
|
image="/images/timeline.png"
|
||||||
href="/timeline"
|
label={$t('sidebar.timeline')}
|
||||||
/>
|
href="/timeline"
|
||||||
<SidebarItem
|
/>
|
||||||
on:clicked={close}
|
<SidebarItem
|
||||||
active={segment === 'settings'}
|
on:clicked={close}
|
||||||
image="/images/settings.png"
|
active={segment === 'settings'}
|
||||||
label={$t('sidebar.settings')}
|
image="/images/settings.png"
|
||||||
href="/settings"
|
label={$t('sidebar.settings')}
|
||||||
/>
|
href="/settings"
|
||||||
<div class="mt-8 md:mt-0 md:flex-1" />
|
/>
|
||||||
<div
|
</div>
|
||||||
class="locale-selector flex items-center justify-center my-4 py-2 cursor-pointer
|
<div
|
||||||
rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
|
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%);"
|
||||||
<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
|
||||||
<div class="locale-dropdown" style="top: {locales.length * -45}px;">
|
class="locale-selector flex items-center justify-center mb-4 mt-0 py-2 cursor-pointer
|
||||||
{#each locales as locale}
|
rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
|
||||||
<div
|
>
|
||||||
class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
|
<img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
|
||||||
on:click={() => changeLocale(locale.id)}
|
<span class="text-gray-400">{currentLocale.label}</span>
|
||||||
>
|
<div class="locale-dropdown" style="top: {locales.length * -45}px;">
|
||||||
<img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
|
{#each locales as locale}
|
||||||
<span class="text-gray-400">{locale.label}</span>
|
<div
|
||||||
</div>
|
class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
|
||||||
<div class="w-40" style="height: 5px;" />
|
on:click={() => changeLocale(locale.id)}
|
||||||
{/each}
|
>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
<Button on:click={openDonationModal}>
|
|
||||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
|
||||||
{$t('sidebar.donate')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -167,4 +173,19 @@
|
||||||
@apply block;
|
@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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,19 @@
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
<style>
|
||||||
.active {
|
.active {
|
||||||
@apply bg-primary;
|
@apply bg-primary;
|
||||||
|
|
@ -27,13 +40,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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