[feat] new sidebar

src/lib/UI/GUI/CheckInput.svelte

@@ -8,22 +8,6 @@
     export let hiddenName = false
 </script>
 
-<!-- <label title={name} class:mr-2={margin} class="flex relative">
-    <input title={name} type="checkbox" class='absolute opacity-0 w-6 h-6' bind:checked={check} on:change={() => {
-        onChange(check)
-    }}/>
-    {#if check}
-        <div class="w-6 h-6 bg-green-500 flex justify-center items-center text-sm">
-            <CheckIcon />
-        </div>
-    {:else}
-        <div class="w-6 h-6 bg-selected flex justify-center items-center text-sm"/>
-    {/if}
-    {#if name != '' && !hiddenName}
-        <span class="text-neutral-200 ml-2">{name}</span>
-    {/if}
-</label> -->
-
 <label 
     class="flex items-center space-x-2 cursor-pointer text-white"
     class:mr-2={margin}

src/lib/UI/GUI/SideBarArrow.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { ArrowLeft, ArrowRight } from "lucide-svelte";
+  import { DynamicGUI, sideBarStore } from "src/ts/stores";
+
+</script>
+
+{#if $sideBarStore && !$DynamicGUI}
+    <button on:click={() => {sideBarStore.set(false)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
+        <ArrowLeft />
+    </button>
+{:else}
+    <button on:click={() => {sideBarStore.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
+        <ArrowRight />
+    </button>
+{/if}