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