🐞 bugfix for svelte x tailwind class names

ref #125
This commit is contained in:
Philipp Dormann 2021-04-07 21:35:01 +02:00
parent 495a6b22bd
commit b6b07cf30c

View File

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