89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
const Header: React.FC = () => {
|
|
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 navItems = [
|
|
{ name: 'Home', href: '#/' },
|
|
{ name: 'Services', href: '#/services' },
|
|
{ name: 'About', href: '#/about' },
|
|
{ name: 'Contact', href: '#/contact' },
|
|
];
|
|
|
|
return (
|
|
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'glass-effect shadow-md py-3' : 'bg-transparent py-6'}`}>
|
|
<div className="container mx-auto px-6 flex justify-between items-center">
|
|
<a href="#/" className="flex items-center gap-3 group">
|
|
<div className="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center shrink-0 shadow-lg group-hover:bg-blue-700 transition-colors">
|
|
<span className="text-white font-bold text-xl font-industrial">H</span>
|
|
</div>
|
|
<div className="flex flex-col leading-none">
|
|
<span className={`font-bold text-xl tracking-tight font-industrial ${isScrolled ? 'text-slate-900' : 'text-slate-900 md:text-white'}`}>
|
|
HANMO
|
|
</span>
|
|
<span className={`text-[9px] font-bold uppercase tracking-[0.2em] mt-1 ${isScrolled ? 'text-blue-600' : 'text-blue-500'}`}>
|
|
Control & Network
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className="hidden md:flex gap-8">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`text-sm font-semibold hover:text-blue-600 transition-colors ${isScrolled ? 'text-slate-700' : 'text-slate-100'}`}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="hidden md:block">
|
|
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg transition-all active:scale-95 font-industrial tracking-wide">
|
|
REQUEST QUOTE
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile menu toggle */}
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
className={`md:hidden p-2 rounded-lg transition-colors ${isScrolled ? 'text-slate-900' : 'text-slate-100'}`}
|
|
>
|
|
<i className={`fas ${isMobileMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`}></i>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Drawer */}
|
|
<div className={`md:hidden absolute top-full left-0 right-0 bg-white border-t border-slate-100 shadow-2xl transition-all duration-300 ${isMobileMenuOpen ? 'opacity-100 translate-y-0 visible' : 'opacity-0 -translate-y-4 invisible'}`}>
|
|
<nav className="flex flex-col p-6 space-y-4">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
className="text-lg font-medium text-slate-800 hover:text-blue-600 border-b border-slate-50 pb-2"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<button className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold font-industrial tracking-widest">
|
|
REQUEST QUOTE
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|