90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
|
|
const linkCSS = 'hover:underline hover:decoration-red-700 hover:underline-offset-4';
|
|
|
|
export default function Navigation() {
|
|
const pathname = usePathname();
|
|
const menuDiv = useRef<HTMLDivElement | null>(null);
|
|
const decoration = 'underline decoration-red-700 underline-offset-4';
|
|
|
|
const handleClick = () => {
|
|
if (menuDiv.current) {
|
|
menuDiv.current.classList.toggle('hidden');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="md:hidden">
|
|
<button
|
|
className="absolute top-5 right-5 inline-flex hover:text-red-700 lg:hidden ml-auto outline-none"
|
|
onClick={handleClick}
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<div className="hidden absolute top-0 right-0 bottom-0 bg-white w-5/6 h-full z-50" ref={menuDiv}>
|
|
<button
|
|
className="absolute top-5 right-5 inline-flex hover:text-red-700 lg:hidden ml-auto outline-none"
|
|
onClick={handleClick}
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M3 21.32L21 3.32001" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M3 3.32001L21 21.32" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</button>
|
|
<div className="absolute top-20 pl-8 ">
|
|
<ul className="flex flex-col justify-between gap-y-4 text-sm">
|
|
<li>
|
|
<Link href="/" className={pathname === '/' ? decoration : linkCSS}>
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/ews/grundlagenkarte" className={linkCSS}>
|
|
Grundlagenkarte Erdwärme
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/ews/potenzialberechnung" className={linkCSS}>
|
|
Potenzialberechnung Erdwärme
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/gwwp" className={pathname === '/gwwp' ? decoration : linkCSS}>
|
|
Grundwasserwärmepumpen
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/daten" className={pathname === '/daten' ? decoration : linkCSS}>
|
|
Daten
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/about" className={pathname === '/about' ? decoration : linkCSS}>
|
|
About
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|