Initial commit
This commit is contained in:
Basiclean committed
commit
bcca176137
88 files changed
+8725
No files matched your search
@@ -0,0 +1,33 @@
|
||||
:global(#cc-main) {
|
||||
/* Deine bestehenden Button-Overrides */
|
||||
--cc-font-family: var(--font-body);
|
||||
--cc-bg: #ffffff;
|
||||
--cc-btn-bg-primary: var(--btn-bg-primary);
|
||||
--cc-btn-bg-primary-hover: var(--btn-bg-primary-hover);
|
||||
--cc-btn-bg-primary-active: var(--btn-bg-primary-active);
|
||||
--cc-btn-text-light: var(--btn-text-light);
|
||||
--cc-btn-text-dark: var(--btn-text-dark);
|
||||
--cc-btn-bg-secondary: var(--btn-bg-ghost-hover);
|
||||
--cc-btn-bg-secondary-hover: var(--btn-bg-primary);
|
||||
--cc-btn-bg-secondary-text: var(--btn-text-dark);
|
||||
--cc-btn-border-radius: var(--btn-radius);
|
||||
--cc-modal-border-radius: 12px;
|
||||
--cc-primary-color: var(--font-body-color);
|
||||
--cc-toggle-on-bg: var(--btn-bg-primary);
|
||||
}
|
||||
|
||||
:global(#cc-main a),
|
||||
:global(#cc-main a:link),
|
||||
:global(#cc-main a:visited),
|
||||
:global(#cc-main a:hover),
|
||||
:global(#cc-main a:focus),
|
||||
:global(#cc-main a:active) {
|
||||
text-decoration: none !important;
|
||||
border-bottom: none !important;
|
||||
box-shadow: none !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
:global(#cc-main .cm) {
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import * as CookieConsent from "vanilla-cookieconsent";
|
||||
import "vanilla-cookieconsent/dist/cookieconsent.css";
|
||||
import "./CookieConsent.module.css";
|
||||
|
||||
export default function CookieConsentBanner() {
|
||||
useEffect(() => {
|
||||
CookieConsent.run({
|
||||
categories: {
|
||||
necessary: {
|
||||
enabled: true,
|
||||
readOnly: true,
|
||||
},
|
||||
analytics: {},
|
||||
marketing: {},
|
||||
},
|
||||
language: {
|
||||
default: "de",
|
||||
translations: {
|
||||
de: {
|
||||
consentModal: {
|
||||
title: "Ihre Privatsphäre ist uns wichtig",
|
||||
description:
|
||||
"Wir verwenden Cookies, um Ihnen die bestmögliche Nutzung unserer Website zu ermöglichen. " +
|
||||
"Einige Cookies sind technisch notwendig, andere helfen uns, die Website zu verbessern " +
|
||||
"und Ihnen relevante Inhalte anzuzeigen. Sie können Ihre Auswahl jederzeit unter " +
|
||||
"<a href='/datenschutz'>Datenschutz</a> anpassen oder widerrufen.",
|
||||
acceptAllBtn: "Alle akzeptieren",
|
||||
acceptNecessaryBtn: "Nur notwendige",
|
||||
showPreferencesBtn: "Einstellungen anpassen",
|
||||
footer:
|
||||
"<a href='/impressum'>Impressum</a>" +
|
||||
"<a href='/datenschutz'>Datenschutzerklärung</a>",
|
||||
},
|
||||
preferencesModal: {
|
||||
title: "Cookie-Einstellungen",
|
||||
acceptAllBtn: "Alle akzeptieren",
|
||||
acceptNecessaryBtn: "Nur notwendige",
|
||||
savePreferencesBtn: "Auswahl speichern",
|
||||
closeIconLabel: "Schließen",
|
||||
sections: [
|
||||
{
|
||||
title: "Ihre Privatsphäre",
|
||||
description:
|
||||
"Wir setzen Cookies ein, um die Funktionalität unserer Website sicherzustellen " +
|
||||
"und unser Angebot kontinuierlich zu verbessern. Sie entscheiden selbst, " +
|
||||
"welche Kategorien Sie zulassen möchten.",
|
||||
},
|
||||
{
|
||||
title: "Technisch notwendig",
|
||||
description:
|
||||
"Diese Cookies sind für den reibungslosen Betrieb der Website unbedingt erforderlich " +
|
||||
"und können nicht deaktiviert werden. Sie speichern keine personenbezogenen Daten " +
|
||||
"und werden ausschließlich als Reaktion auf von Ihnen durchgeführte Aktionen gesetzt " +
|
||||
"(z. B. Spracheinstellungen oder Sicherheits-Token).",
|
||||
linkedCategory: "necessary",
|
||||
},
|
||||
{
|
||||
title: "Analyse & Statistik",
|
||||
description:
|
||||
"Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren. " +
|
||||
"Alle Daten werden anonymisiert gesammelt und dienen ausschließlich zur Verbesserung " +
|
||||
"unseres Angebots. Wir nutzen Google Analytics (GA4) – Ihre IP-Adresse wird dabei " +
|
||||
"anonymisiert und nicht gespeichert.",
|
||||
linkedCategory: "analytics",
|
||||
},
|
||||
{
|
||||
title: "Marketing & externe Medien",
|
||||
description:
|
||||
"Diese Cookies ermöglichen die Einbindung externer Inhalte wie YouTube-Videos, " +
|
||||
"Google Maps, Instagram-, Facebook- und X (Twitter)-Inhalte. " +
|
||||
"Ohne Ihre Zustimmung werden diese Inhalte nicht geladen und keine Daten übertragen. " +
|
||||
"Bitte beachten Sie, dass bei Aktivierung personenbezogene Daten " +
|
||||
"an Drittanbieter (ggf. auch in die USA) übertragen werden können.",
|
||||
linkedCategory: "marketing",
|
||||
},
|
||||
{
|
||||
title: "Weitere Informationen",
|
||||
description:
|
||||
"Bei Fragen zu unserer Cookie-Richtlinie wenden Sie sich bitte an uns über das " +
|
||||
"<a href='/kontakt'>Kontaktformular</a>. Mehr Details finden Sie in unserer " +
|
||||
"<a href='/datenschutz'>Datenschutzerklärung</a>.",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
/*
|
||||
FOOTER
|
||||
Datei: components/Footer.module.css
|
||||
*/
|
||||
|
||||
:root {
|
||||
--footer-bg: #171717;
|
||||
--footer-text: #a1a1aa;
|
||||
--footer-text-hover: #ffffff;
|
||||
--footer-title: #ffffff;
|
||||
--footer-divider: rgba(255, 255, 255, 0.1);
|
||||
--footer-padding-y: clamp(3rem, 6vw, 5rem);
|
||||
--footer-gap: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
/* Wrapper */
|
||||
.footer {
|
||||
background-color: var(--footer-bg);
|
||||
color: var(--footer-text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
max-width: 1280px;
|
||||
margin-inline: auto;
|
||||
padding: var(--footer-padding-y) clamp(1rem, 5vw, 2rem);
|
||||
}
|
||||
|
||||
/* Top */
|
||||
.footer__top {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--footer-gap);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer__top {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.footer__top {
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Brand */
|
||||
.footer__logo {
|
||||
display: inline-block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--footer-title);
|
||||
margin-bottom: 0.75rem;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.footer__logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.footer__tagline {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
max-width: 32ch;
|
||||
color: var(--footer-text);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.footer__nav {
|
||||
display: flex;
|
||||
gap: var(--footer-gap);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer__nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer__nav-group ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.footer__nav-title {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--footer-title);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer__nav-group a {
|
||||
font-size: 0.9rem;
|
||||
color: var(--footer-text);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer__nav-group a:hover {
|
||||
color: var(--footer-text-hover);
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.footer__divider {
|
||||
height: 1px;
|
||||
background: var(--footer-divider);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
.footer__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer__copy {
|
||||
font-size: 0.85rem;
|
||||
color: var(--footer-text);
|
||||
}
|
||||
|
||||
/* Social */
|
||||
.footer__social {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer__social a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--footer-divider);
|
||||
color: var(--footer-text);
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
background 0.2s ease;
|
||||
}
|
||||
|
||||
.footer__social a:hover {
|
||||
color: var(--footer-text-hover);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import styles from "./Footer.module.css";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
InstagramLogoIcon,
|
||||
LinkedinLogoIcon,
|
||||
XLogoIcon,
|
||||
FacebookLogoIcon,
|
||||
} from "@phosphor-icons/react/dist/ssr";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.footer__inner}>
|
||||
{/* Top: Brand + Navigation */}
|
||||
<div className={styles.footer__top}>
|
||||
{/* Brand */}
|
||||
<div className={styles.footer__brand}>
|
||||
<Link href="/" className={styles.footer__logo}>
|
||||
ENVU {/* ← Logo oder Bildkomponente hier */}
|
||||
</Link>
|
||||
<p className={styles.footer__tagline}>
|
||||
Maßgeschneiderte digitale Lösungen für Ihr Unternehmen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation Spalten */}
|
||||
<nav className={styles.footer__nav} aria-label="Footer Navigation">
|
||||
<div className={styles.footer__nav_group}>
|
||||
<span className={styles.footer__nav_title}>Unternehmen</span>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/ueberuns">Über uns</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/leistungen">Leistungen</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/kontakt">Kontakt</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer__nav_group}>
|
||||
<span className={styles.footer__nav_title}>Rechtliches</span>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/impressum">Impressum</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/datenschutz">Datenschutz</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className={styles.footer__divider} />
|
||||
|
||||
{/* Bottom: Copyright + Social */}
|
||||
<div className={styles.footer__bottom}>
|
||||
<p className={styles.footer__copy}>
|
||||
© {currentYear} ENVU. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
|
||||
<div className={styles.footer__social}>
|
||||
<a
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<InstagramLogoIcon size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://linkedin.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<LinkedinLogoIcon size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://x.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="X (Twitter)"
|
||||
>
|
||||
<XLogoIcon size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://facebook.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<FacebookLogoIcon size={20} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--header-bg: var(--color-surface);
|
||||
}
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: var(--header-bg);
|
||||
box-shadow: 0 4px 6px -6px rgb(0 0 0 / 30%);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import styles from "./Header.module.css";
|
||||
import Navbar from "./Navbar/Navbar";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className={styles["header"]}>
|
||||
<Navbar />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
:root {
|
||||
--nav-max-width: var(--container-width);
|
||||
--nav-bg: var(--color-surface);
|
||||
--nav-padding-tb: 0;
|
||||
--nav-padding-lr: var(--space-4);
|
||||
--nav-font-size: 1rem;
|
||||
--nav-font-weight: 600;
|
||||
--nav-font-color: #5f5f5f;
|
||||
--nav-hamburger-icon: var(--nav-font-color);
|
||||
}
|
||||
.noTransition {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: var(--nav-padding-tb) 0 var(--nav-padding-tb) var(--nav-padding-lr);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: var(--nav-max-width);
|
||||
margin: 0 auto;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--nav-font-size) !important;
|
||||
font-weight: var(--nav-font-weight);
|
||||
background-color: var(--nav-bg);
|
||||
color: var(--nav-font-color);
|
||||
}
|
||||
.nav-logo {
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-logo-image {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links button:focus-visible {
|
||||
outline: 2px solid #000000;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
background-color: inherit;
|
||||
position: fixed;
|
||||
inset: var(--nav-h) 0 0 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: max-height 400ms ease;
|
||||
/* Scrollbar ausblenden (Firefox/IE/Edge legacy) */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* Chrome/Safari/Opera */
|
||||
.nav-links::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links.open {
|
||||
max-height: 100vh;
|
||||
pointer-events: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.nav-links > li:first-child {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.nav-links > li:last-child {
|
||||
padding: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.nav-links li a:focus-visible {
|
||||
outline: 2px solid #393636;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.nav-hamburger:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nav-hamburger:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px #000000;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.nav-hamburger span {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--nav-hamburger-icon);
|
||||
border-radius: 2px;
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-hamburger span:nth-child(1) {
|
||||
top: 50%;
|
||||
transform: translateY(calc(-50% - 5px));
|
||||
}
|
||||
|
||||
.nav-hamburger span:nth-child(2) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.nav-hamburger span:nth-child(3) {
|
||||
top: 50%;
|
||||
transform: translateY(calc(-50% + 5px));
|
||||
}
|
||||
|
||||
.nav-hamburger.open span:nth-child(1) {
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.nav-hamburger.open span:nth-child(2) {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(8px);
|
||||
}
|
||||
|
||||
.nav-hamburger.open span:nth-child(3) {
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--nav-padding-lr: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--nav-font-size: 16px;
|
||||
--nav-font-weight: 500;
|
||||
--nav-padding-lr: var(--space-6);
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: var(--nav-padding-tb) var(--nav-padding-lr) var(--nav-padding-tb)
|
||||
var(--nav-padding-lr);
|
||||
}
|
||||
|
||||
.nav-logo-image {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: static;
|
||||
inset: auto;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
transition: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.nav-links > li a {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.nav-links > li:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links > li:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links.animating {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { endLinks, singleLinks, subMenus } from "@/data/navigation";
|
||||
import { useHeightVar } from "@/hooks/useHeightVar";
|
||||
import { useNavToggleMenu } from "@/hooks/useNavToggleMenu";
|
||||
import { useSupportsHover } from "@/hooks/useSupportsHover";
|
||||
import { useToggleBodyOverflow } from "@/hooks/useToggleBodyOverflow";
|
||||
import styles from "./Navbar.module.css";
|
||||
import { NavbarSubMenu } from "./NavbarSubMenu";
|
||||
|
||||
type BasicLink = {
|
||||
label: string;
|
||||
to: string;
|
||||
};
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname();
|
||||
const navRef = useRef<HTMLElement | null>(null);
|
||||
const supportsHover = useSupportsHover();
|
||||
|
||||
const [instantSwitch, setInstantSwitch] = useState(false);
|
||||
const raf1Ref = useRef<number | null>(null);
|
||||
const raf2Ref = useRef<number | null>(null);
|
||||
|
||||
const {
|
||||
menuOpen,
|
||||
openSubmenuId,
|
||||
noTransition,
|
||||
closeInstantNoAnim,
|
||||
setOpenSubmenuId,
|
||||
toggleMenu,
|
||||
} = useNavToggleMenu({ supportsHover, desktopBp: 1024 });
|
||||
|
||||
useToggleBodyOverflow(menuOpen);
|
||||
useHeightVar(navRef, "--nav-h", "offset");
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (raf1Ref.current !== null) cancelAnimationFrame(raf1Ref.current);
|
||||
if (raf2Ref.current !== null) cancelAnimationFrame(raf2Ref.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const clearInstantSwitchSoon = () => {
|
||||
if (raf1Ref.current !== null) cancelAnimationFrame(raf1Ref.current);
|
||||
if (raf2Ref.current !== null) cancelAnimationFrame(raf2Ref.current);
|
||||
|
||||
raf1Ref.current = requestAnimationFrame(() => {
|
||||
raf2Ref.current = requestAnimationFrame(() => {
|
||||
setInstantSwitch(false);
|
||||
raf1Ref.current = null;
|
||||
raf2Ref.current = null;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const setOpenSubmenuIdWithInstantSwitch = (id: string | null) => {
|
||||
if (id !== null && openSubmenuId !== null && openSubmenuId !== id) {
|
||||
setInstantSwitch(true);
|
||||
setOpenSubmenuId(id);
|
||||
clearInstantSwitchSoon();
|
||||
return;
|
||||
}
|
||||
|
||||
setInstantSwitch(false);
|
||||
setOpenSubmenuId(id);
|
||||
};
|
||||
|
||||
const isActivePath = (to: string) => {
|
||||
if (to === "/") return pathname === "/";
|
||||
return pathname === to || pathname.startsWith(`${to}/`);
|
||||
};
|
||||
|
||||
const handleNavLinkClick = () => {
|
||||
setInstantSwitch(false);
|
||||
closeInstantNoAnim();
|
||||
};
|
||||
|
||||
const renderNavLink = (link: BasicLink) => (
|
||||
<li key={link.to + link.label}>
|
||||
<Link
|
||||
href={link.to}
|
||||
onClick={handleNavLinkClick}
|
||||
aria-current={isActivePath(link.to) ? "page" : undefined}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
|
||||
return (
|
||||
<nav className={styles["nav"]} ref={navRef} aria-label="Hauptnavigation">
|
||||
<div className={styles["nav-logo"]}>
|
||||
<Link href="/" aria-label="Startseite">
|
||||
<Image
|
||||
src="/logo/logo.svg"
|
||||
alt="Logo"
|
||||
width={160}
|
||||
height={48}
|
||||
priority
|
||||
className={styles["nav-logo-image"]}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
id="main-navigation"
|
||||
className={[
|
||||
styles["nav-links"],
|
||||
menuOpen ? styles.open : "",
|
||||
noTransition ? styles.noTransition : "",
|
||||
].join(" ")}
|
||||
>
|
||||
{singleLinks.map(renderNavLink)}
|
||||
|
||||
{subMenus.map((menu) => (
|
||||
<NavbarSubMenu
|
||||
key={menu.id}
|
||||
id={menu.id}
|
||||
label={menu.label}
|
||||
items={menu.items}
|
||||
open={openSubmenuId === menu.id}
|
||||
noTransition={noTransition}
|
||||
instantSwitch={instantSwitch}
|
||||
setOpenSubmenuId={setOpenSubmenuIdWithInstantSwitch}
|
||||
closeInstantNoAnim={handleNavLinkClick}
|
||||
/>
|
||||
))}
|
||||
|
||||
{endLinks.map(renderNavLink)}
|
||||
</ul>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles["nav-hamburger"]} ${menuOpen ? styles.open : ""}`}
|
||||
onClick={toggleMenu}
|
||||
aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
aria-expanded={menuOpen}
|
||||
aria-controls="main-navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
:root {
|
||||
--nav-submenu-max-width: var(--container-width);
|
||||
--nav-submenu-bg: var(--color-surface);
|
||||
}
|
||||
.nav-submenu {
|
||||
display: grid;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: max-height 250ms ease;
|
||||
background-color: var(--nav-bg);
|
||||
}
|
||||
|
||||
.nav-submenu.open {
|
||||
max-height: var(--submenu-h);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-submenu-inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-submenu-list {
|
||||
width: var(--nav-submenu-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-sub-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-item-with-sub {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-submenu > li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-submenu > li a {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.nav-submenu {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: var(--nav-h);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px 6px -6px rgb(0 0 0 / 30%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
max-height 300ms,
|
||||
opacity 300ms;
|
||||
}
|
||||
|
||||
.nav-submenu.open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-submenu > li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-submenu > li a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-submenu-list {
|
||||
width: min(100%, var(--nav-submenu-max-width));
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
grid-auto-columns: minmax(180px, max-content);
|
||||
column-gap: 48px;
|
||||
row-gap: 4px;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
padding: 24px 24px 48px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-sub-toggle {
|
||||
position: relative;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import type { FC, MouseEvent } from "react";
|
||||
import { useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useHeightVar } from "@/hooks/useHeightVar";
|
||||
import { useIsDesktop } from "@/hooks/useIsDesktop";
|
||||
|
||||
import styles from "./NavbarSubMenu.module.css";
|
||||
|
||||
type SubMenuItem = {
|
||||
label: string;
|
||||
to: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
open: boolean;
|
||||
noTransition: boolean;
|
||||
instantSwitch: boolean;
|
||||
setOpenSubmenuId: (id: string | null) => void;
|
||||
closeInstantNoAnim?: () => void;
|
||||
label: string;
|
||||
items: SubMenuItem[];
|
||||
};
|
||||
|
||||
export const NavbarSubMenu: FC<Props> = ({
|
||||
id,
|
||||
open,
|
||||
noTransition,
|
||||
instantSwitch,
|
||||
setOpenSubmenuId,
|
||||
closeInstantNoAnim,
|
||||
label,
|
||||
items,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const subMenuRef = useRef<HTMLUListElement | null>(null);
|
||||
const isDesktop = useIsDesktop();
|
||||
|
||||
const openMenu = () => setOpenSubmenuId(id);
|
||||
const closeMenu = () => setOpenSubmenuId(null);
|
||||
const toggleMenu = () => setOpenSubmenuId(open ? null : id);
|
||||
|
||||
useHeightVar(subMenuRef, "--submenu-h", "scroll", open);
|
||||
|
||||
const handleSubmenuClick = (e: MouseEvent<HTMLUListElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest("a")) {
|
||||
closeInstantNoAnim?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<li
|
||||
className={styles["nav-item-with-sub"]}
|
||||
onMouseEnter={isDesktop ? openMenu : undefined}
|
||||
onMouseLeave={isDesktop ? closeMenu : undefined}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles["nav-sub-toggle"]}
|
||||
onClick={toggleMenu}
|
||||
aria-expanded={open}
|
||||
aria-controls={`submenu-${id}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
|
||||
<ul
|
||||
ref={subMenuRef}
|
||||
id={`submenu-${id}`}
|
||||
className={[
|
||||
styles["nav-submenu"],
|
||||
open ? styles.open : "",
|
||||
noTransition || instantSwitch ? styles.noTransition : "",
|
||||
].join(" ")}
|
||||
onClick={handleSubmenuClick}
|
||||
>
|
||||
<li className={styles["nav-submenu-inner"]}>
|
||||
<ul className={styles["nav-submenu-list"]}>
|
||||
{items.map((item) => {
|
||||
const isActive =
|
||||
item.to === "/"
|
||||
? pathname === "/"
|
||||
: pathname === item.to || pathname.startsWith(`${item.to}/`);
|
||||
|
||||
return (
|
||||
<li key={item.to}>
|
||||
<Link
|
||||
href={item.to}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
onClick={closeInstantNoAnim}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user