From c3fed92d8f445bd419ccc65f88c05d7054f2b3c1 Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Tue, 22 Mar 2022 01:22:43 +0000
Subject: [PATCH] Autoclose nav dropdown

---
 frontend/src/components/NavElement.svelte    | 10 ++++------
 frontend/src/components/PanelDropdown.svelte |  4 ----
 frontend/src/includes/Navbar.svelte          | 16 +++++++++-------
 frontend/src/layouts/ManageLayout.svelte     |  2 +-
 frontend/src/views/Settings.svelte           |  4 ----
 frontend/src/views/Transcripts.svelte        |  4 ----
 6 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/NavElement.svelte b/frontend/src/components/NavElement.svelte
index c67172d..98efaba 100644
--- a/frontend/src/components/NavElement.svelte
+++ b/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>
diff --git a/frontend/src/components/PanelDropdown.svelte b/frontend/src/components/PanelDropdown.svelte
index 2db6893..0b88b40 100644
--- a/frontend/src/components/PanelDropdown.svelte
+++ b/frontend/src/components/PanelDropdown.svelte
@@ -53,10 +53,6 @@
                 selectedRaw = selectedRaw.panel_id;
             }
         }
-
-
-        console.log(selectedRaw)
-        console.log(selected)
     }
 
     onMount(() => {
diff --git a/frontend/src/includes/Navbar.svelte b/frontend/src/includes/Navbar.svelte
index aa1a7cc..3509093 100644
--- a/frontend/src/includes/Navbar.svelte
+++ b/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>
 
diff --git a/frontend/src/layouts/ManageLayout.svelte b/frontend/src/layouts/ManageLayout.svelte
index 0fefb25..1bbe20f 100644
--- a/frontend/src/layouts/ManageLayout.svelte
+++ b/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}>
diff --git a/frontend/src/views/Settings.svelte b/frontend/src/views/Settings.svelte
index 90abcdb..d39440c 100644
--- a/frontend/src/views/Settings.svelte
+++ b/frontend/src/views/Settings.svelte
@@ -23,10 +23,6 @@
 
     export let currentRoute;
     let guildId = currentRoute.namedParams.id
-
-    onMount(async () => {
-        dropdown.set(false)
-    })
 </script>
 
 <style>
diff --git a/frontend/src/views/Transcripts.svelte b/frontend/src/views/Transcripts.svelte
index e4c8520..9889fd2 100644
--- a/frontend/src/views/Transcripts.svelte
+++ b/frontend/src/views/Transcripts.svelte
@@ -223,10 +223,6 @@
         return true;
     }
 
-    onMount(async () => {
-        dropdown.set(false)
-    })
-
     withLoadingScreen(async () => {
         await loadPanels();
         await loadSettings();