feat: implement mobile menu toggle and update styles for navbar and footer
This commit is contained in:
@@ -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');
|
||||
}
|
||||
});
|
||||
+109
-41
File diff suppressed because one or more lines are too long
@@ -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) -->
|
||||
|
||||
+23
-10
@@ -17,6 +17,7 @@
|
||||
|
||||
More about templates: https://getkirby.com/docs/guide/templates/basics
|
||||
*/
|
||||
|
||||
?>
|
||||
<?php snippet('header') ?>
|
||||
|
||||
@@ -24,33 +25,45 @@
|
||||
<?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>
|
||||
<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>
|
||||
|
||||
<?= js('assets/js/navbar.js') ?>
|
||||
</body>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
|
||||
Reference in New Issue
Block a user