Hambueger Menü

This commit is contained in:
2026-04-04 15:13:33 +02:00
parent bfab08029b
commit 9ceccb9226
4 changed files with 32 additions and 35 deletions
+4 -5
View File
@@ -275,10 +275,9 @@ $landingPreview = [
.site-nav__link.active{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--brand-rgb),.12);background:#fff;color:var(--brand);font-weight:700}
.site-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--brand-rgb),.12);background:#fff;color:var(--brand);font-weight:700}
.site-toggle::-webkit-details-marker{display:none}
.site-toggle::after{content:"";width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
.site-toggle::before{content:"";display:block;width:18px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.site-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 32px));padding:14px;border-radius:18px;border:1px solid var(--line);background:#fffdf9;box-shadow:var(--shadow)}
.site-stack{display:grid;gap:10px}
.site-stack .site-nav__link{justify-content:flex-start;background:rgba(255,255,255,.78);border-color:rgba(37,24,15,.08);color:var(--ink)}
@@ -323,7 +322,7 @@ $landingPreview = [
.marketing-mobile[open]{z-index:40}
.marketing-mobile__toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;list-style:none;cursor:pointer;min-width:38px;min-height:38px;padding:.24rem .46rem;border-radius:8px;border:1px solid rgba(201,214,255,.14);background:rgba(255,255,255,.04);color:#f4f7ff}
.marketing-mobile__toggle::-webkit-details-marker{display:none}
.marketing-mobile__toggle::before{content:"";width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;box-shadow:inset 0 -4px 0 0 currentColor}
.marketing-mobile__toggle::before{content:"";display:block;width:16px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.marketing-mobile__panel{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 24px));padding:14px;border-radius:16px;border:1px solid rgba(163,183,255,.14);background:rgba(8,10,18,.96);box-shadow:0 18px 36px rgba(1,5,13,.45)}
.marketing-mobile__stack{display:grid;gap:8px}
.marketing-mobile__stack .marketing-nav__link{justify-content:flex-start;padding:.55rem .7rem;background:rgba(255,255,255,.04);border-color:rgba(201,214,255,.1)}
@@ -485,7 +484,7 @@ $landingPreview = [
<?php endif; ?>
<details class="site-mobile">
<summary class="site-toggle">Menue</summary>
<summary class="site-toggle">Menü</summary>
<div class="site-panel">
<nav class="site-stack" aria-label="Mobile Navigation">
<?php foreach ($primaryNavItems as $item): ?>
+10 -8
View File
@@ -295,11 +295,12 @@
.mobile-nav__toggle::before {
content: "";
display: block;
width: 18px;
height: 12px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
box-shadow: inset 0 -4px 0 0 currentColor;
height: 2px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.mobile-nav__panel {
@@ -768,11 +769,12 @@
.marketing-mobile__toggle::before {
content: "";
display: block;
width: 16px;
height: 10px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
box-shadow: inset 0 -4px 0 0 currentColor;
height: 2px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.marketing-mobile__panel {
@@ -101,9 +101,8 @@
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{
display:flex;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
list-style:none;
@@ -115,16 +114,15 @@
font-weight:700;
}
.site-toggle::-webkit-details-marker{display:none}
.site-toggle::after{
.site-toggle::before{
content:"";
width:11px;
height:11px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg);
transition:transform .2s ease;
display:block;
width:18px;
height:2px;
border-radius:999px;
background:currentColor;
box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
.site-panel{
position:absolute;
right:0;
@@ -272,7 +270,7 @@
<form method="post" action="/logout/"><button type="submit" class="button button--ghost">Abmelden</button></form>
<details class="site-mobile">
<summary class="site-toggle">Menue</summary>
<summary class="site-toggle">Menü</summary>
<div class="site-panel">
<nav class="site-stack" aria-label="Mobiles Tenant-Menü">
<?php foreach ($tenantNavItems as $item): ?>
@@ -91,9 +91,8 @@
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{
display:flex;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
list-style:none;
@@ -105,16 +104,15 @@
font-weight:700;
}
.site-toggle::-webkit-details-marker{display:none}
.site-toggle::after{
.site-toggle::before{
content:"";
width:11px;
height:11px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg);
transition:transform .2s ease;
display:block;
width:18px;
height:2px;
border-radius:999px;
background:currentColor;
box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
.site-panel{
position:absolute;
right:0;
@@ -242,7 +240,7 @@
<form method="post" action="/logout/"><button type="submit" class="button button--ghost">Abmelden</button></form>
<details class="site-mobile">
<summary class="site-toggle">Menue</summary>
<summary class="site-toggle">Menü</summary>
<div class="site-panel">
<nav class="site-stack" aria-label="Mobiles Tenant-Menü">
<?php foreach ($tenantNavItems as $item): ?>