111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Menu, X } from 'lucide-react';
|
|
|
|
const Navigation = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const navItems = [
|
|
{ name: 'Home', path: '/' },
|
|
{ name: 'Services', path: '/services' },
|
|
{ name: 'About', path: '/about' },
|
|
{ name: 'Blog', path: '/blog' },
|
|
{ name: 'Contact', path: '/contact' },
|
|
];
|
|
|
|
const isActive = (path: string) => location.pathname === path;
|
|
|
|
return (
|
|
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled ? 'bg-background/90 backdrop-blur-md border-b border-border' : 'bg-transparent'
|
|
}`}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<Link to="/" className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-neon rounded-lg flex items-center justify-center">
|
|
<span className="text-neon-foreground font-bold text-sm">BA</span>
|
|
</div>
|
|
<span className="font-heading font-bold text-lg text-foreground">
|
|
Bay Area Affiliates
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
to={item.path}
|
|
className={`font-medium transition-colors duration-200 ${
|
|
isActive(item.path)
|
|
? 'text-neon'
|
|
: 'text-foreground-muted hover:text-neon'
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
to="/contact"
|
|
className="btn-neon ml-4"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="md:hidden text-foreground hover:text-neon transition-colors"
|
|
aria-label="Toggle navigation menu"
|
|
>
|
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isOpen && (
|
|
<div className="md:hidden bg-background/95 backdrop-blur-md border-t border-border">
|
|
<div className="px-2 pt-2 pb-3 space-y-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
to={item.path}
|
|
onClick={() => setIsOpen(false)}
|
|
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
|
|
isActive(item.path)
|
|
? 'text-neon bg-neon/10'
|
|
: 'text-foreground-muted hover:text-neon hover:bg-neon/5'
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
to="/contact"
|
|
onClick={() => setIsOpen(false)}
|
|
className="block w-full text-center btn-neon mt-4"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation; |