103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import {usePathname, useRouter} from 'next/navigation';
|
|
import {Button} from '@/components/ui/button';
|
|
import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet';
|
|
import {Menu} from 'lucide-react';
|
|
import {ThemeToggle} from '@/components/theme-toggle';
|
|
|
|
const navLinks = [
|
|
{id: 'services', label: 'Leistungen'},
|
|
{id: 'about', label: 'Über uns'},
|
|
{id: 'process', label: 'Ablauf'},
|
|
{id: 'whyus', label: 'Warum wir'},
|
|
{id: 'referral', label: 'Empfehlung'},
|
|
{id: 'faq', label: 'FAQ'},
|
|
];
|
|
|
|
const Navbar = () => {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const handleNavClick = (id: string) => {
|
|
if (typeof window === 'undefined') return
|
|
|
|
if (pathname === '/') {
|
|
const el = document.getElementById(id)
|
|
if (el) {
|
|
el.scrollIntoView({behavior: 'smooth', block: 'start'})
|
|
}
|
|
} else {
|
|
localStorage.setItem('scrollToId', id)
|
|
router.push('/')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
|
|
<header
|
|
className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={() => handleNavClick('start')}
|
|
className="text-xl font-bold cursor-pointer"
|
|
>
|
|
<span className="text-pink-600">R</span>hein Software
|
|
</button>
|
|
|
|
{/* Desktop nav */}
|
|
<nav className="hidden lg:flex items-center gap-6">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.id}
|
|
onClick={() => handleNavClick(link.id)}
|
|
className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
{link.label}
|
|
</button>
|
|
))}
|
|
|
|
<Button asChild>
|
|
<Link href="/contact">Kontakt</Link>
|
|
</Button>
|
|
|
|
<ThemeToggle/>
|
|
</nav>
|
|
|
|
{/* Mobile nav */}
|
|
<div className="lg:hidden flex items-center gap-3">
|
|
<ThemeToggle/>
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="h-5 w-5"/>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="top" className="pt-10">
|
|
<div className="flex flex-col space-y-4 text-center">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.id}
|
|
onClick={() => handleNavClick(link.id)}
|
|
className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
{link.label}
|
|
</button>
|
|
))}
|
|
<Button asChild className="mt-4 w-full">
|
|
<Link href="/contact">Kontakt</Link>
|
|
</Button>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|