Bessere Filtermöglichkeiten für Listen

src/includes/bar.njk

@@ -1,4 +1,4 @@
 {% include "header.njk" %}
-{% include "sidenav.njk" %}
+{% include "nav.njk" %}
 {% include "search.njk" %}
 {% include "footer.njk" %}

src/includes/footer.njk

@@ -1,6 +1,6 @@
-<div class="grow"></div>
-<footer class="text-base text-center py-1 px-4 grow-0 shrink-0">
+{# <div class="hidden desktop:block grow"></div>
+<footer class="hidden desktop:block text-base text-center py-1 px-4 grow-0 shrink-0">
     Stand: 30.1.2023
     | <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="https://github.com/schnulller/jacoblenz">Code</a> | 
         <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="/datenschutz/">Datenschutz & Impressum</a>
-</footer>
+</footer> #}

src/includes/header.njk

@@ -1,11 +1,17 @@
 
-<header>
-	<img class="px-12 pb-4 pt-8" src="/images/JLA.png" alt="jla-Logo">
+<header class="flex flex-row justify-between desktop:justify-start desktop:block">
+	<div class="flex flex-row desktop:block">
+	<img class="h-20 desktop:h-auto desktop:px-12 desktop:pb-4 desktop:pt-8" src="/images/JLA.png" alt="jla-Logo">
 	<h1 class="px-3 py-2 pb-4 text-5xl font-bold text-center">
 		{{ config.title }}
 	</h1>
-	<h2 class="py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
+	<h2 class="hidden desktop:block py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
 		{{ config.shortdescription }}
 		{# <br> Forschungsstelle zum Schriftsteller Jacob Michael Reinhold Lenz. #}
 	</h2>
+	</div>
+	<button class="border rounded-md w-16 h-16 desktop:hidden" id="navigation-button">
+		Menu
+	</div>
 </header>
+

src/includes/nav.njk

@@ -21,7 +21,7 @@
 </li>
 {%- endmacro %}
 
-<nav class="py-4 sidebar-nav px-4">
+<nav class="hidden desktop:block py-4 sidebar-nav px-4" id="navigation">
 <ul>
 {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
 </ul>

src/includes/search.njk

@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+{# <div class="hidden desktop:flex flex-col">
     <div class="grow">
         <div class="bg-slate-50 border-t border-slate-600 py-5 px-4">
             <form class="flex flex-row w-full">
@@ -7,4 +7,4 @@
             </form>
         </div>
     </div>
-</div>
+</div> #}