fixes
This commit is contained in:
@@ -1,104 +1,98 @@
|
||||
import { useState, useEffect } from "react";
|
||||
"use client";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Navbar,
|
||||
NavBody,
|
||||
NavItems,
|
||||
MobileNav,
|
||||
NavbarLogo,
|
||||
NavbarButton,
|
||||
MobileNavHeader,
|
||||
MobileNavToggle,
|
||||
MobileNavMenu,
|
||||
} from "@/components/ui/resizable-navbar";
|
||||
|
||||
const Header = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ href: "#about", label: "Über uns" },
|
||||
{ href: "#services", label: "Leistungen" },
|
||||
{ href: "#projects", label: "Projekte" },
|
||||
{ href: "#process", label: "Ablauf" },
|
||||
const navItems = [
|
||||
{ name: "Über uns", link: "#about" },
|
||||
{ name: "Leistungen", link: "#services" },
|
||||
{ name: "Projekte", link: "#projects" },
|
||||
{ name: "Ablauf", link: "#process" },
|
||||
];
|
||||
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled
|
||||
? "glass-nav py-4"
|
||||
: "bg-transparent py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a href="#" className="flex items-center gap-2 group">
|
||||
<span className="text-xl font-display font-medium text-foreground tracking-tight">Webklar</span>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-10">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-sm font-medium uppercase tracking-wider"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:block">
|
||||
<div className="relative w-full">
|
||||
<Navbar>
|
||||
{/* Desktop Navigation */}
|
||||
<NavBody>
|
||||
<NavbarLogo href="#">
|
||||
<span className="font-display text-lg font-medium tracking-tight">
|
||||
Webklar
|
||||
</span>
|
||||
</NavbarLogo>
|
||||
<NavItems items={navItems} />
|
||||
<div className="navbar-actions flex items-center gap-4">
|
||||
<Link to="/kontakt">
|
||||
<Button
|
||||
className="btn-minimal rounded-full px-6 py-5 text-sm font-medium"
|
||||
<NavbarButton
|
||||
as="span"
|
||||
variant="primary"
|
||||
className="!text-black"
|
||||
>
|
||||
Kontakt
|
||||
</Button>
|
||||
</NavbarButton>
|
||||
</Link>
|
||||
</div>
|
||||
</NavBody>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden p-2 text-foreground hover:text-muted-foreground transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
{/* Mobile Navigation */}
|
||||
<MobileNav>
|
||||
<MobileNavHeader>
|
||||
<NavbarLogo href="#">
|
||||
<span className="font-display text-lg font-medium tracking-tight">
|
||||
Webklar
|
||||
</span>
|
||||
</NavbarLogo>
|
||||
<MobileNavToggle
|
||||
isOpen={isMobileMenuOpen}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
/>
|
||||
</MobileNavHeader>
|
||||
|
||||
<MobileNavMenu
|
||||
isOpen={isMobileMenuOpen}
|
||||
onClose={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden absolute top-full left-0 right-0 bg-background/98 backdrop-blur-xl border-b border-border p-6 animate-fade-in">
|
||||
<nav className="flex flex-col gap-6">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-foreground hover:text-muted-foreground transition-colors text-lg font-medium uppercase tracking-wider"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
{navItems.map((item, idx) => (
|
||||
<a
|
||||
key={`mobile-link-${idx}`}
|
||||
href={item.link}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="relative text-neutral-600 dark:text-neutral-300"
|
||||
>
|
||||
<span className="block font-medium uppercase tracking-wider">
|
||||
{item.name}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
|
||||
<Button className="btn-minimal rounded-full mt-4 py-5 text-sm font-medium w-full">
|
||||
<NavbarButton
|
||||
as="span"
|
||||
variant="primary"
|
||||
className="block w-full text-center !text-black"
|
||||
>
|
||||
Kontakt
|
||||
</Button>
|
||||
</NavbarButton>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</MobileNavMenu>
|
||||
</MobileNav>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user