feat: implement mobile menu toggle and update styles for navbar and footer

2025-06-14 19:35:29 +02:00
parent 6177803d35
commit 3b32f066f4
5 changed files with 193 additions and 74 deletions
@@ -0,0 +1,33 @@
+// Mobile Menu Toggle
+const mobileMenuButton = document.getElementById('mobile-menu-button');
+const mobileMenu = document.getElementById('mobile-menu');
+const menuIcon = document.getElementById('menu-icon');
+const closeIcon = document.getElementById('close-icon');
+
+mobileMenuButton.addEventListener('click', () => {
+    mobileMenu.classList.toggle('hidden');
+    menuIcon.classList.toggle('hidden');
+    closeIcon.classList.toggle('hidden');
+});
+
+// Mobile Dropdown Toggle
+const mobileDropdownBtns = document.querySelectorAll('.mobile-dropdown-btn');
+
+mobileDropdownBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const content = btn.nextElementSibling;
+        const arrow = btn.querySelector('.mobile-dropdown-arrow');
+
+        content.classList.toggle('hidden');
+        arrow.classList.toggle('rotate-180');
+    });
+});
+
+// Close mobile menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
+        mobileMenu.classList.add('hidden');
+        menuIcon.classList.remove('hidden');
+        closeIcon.classList.add('hidden');
+    }
+});
@@ -10,6 +10,7 @@
      More about snippets:
      https://getkirby.com/docs/guide/templates/snippets
    */
+
 ?>
 <!DOCTYPE html>
 <html lang="de">
@@ -23,6 +24,7 @@
          In the title tag we show the title of our
          site and the title of the current page
        */
+
    ?>

    <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
@@ -33,6 +35,7 @@
          Kirby also provides the `js()` helper to include script file.
          More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
        */
+
    ?>

    <?= css([
@@ -45,7 +48,9 @@
          absolute URLs in Kirby that always start with the
          base URL of your site.
        */
+
    ?>

-    <link rel="shortcut icon" type="image/x-icon" href="<?= url('assets/favicon.ico') ?>">
+    <link rel="shortcut icon" type="image/x-icon"
+          href="<?= url('assets/favicon.ico') ?>">
 </head>
@@ -11,7 +11,7 @@
      https://getkirby.com/docs/guide/templates/snippets
    */
 ?>
-<nav class="bg-sf_grau-50 shadow-lg sticky top-0 z-50">
+<nav class="bg-sf_grau-100 shadow-lg sticky top-0 z-50">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-24 items-center justify-between">
            <!-- Logo (Links) -->
@@ -17,40 +17,53 @@

      More about templates: https://getkirby.com/docs/guide/templates/basics
    */
+
 ?>
 <?php snippet('header') ?>

 <body class="font-sans antialiased bg-gray-100 text-gray-900">
-    <?php snippet('navbar') ?>
+<?php snippet('navbar') ?>

-    <div class="container mx-auto mt-8 p-4 bg-white rounded-lg shadow-lg max-w-4xl">
-        <h1 class="text-4xl font-bold text-gray-800 mb-6 text-center">Willkommen auf meiner Webseite!</h1>
+<div class="container mx-auto mt-8 p-4 bg-white rounded-lg shadow-lg max-w-4xl">
+    <h1 class="text-4xl font-bold text-gray-800 mb-6 text-center">Willkommen auf
+        meiner Webseite!</h1>

    <p class="text-lg leading-relaxed mb-4">
-            Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem zentralen Container eingefasst,
-            der die Breite begrenzt, um die Lesbarkeit zu verbessern und das Design ansprechender zu gestalten.
-            Probieren Sie, die Größe Ihres Browserfensters zu ändern, um zu sehen, wie sich der Inhalt anpasst.
+        Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem
+        zentralen Container eingefasst,
+        der die Breite begrenzt, um die Lesbarkeit zu verbessern und das Design
+        ansprechender zu gestalten.
+        Probieren Sie, die Größe Ihres Browserfensters zu ändern, um zu sehen,
+        wie sich der Inhalt anpasst.
    </p>

    <p class="text-lg leading-relaxed mb-4">
-            Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu erstellen,
-            ohne benutzerdefiniertes CSS schreiben zu müssen. Alle Stile werden direkt in der HTML-Klasse definiert,
+        Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu
+        erstellen,
+        ohne benutzerdefiniertes CSS schreiben zu müssen. Alle Stile werden
+        direkt in der HTML-Klasse definiert,
        was die Entwicklung beschleunigt und die Wartung vereinfacht.
    </p>

-        <h2 class="text-3xl font-semibold text-gray-700 mt-8 mb-4">Einige Vorteile von Tailwind CSS:</h2>
+    <h2 class="text-3xl font-semibold text-gray-700 mt-8 mb-4">Einige Vorteile
+        von Tailwind CSS:</h2>
    <ul class="list-disc list-inside text-lg leading-relaxed mb-4 ml-4">
        <li>Schnelle Entwicklung dank Utility-First-Ansatz</li>
        <li>Hochgradig anpassbar</li>
        <li>Responsives Design out-of-the-box</li>
-            <li>Geringere CSS-Dateigröße in Produktionsumgebungen (nach Purging)</li>
+        <li>Geringere CSS-Dateigröße in Produktionsumgebungen (nach Purging)
+        </li>
    </ul>

    <p class="text-lg leading-relaxed">
-            Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell zu gestalten.
-            Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in diesen responsiven Container.
+        Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell
+        zu gestalten.
+        Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in
+        diesen responsiven Container.
    </p>
-    </div>
+</div>
+
+<?= js('assets/js/navbar.js') ?>
 </body>

 <?php snippet('footer') ?>