Autoclose nav dropdown

frontend/src/components/NavElement.svelte

@@ -1,11 +1,11 @@
 <div class="nav-element">
   {#if link}
-    <Navigate to="{link}" styles="link row" on:click>
+    <a href="{link}" class="link row" on:click>
       <div class="icon">
         <i class="{icon}"></i>
       </div>
       <slot/>
-    </Navigate>
+    </a>
   {:else}
     <a class="link row" on:click>
       <div class="icon">
@@ -17,10 +17,8 @@
 </div>
 
 <script>
-    export let icon;
-    export let link;
-
-    import {Navigate} from 'svelte-router-spa'
+  export let icon;
+  export let link;
 </script>
 
 <style>

frontend/src/components/PanelDropdown.svelte

@@ -53,10 +53,6 @@
                 selectedRaw = selectedRaw.panel_id;
             }
         }
-
-
-        console.log(selectedRaw)
-        console.log(selected)
     }
 
     onMount(() => {

frontend/src/includes/Navbar.svelte

@@ -1,10 +1,10 @@
-<div class="navbar" class:dropdown>
-  <div class="wrapper" class:dropdown>
+<div class="navbar" class:dropdown={$dropdown}>
+  <div class="wrapper" class:dropdown={$dropdown}>
     <div>
       <div class="burger-menu">
         <NavElement icon="fas fa-bars" on:click={dropdownNav}>Menu</NavElement>
       </div>
-      <div class="nav-section" class:dropdown>
+      <div class="nav-section" class:dropdown={$dropdown}>
         <!-- on:click required to close dropdown again -->
         <NavElement icon="fas fa-cogs" link="/manage/{guildId}/settings" on:click={closeDropdown}>Settings</NavElement>
         <NavElement icon="fas fa-copy" link="/manage/{guildId}/transcripts" on:click={closeDropdown}>Transcripts</NavElement>
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div>
-      <div class="nav-section" class:dropdown>
+      <div class="nav-section" class:dropdown={$dropdown}>
         <NavElement icon="fas fa-server" link="/#">Servers</NavElement>
         <NavElement icon="fas fa-sign-out-alt" link="/logout">Logout</NavElement>
       </div>
@@ -28,16 +28,18 @@
 
 <script>
     export let guildId;
-    export let dropdown = false;
+    export let dropdown;
 
     import NavElement from "../components/NavElement.svelte";
 
     function dropdownNav() {
-        dropdown = !dropdown;
+      console.log(dropdown);
+        dropdown.update(v => !v);
     }
 
     function closeDropdown() {
-        dropdown = false;
+      console.log('cum');
+        dropdown.set(false);
     }
 </script>
 

frontend/src/layouts/ManageLayout.svelte

@@ -1,7 +1,7 @@
 <Head/>
 
 <div class="wrapper">
-  <Navbar guildId={guildId} bind:dropdown={$dropdown}/>
+  <Navbar guildId={guildId} {dropdown}/>
   <div class="super-container" class:dropdown={$dropdown}>
     <LoadingScreen/>
     <div class="content-container" class:hide={$loadingScreen}>

frontend/src/views/Settings.svelte

@@ -23,10 +23,6 @@
 
     export let currentRoute;
     let guildId = currentRoute.namedParams.id
-
-    onMount(async () => {
-        dropdown.set(false)
-    })
 </script>
 
 <style>

frontend/src/views/Transcripts.svelte

@@ -223,10 +223,6 @@
         return true;
     }
 
-    onMount(async () => {
-        dropdown.set(false)
-    })
-
     withLoadingScreen(async () => {
         await loadPanels();
         await loadSettings();