package.json

@@ -13,7 +13,7 @@
 		"check-password-strength": "2.0.2",
 		"@odit/lfk-client-js": "0.10.1",
 		"@odit/license-exporter": "0.0.11",
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
+		"@sveltejs/vite-plugin-svelte": "1.0.0-next.5",
 		"@types/html-minifier": "4.0.0",
 		"auto-changelog": "2.2.1",
 		"autoprefixer": "10.2.5",
@@ -28,12 +28,12 @@
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
-		"tailwindcss": "2.1.1",
+		"tailwindcss": "2.0.4",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
 		"validator": "13.5.2",
 		"vite": "2.1.5",
-		"vite-plugin-windicss": "0.12.5",
+		"vite-plugin-windicss": "0.12.2",
 		"xlsx": "0.16.9"
 	},
 	"release-it": {

src/components/dashboard/Dashboard.svelte

@@ -1,27 +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";
-  $: navOpen = true;
+import { onMount } from "svelte";
+  $: navOpen = false;
   function logout() {
     localForage.clear();
     location.replace("/");
   }
+  // onMount(()=>{
+  //   navOpen=true;
+  // })
 </script>
 
-<style>
-  .collapsed_navigation {
-    @apply -translate-x-full;
-  }
-</style>
-
 <section class="min-h-screen bg-gray-50">
-  <div
+  <nav
-    class:collapsed_navigation={!navOpen}
+    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" />
@@ -303,15 +303,14 @@
         <span>{$_('logout')}</span>
       </span>
     </nav>
-  </div>
+  </nav>
   <div class="ml-0 transition md:ml-60">
     <header
+      on:click={() => {
+        navOpen = true;
+      }}
       class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
-      <button
+      <button class="block btn btn-light md:hidden">
-        on:click={() => {
-          navOpen = true;
-        }}
-        class="block btn btn-light md:hidden">
         <span class="sr-only">Menu</span><svg
           class="w-4 h-4"
           xmlns="http://www.w3.org/2000/svg"
@@ -325,13 +324,14 @@
       <NoComponentLoaded />
     </slot>
   </div>
-  {#if navOpen === true}
+  {#if navOpen}
-    <div
+     <div
-      on:click={() => {
+     on:click={() => {
-        navOpen = false;
+      navOpen = false;
-        console.log({ navOpen });
+      console.log({navOpen});
-      }}
+    }}
-      class:hidden={!navOpen}
+    class:bg-opacity-0={!navOpen}
-      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
+    class:bg-opacity-25={navOpen}
-  {/if}
+    class="fixed inset-0 z-10 w-screen h-screen bg-black md:hidden bg-opacity-0" />
-</section>
+    {/if}
+  </section>