Update sidebar
Made Baruna
parent
7d27f74da5
commit
82980bdefe
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue