58 lines
1.5 KiB
Svelte
58 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import style from './style.module.scss';
|
|
|
|
import Icon from 'svelte-icons-pack/Icon.svelte';
|
|
import VscHome from 'svelte-icons-pack/vsc/VscHome';
|
|
import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
|
|
import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
|
|
import { route, back } from '../../store/RouteStore';
|
|
import { onMount } from 'svelte';
|
|
|
|
import { registerEventHandler } from '../../lib/css_var';
|
|
|
|
let self: HTMLElement;
|
|
let longStyle = false;
|
|
|
|
const checkLongStyle = () => {
|
|
if (self.clientWidth >= 120) {
|
|
longStyle = true;
|
|
} else {
|
|
longStyle = false;
|
|
}
|
|
}
|
|
|
|
registerEventHandler((e) => {
|
|
if (e.name !== '--sidebar-width') return;
|
|
checkLongStyle();
|
|
})
|
|
|
|
onMount(() => {
|
|
checkLongStyle()
|
|
})
|
|
</script>
|
|
|
|
<div class={style.sidebar} bind:this={self}>
|
|
|
|
<button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
|
|
<Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
|
|
{#if longStyle}
|
|
Go Back
|
|
{/if }
|
|
</button>
|
|
|
|
<button class={style.button} on:click={() => {route('/')}}>
|
|
<Icon src={VscHome} />
|
|
{#if longStyle}
|
|
Home
|
|
{/if }
|
|
</button>
|
|
|
|
<div class={style.bottom}>
|
|
<button class={style.button}>
|
|
<Icon src={BsGearFill} />
|
|
{#if longStyle}
|
|
Settings
|
|
{/if }
|
|
</button>
|
|
</div>
|
|
</div> |