118 lines
4.7 KiB
PHP
118 lines
4.7 KiB
PHP
<?php
|
||
// Determine current page for active nav state
|
||
$currentPage = basename($_SERVER['PHP_SELF'] ?? 'index.php');
|
||
$langParam = isset($lang) && $lang === 'de' ? '?lang=de' : '';
|
||
$langParamAmp = isset($lang) && $lang === 'de' ? '&lang=de' : '';
|
||
?>
|
||
|
||
<!-- ── LiquidOverlayMenu ─────────────────────────────────────── -->
|
||
|
||
<!-- Fixed Logo (top-left) -->
|
||
<a class="nav-logo" href="/index.php<?php echo $langParam; ?>" aria-label="FlixCooks – Home">
|
||
<svg class="logo-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.75">
|
||
<path d="M2 19h20M5 19a7 7 0 0 1 14 0" stroke-linecap="round"/>
|
||
<path d="M12 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" fill="currentColor"/>
|
||
<path d="M12 5v1M7 19h10" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="logo-text">Flix<span>Cooks</span></span>
|
||
</a>
|
||
|
||
<!-- Fixed Hamburger Button (top-right) -->
|
||
<button class="nav-trigger" id="navMenuBtn" type="button" aria-label="<?php echo isset($lang) && $lang === 'de' ? 'Menü öffnen' : 'Open menu'; ?>" aria-expanded="false" aria-controls="navOverlay">
|
||
<span class="nav-burger-lines" aria-hidden="true">
|
||
<span class="nav-line nav-line--top"></span>
|
||
<span class="nav-line nav-line--mid"></span>
|
||
<span class="nav-line nav-line--bot"></span>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- Full-screen Overlay -->
|
||
<div class="nav-overlay" id="navOverlay" aria-hidden="true" role="dialog" aria-label="Navigation">
|
||
<div class="nav-overlay-inner">
|
||
<nav>
|
||
<ul class="nav-menu-list" role="list">
|
||
<li>
|
||
<a href="/index.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'index.php' ? 'aria-current="page"' : ''; ?>>
|
||
<span class="slide-hover-wrapper">
|
||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
|
||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="/index.php<?php echo $langParam; ?>#recipes-start" class="slide-hover-link">
|
||
<span class="slide-hover-wrapper">
|
||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
|
||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="/impressum.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'impressum.php' ? 'aria-current="page"' : ''; ?>>
|
||
<span class="slide-hover-wrapper">
|
||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
|
||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- Language & Footer links inside overlay -->
|
||
<div class="nav-overlay-footer">
|
||
<a href="<?php echo e($langSwitchHref ?? '#'); ?>" class="underline-link">
|
||
<?php echo isset($lang) && $lang === 'de' ? 'English' : 'Deutsch'; ?>
|
||
</a>
|
||
<a href="/datenschutz.php<?php echo $langParam; ?>" class="underline-link">
|
||
<?php echo isset($lang) && $lang === 'de' ? 'Datenschutz' : 'Privacy'; ?>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
var btn = document.getElementById('navMenuBtn');
|
||
var overlay = document.getElementById('navOverlay');
|
||
if (!btn || !overlay) return;
|
||
|
||
function openMenu() {
|
||
btn.classList.add('active');
|
||
overlay.classList.add('open');
|
||
overlay.setAttribute('aria-hidden', 'false');
|
||
btn.setAttribute('aria-expanded', 'true');
|
||
document.body.classList.add('nav-open');
|
||
}
|
||
function closeMenu() {
|
||
btn.classList.remove('active');
|
||
overlay.classList.remove('open');
|
||
overlay.setAttribute('aria-hidden', 'true');
|
||
btn.setAttribute('aria-expanded', 'false');
|
||
document.body.classList.remove('nav-open');
|
||
}
|
||
|
||
btn.addEventListener('click', function() {
|
||
if (btn.classList.contains('active')) {
|
||
closeMenu();
|
||
} else {
|
||
openMenu();
|
||
}
|
||
});
|
||
|
||
// Close on Escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && overlay.classList.contains('open')) {
|
||
closeMenu();
|
||
btn.focus();
|
||
}
|
||
});
|
||
|
||
// Close on overlay link click
|
||
overlay.querySelectorAll('a').forEach(function(link) {
|
||
link.addEventListener('click', function() {
|
||
closeMenu();
|
||
});
|
||
});
|
||
})();
|
||
</script>
|