generated from Nicholai/astro-template
113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Logo } from './Logo';
|
|
import { Menu, X, Search, Globe } from 'lucide-react';
|
|
import { Button } from './Button';
|
|
|
|
export 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 navLinks = [
|
|
{ label: 'ANASAYFA', href: '#' },
|
|
{ label: 'CADI YAYINLARI', href: '#' },
|
|
{ label: 'ÇEVİRİ', href: '#' },
|
|
{ label: 'FEMİNİST GÜNDEM', href: '#' },
|
|
{ label: 'TARİHÇEMİZ', href: '#' },
|
|
];
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled
|
|
? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100 py-3'
|
|
: 'bg-white border-b border-gray-100 py-5'
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
|
|
{/* Logo Section */}
|
|
<div className="flex items-center space-x-3 cursor-pointer">
|
|
<Logo className="h-10 w-10 text-brand-purple" />
|
|
<div className="hidden md:block">
|
|
<h1 className="text-xl font-bold tracking-tighter leading-none text-brand-purple">KAMPÜS</h1>
|
|
<h1 className="text-xl font-bold tracking-tighter leading-none text-brand-text">CADILARI</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex items-center space-x-8">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
className="text-sm font-semibold text-brand-text hover:text-brand-purple transition-colors tracking-wide"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Utility Icons */}
|
|
<div className="hidden lg:flex items-center space-x-4">
|
|
<button className="p-2 hover:bg-gray-100 rounded-full transition-colors text-brand-text">
|
|
<Search size={20} />
|
|
</button>
|
|
<div className="h-4 w-px bg-gray-300"></div>
|
|
<button className="flex items-center space-x-1 text-sm font-medium text-brand-text hover:text-brand-purple">
|
|
<Globe size={16} />
|
|
<span>TR</span>
|
|
</button>
|
|
<Button variant="secondary" className="!py-2 !px-6 !text-xs">
|
|
BİZE KATIL
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="lg:hidden p-2 text-brand-text"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
{isMobileMenuOpen && (
|
|
<div className="absolute top-full left-0 right-0 bg-white border-b border-gray-100 shadow-xl lg:hidden p-6 animate-fade-in">
|
|
<nav className="flex flex-col space-y-4">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
className="text-lg font-bold text-brand-text hover:text-brand-purple"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<div className="h-px bg-gray-100 my-4"></div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<button className="flex items-center space-x-2 text-sm font-medium">
|
|
<Globe size={16} />
|
|
<span>Türkçe</span>
|
|
</button>
|
|
</div>
|
|
<Button variant="primary" className="!py-2 !px-6">BİZE KATIL</Button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}; |