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:
|
More about snippets:
|
||||||
https://getkirby.com/docs/guide/templates/snippets
|
https://getkirby.com/docs/guide/templates/snippets
|
||||||
*/
|
*/
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
@@ -23,6 +24,7 @@
|
|||||||
In the title tag we show the title of our
|
In the title tag we show the title of our
|
||||||
site and the title of the current page
|
site and the title of the current page
|
||||||
*/
|
*/
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
|
<title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
|
||||||
@@ -33,6 +35,7 @@
|
|||||||
Kirby also provides the `js()` helper to include script file.
|
Kirby also provides the `js()` helper to include script file.
|
||||||
More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
|
More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
|
||||||
*/
|
*/
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<?= css([
|
<?= css([
|
||||||
@@ -45,7 +48,9 @@
|
|||||||
absolute URLs in Kirby that always start with the
|
absolute URLs in Kirby that always start with the
|
||||||
base URL of your site.
|
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>
|
</head>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
https://getkirby.com/docs/guide/templates/snippets
|
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="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex h-24 items-center justify-between">
|
<div class="flex h-24 items-center justify-between">
|
||||||
<!-- Logo (Links) -->
|
<!-- Logo (Links) -->
|
||||||
|
|||||||
+26
-13
@@ -17,40 +17,53 @@
|
|||||||
|
|
||||||
More about templates: https://getkirby.com/docs/guide/templates/basics
|
More about templates: https://getkirby.com/docs/guide/templates/basics
|
||||||
*/
|
*/
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<?php snippet('header') ?>
|
<?php snippet('header') ?>
|
||||||
|
|
||||||
<body class="font-sans antialiased bg-gray-100 text-gray-900">
|
<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">
|
<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">
|
<p class="text-lg leading-relaxed mb-4">
|
||||||
Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem zentralen Container eingefasst,
|
Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem
|
||||||
der die Breite begrenzt, um die Lesbarkeit zu verbessern und das Design ansprechender zu gestalten.
|
zentralen Container eingefasst,
|
||||||
Probieren Sie, die Größe Ihres Browserfensters zu ändern, um zu sehen, wie sich der Inhalt anpasst.
|
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>
|
||||||
|
|
||||||
<p class="text-lg leading-relaxed mb-4">
|
<p class="text-lg leading-relaxed mb-4">
|
||||||
Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu erstellen,
|
Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu
|
||||||
ohne benutzerdefiniertes CSS schreiben zu müssen. Alle Stile werden direkt in der HTML-Klasse definiert,
|
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.
|
was die Entwicklung beschleunigt und die Wartung vereinfacht.
|
||||||
</p>
|
</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">
|
<ul class="list-disc list-inside text-lg leading-relaxed mb-4 ml-4">
|
||||||
<li>Schnelle Entwicklung dank Utility-First-Ansatz</li>
|
<li>Schnelle Entwicklung dank Utility-First-Ansatz</li>
|
||||||
<li>Hochgradig anpassbar</li>
|
<li>Hochgradig anpassbar</li>
|
||||||
<li>Responsives Design out-of-the-box</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>
|
</ul>
|
||||||
|
|
||||||
<p class="text-lg leading-relaxed">
|
<p class="text-lg leading-relaxed">
|
||||||
Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell zu gestalten.
|
Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell
|
||||||
Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in diesen responsiven Container.
|
zu gestalten.
|
||||||
|
Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in
|
||||||
|
diesen responsiven Container.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<?= js('assets/js/navbar.js') ?>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<?php snippet('footer') ?>
|
<?php snippet('footer') ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user