tmp

src/components/Dashboard.svelte

@@ -1,5 +1,6 @@
 <script>
-  import StatCards from "./StatCards.svelte";
+  import { _ } from "svelte-i18n";
+  // import StatCards from "./StatCards.svelte";
   import Table from "./Table.svelte";
   import Pagination from "./Pagination.svelte";
   import FormLayout from "./FormLayout.svelte";
@@ -7,6 +8,7 @@
   import BreadcrumbNav from "./BreadcrumbNav.svelte";
   //
   let isProfileActionsVisible = false;
+  let mobile_menu_opened = false;
 </script>
 
 <div>
@@ -141,7 +143,7 @@
                   <a
                     href="/logout"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    role="menuitem">$_('sign-out')</a>
+                    role="menuitem">$_('signout')</a>
                 </div>
               {/if}
             </div>
@@ -150,6 +152,9 @@
         <div class="-mr-2 flex md:hidden">
           <!-- Mobile menu button -->
           <button
+            on:click={() => {
+              mobile_menu_opened = !mobile_menu_opened;
+            }}
             class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
             <span class="sr-only">Open main menu</span>
             <!--
@@ -198,11 +203,10 @@
 
       Open: "block", closed: "hidden"
     -->
-    <div class="hidden md:hidden">
+    <div class="md:hidden" class:block={mobile_menu_opened === true} class:hidden={mobile_menu_opened === false}>
       <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
         <a
-          href="#"
+          href="/"
           class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
 
         <a
@@ -268,37 +272,28 @@
 
           <a
             href="#"
-            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign
-            out</a>
+            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">$_('signout')</a>
         </div>
       </div>
     </div>
   </nav>
-
-  <header class="bg-white shadow">
+  <!-- <header class="bg-white shadow">
     <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
       <h1 class="text-3xl leading-tight">
         <span class="font-bold">Dashboard</span><span> - hello there 👋</span>
       </h1>
     </div>
-  </header>
+  </header> -->
+  <div class="shadow px-6 pt-4 pb-1">
+    <BreadcrumbNav />
+  </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <BreadcrumbNav/>
-      <!--  -->
-      <StatCards />
-      <!--  -->
-
-      <div class="mb-8">
-        <Tracks />
-      </div>
+      <!-- <StatCards /> -->
+      <div class="mb-8"><Tracks /></div>
       <Pagination />
-      <div class="mb-8">
-        <Table />
-      </div>
-      <div class="mb-8">
-        <FormLayout />
-      </div>
+      <div class="mb-8"><Table /></div>
+      <div class="mb-8"><FormLayout /></div>
     </div>
   </main>
 </div>