ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update sidebar

pull/1/head
Made Baruna 2021-04-19 22:13:35 +08:00
parent 4a985028f4
commit e80fb9d89a
2 changed files with 122 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Sidebar/Sidebar.svelte
View File

@ -50,9 +50,10 @@
<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'}`}
>
<div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5">
{#if !mobile}
<SidebarTitle />
{/if}
@ -117,9 +118,13 @@
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
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" />
@ -141,6 +146,7 @@
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
{$t('sidebar.donate')}
</Button>
</div>
</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>

23
src/components/Sidebar/SidebarItem.svelte
View File

@ -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>