58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
const linkCSS = 'hover:underline hover:decoration-red-700 hover:underline-offset-4 text-xs xl:text-base';
|
||
|
|
|
||
|
|
const Tooltip = ({ pathname }: { pathname: string }) => {
|
||
|
|
const css = pathname.startsWith('/ews')
|
||
|
|
? 'group relative inline-block hover:cursor-pointer duration-300 underline decoration-red-700 underline-offset-4 text-xs xl:text-base'
|
||
|
|
: 'group relative inline-block hover:cursor-pointer duration-300 text-xs xl:text-base';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className={css}>
|
||
|
|
Erdwärmesonden
|
||
|
|
<div className="absolute hidden group-hover:flex -top-3 text-sm w-fit py-px bg-white z-50">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<Link href="/ews/grundlagenkarte" className={linkCSS}>
|
||
|
|
Grundlagenkarte
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="/ews/potenzialberechnung" className={linkCSS}>
|
||
|
|
Potenzialberechnung
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Navigation() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const decoration = 'underline decoration-red-700 underline-offset-4 text-xs xl:text-base';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="hidden md:block lg:pl-32 md:flex md:justify-start gap-x-8 xl:gap-x-10 text-xs xl:text-base">
|
||
|
|
<Link href="/" className={pathname === '/' ? decoration : linkCSS}>
|
||
|
|
Home
|
||
|
|
</Link>
|
||
|
|
<Tooltip pathname={pathname}></Tooltip>
|
||
|
|
<Link href="/gwwp" className={pathname === '/gwwp' ? decoration : linkCSS}>
|
||
|
|
Grundwasserwärmepumpen
|
||
|
|
</Link>
|
||
|
|
<Link href="/daten" className={pathname === '/daten' ? decoration : linkCSS}>
|
||
|
|
Daten
|
||
|
|
</Link>
|
||
|
|
<Link href="/about" className={pathname === '/about' ? decoration : linkCSS}>
|
||
|
|
About
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|