43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import {useEffect, useState} from 'react';
|
|
import Link from 'next/link';
|
|
import Links from '@/app/Links';
|
|
import {usePathname} from 'next/navigation';
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const isRoot = pathname === '/';
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 30);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const isActiveScrolled = scrolled || !isRoot;
|
|
|
|
return (
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 px-6 md:px-12 lg:px-24 py-5 ${
|
|
isActiveScrolled
|
|
? 'bg-white text-gray-900 shadow-md'
|
|
: 'bg-transparent text-white'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center font-sans tracking-wide">
|
|
<Link href={Links.home}>
|
|
<span className="text-2xl md:text-3xl font-extrabold">Kanzlei Mustermann</span>
|
|
</Link>
|
|
<div className="space-x-6 text-base md:text-lg font-semibold">
|
|
<Link href={Links.about}>Über uns</Link>
|
|
<Link href={Links.legalFields}>Rechtsgebiete</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |