OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2025-03-13 11:18:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update sidebar

Browse source
This commit is contained in:
Made Baruna 2021-04-24 09:06:34 +08:00
parent 7d27f74da5
commit 82980bdefe
No known key found for this signature in database
GPG key ID: 5AA5DA16AA5DCEAD
4 changed files with 142 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/Sidebar/Sidebar.svelte
View file

@ -8,6 +8,7 @@
import SidebarTitle from './Title.svelte';
import SidebarItem from './SidebarItem.svelte';
import SidebarMoreItem from './SidebarMoreItem.svelte';
import { showSidebar } from '../../stores/sidebar';
import Button from '../Button.svelte';
@ -50,10 +51,11 @@
<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 bg-background items-center z-50
class={`sidebar 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">
<div class="paimon-bg overflow-x-hidden h-full w-full lg:w-64 fixed z-0" />
<div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5 z-10">
{#if !mobile}
<SidebarTitle />
{/if}
@ -90,13 +92,6 @@
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'}
@ -104,6 +99,19 @@
label={$t('sidebar.todoList')}
href="/todo"
/>
<SidebarMoreItem
{mobile}
{segment}
on:clicked={close}
active={segment === 'items' || segment === 'achievement' || segment === 'reminder'}
image="/images/items.png"
label={$t('sidebar.database')}
items={[
{ label: $t('sidebar.items'), href: '/items' },
{ label: $t('sidebar.achievement'), href: '/achievement' },
{ label: $t('sidebar.reminder'), href: '/reminder' },
]}
/>
<SidebarItem
on:clicked={close}
active={segment === 'timeline'}
@ -120,7 +128,7 @@
/>
</div>
<div
class="pt-2 pb-4 flex flex-col items-center w-full z-10"
class="pt-2 pb-4 flex flex-col items-center w-full z-20"
style="width: 248px; background: linear-gradient(180deg, rgba(32, 36, 66, 0) 0%, rgba(32, 36, 66, 1) 10%);"
>
<div
@ -150,7 +158,7 @@
</div>
<style>
.sidebar::after {
.paimon-bg::after {
content: '';
top: -50px;
left: 50px;

117
src/components/Sidebar/SidebarMoreItem.svelte Normal file
View file

@ -0,0 +1,117 @@
<script>
import { createEventDispatcher } from 'svelte';
import { slide } from 'svelte/transition';
export let image;
export let label;
export let active;
export let segment;
export let mobile;
export let items = [];
let expandMenu = false;
const dispatch = createEventDispatcher();
function expand() {
if (!mobile) return;
expandMenu = !expandMenu;
}
function clicked() {
dispatch('clicked');
}
</script>
<div class="w-full rounded-xl ease-in duration-150 {mobile ? '' : 'parent'} {active ? 'active' : ''}">
<div class="flex absolute transform translate-x-full child">
<div class="w-5 h-full" />
<div class="bg-background shadow-lg flex flex-col p-2 -mt-2 rounded-r-xl">
{#each items as item}
<a
on:click={clicked}
class="w-full rounded-xl ease-in duration-150 {segment === item.href.substring(1) ? 'active-child' : ''}"
href={item.href}
>
<div
class="w-full py-3 flex items-center px-4 cursor-pointer transition-colors text-gray-500 hover:text-white ease-in duration-150"
>
<div class="h-8 mr-3 flex justify-center items-center leading-none">
<span>●</span>
</div>
<span class="font-body font-semibold flex-1 text-lg leading-none">
{item.label}
</span>
</div>
</a>
{/each}
</div>
</div>
<div class="group w-full py-3 flex items-center px-4 cursor-pointer transition-colors" on:click={expand}>
<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="parent-span font-body font-semibold flex-1 text-lg leading-none text-gray-500 group-hover:text-white ease-in duration-150"
>
{label}
</span>
</div>
</div>
{#if mobile && expandMenu}
<div class="py-2 flex flex-col w-full" transition:slide={{ duration: 100 }}>
{#each items as item}
<a
on:click={clicked}
class="w-full rounded-xl ease-in duration-150 {segment === item.href.substring(1) ? 'active-child' : ''}"
href={item.href}
>
<div
class="w-full py-3 flex items-center px-4 cursor-pointer transition-colors text-gray-500 hover:text-white ease-in duration-150"
>
<div class="h-8 w-8 mr-3 flex justify-center items-center leading-none">
<span>●</span>
</div>
<span class="font-body font-semibold flex-1 text-lg leading-none">
{item.label}
</span>
</div>
</a>
{/each}
</div>
{/if}
<style>
.active {
@apply bg-primary;
@apply bg-opacity-75;
span.parent-span {
@apply text-white;
}
img {
@apply opacity-100;
}
}
.active-child {
@apply bg-primary;
@apply bg-opacity-75;
span {
@apply text-white;
}
}
.child {
display: none;
right: 1.3rem;
}
.parent:hover {
.child {
display: flex;
}
}
</style>

3
src/locales/en.json
View file

@ -4,7 +4,10 @@
"character": "Character",
"wishCounter": "Wish Counter",
"calculator": "Calculator",
"database": "Database",
"items": "Items",
"achievement": "Achievements",
"reminder": "Reminder",
"todoList": "Todo List",
"timeline": "Timeline",
"settings": "Settings",

3
src/locales/id.json
View file

@ -4,7 +4,10 @@
"character": "Karakter",
"wishCounter": "Wish Counter",
"calculator": "Kalkulator",
"database": "Database",
"items": "Item",
"achievement": "Achievement",
"reminder": "Reminder",
"todoList": "Todo List",
"timeline": "Timeline",
"settings": "Pengaturan",