move back button to sidebar

src/page/Explore/Explore.svelte

@@ -2,9 +2,6 @@
     import style from './style.module.scss';
     import Jumper from 'svelte-loading-spinners/Jumper.svelte';
 
-    import Icon from 'svelte-icons-pack/Icon.svelte';
-    import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
-
     import { invoke } from '@tauri-apps/api/tauri';
     import { back } from '../../store/RouteStore';
     
@@ -39,12 +36,6 @@
 
 <div class={style.root}>
 
-    <p style='margin:8px'>
-        <button aria-label="back" class={style.backbtn} on:click={(_) => { back() }}>
-            <Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
-        </button>
-    </p>
-
     <h1 style='text-align:center;margin-top:40px'>
         Homeservers
     </h1>
@@ -89,11 +80,6 @@
                         </td>
                     </tr>
                     {#each list as server}
-                        <script>
-                            if (!server.open) {
-                                continue
-                            }
-                        </script>
                         <tr>
                             <td class={style.server}>
                                 <h1>{server.name}</h1>

src/store/RouteStore.ts

@@ -40,7 +40,8 @@ export function route(path) {
 
 export function back() {
     const history: string[] = store.getState().history;
-    console.log(history[history.length - 2]);
+    if (history[history.length - 2] == '/load') return
+
     store.dispatch({ type: 'setPath', path: history[history.length - 2] });
     store.dispatch({ type: 'popHistory' });
 }

src/widget/Sidebar/Sidebar.svelte

@@ -3,11 +3,17 @@
 
     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 } from '../../store/RouteStore';
+    import { route, back } from '../../store/RouteStore';
 </script>
 
 <div class={style.sidebar}>
+
+    <button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
+        <Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
+    </button>
+
     <button class={style.button} on:click={() => {route('/')}}>
         <Icon src={VscHome} />
     </button>

src/widget/Sidebar/style.module.scss

@@ -22,6 +22,7 @@
         width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
         height: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
         margin: var(--sidebar-button-margin);
+        margin-bottom: 0;
         border: 3px solid #272222;
         
         &:hover {
@@ -42,8 +43,16 @@
             width: var(--sidebar-button-icon-size);
         }
     }
+    .back {
+        height: fit-content !important;
+        border-width: 1px;
+        padding: calc(var(--sidebar-button-margin) / 2);
+        svg {
+            transform: translate(0, 1px);
+        }
+    }
     .bottom {
         position: absolute;
-        bottom: 0;
+        bottom: var(--sidebar-button-margin);
     }
 }