src/components/dashboard/Dashboard.svelte

@@ -12,19 +12,22 @@
   }
 </script>
 
+<style>
+  .collapsed_navigation {
+    @apply -translate-x-full;
+  }
+</style>
+
 <section class="min-h-screen bg-gray-50">
-  {#if navOpen}
   <div
-      class:-translate-x-full={!navOpen}
+    class:collapsed_navigation={!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" />
       <h3 class="text-lg">Lauf für Kaya! Admin</h3>
     </a>
-      <nav
-        class="text-sm font-medium text-gray-600"
-        aria-label="Main Navigation">
+    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
       <a
         class:bg-gray-100={$router.path === '/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
@@ -301,7 +304,6 @@
       </span>
     </nav>
   </div>
-  {/if}
   <div class="ml-0 transition md:ml-60">
     <header
       class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">