Spaces:
Running
Running
File size: 3,357 Bytes
bd59f68 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import { useState, useEffect } from 'react'
import { Menu, X } from 'lucide-react'
const Header = () => {
const [isScrolled, setIsScrolled] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50)
}
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])
const navLinks = [
{ href: '#about', label: 'About' },
{ href: '#projects', label: 'Projects' },
{ href: '#services', label: 'Services' },
{ href: '#contact', label: 'Contact' },
]
return (
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
isScrolled ? 'bg-margins-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
}`}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<a href="#" className="text-2xl font-light tracking-wider uppercase">
Margins
</a>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-8">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="text-sm uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300"
>
{link.label}
</a>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-xs uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300 border-l border-margins-gray pl-8"
>
Built with anycoder
</a>
</nav>
{/* Mobile Menu Button */}
<button
className="md:hidden text-white p-2"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
{/* Mobile Navigation */}
{isMobileMenuOpen && (
<div className="md:hidden absolute top-full left-0 right-0 bg-margins-black border-t border-margins-dark">
<nav className="flex flex-col py-4">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="px-6 py-3 text-sm uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
onClick={() => setIsMobileMenuOpen(false)}
>
{link.label}
</a>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="px-6 py-3 text-xs uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
>
Built with anycoder
</a>
</nav>
</div>
)}
</header>
)
}
export default Header |