geothermie-atlas/app/mobile-navigation.tsx

'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>
  );
}