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 <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'}`}
> >
<div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5">
{#if !mobile} {#if !mobile}
<SidebarTitle /> <SidebarTitle />
{/if} {/if}
@ -117,9 +118,13 @@
label={$t('sidebar.settings')} label={$t('sidebar.settings')}
href="/settings" href="/settings"
/> />
<div class="mt-8 md:mt-0 md:flex-1" /> </div>
<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" 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" /> <img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
@ -142,6 +147,7 @@
{$t('sidebar.donate')} {$t('sidebar.donate')}
</Button> </Button>
</div> </div>
</div>
<style> <style>
.sidebar::after { .sidebar::after {
@ -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>

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

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