diff --git a/src/components/dashboard/Dashboard.svelte b/src/components/dashboard/Dashboard.svelte
index b7957edf..05e56c70 100644
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -1,21 +1,27 @@
 <script>
+  import { clickOutside } from "../base/outsideclick";
   import { _ } from "svelte-i18n";
   import localForage from "localforage";
   import store from "../../store";
   import { router } from "tinro";
   import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
   import { AuthService } from "@odit/lfk-client-js";
+import { onMount } from "svelte";
   $: navOpen = false;
   function logout() {
     localForage.clear();
     location.replace("/");
   }
+  // onMount(()=>{
+  //   navOpen=true;
+  // })
 </script>
 
 <section class="min-h-screen bg-gray-50">
   <nav
     class:-translate-x-full={!navOpen}
     class:translate-x-0={navOpen}
+    
     class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
       <img src="/lfk-logo.png" alt="Logo" class="h-10" />
@@ -318,10 +324,14 @@
       <NoComponentLoaded />
     </slot>
   </div>
-  <div
-    on:click={() => {
+  {#if navOpen}
+     <div
+     on:click={() => {
       navOpen = false;
+      console.log({navOpen});
     }}
-    class:hidden={!navOpen}
-    class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
-</section>
+    class:bg-opacity-0={!navOpen}
+    class:bg-opacity-25={navOpen}
+    class="fixed inset-0 z-10 w-screen h-screen bg-black md:hidden bg-opacity-0" />
+    {/if}
+  </section>