135 lines
8.0 KiB
TypeScript
135 lines
8.0 KiB
TypeScript
import { useState } from 'react';
|
||
import Link from 'next/link';
|
||
|
||
export default function Header() {
|
||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
||
const menuItems = [
|
||
{ href: '/', icon: '🏠', title: 'Ana Sayfa', desc: 'Projeye genel bakış' },
|
||
{ href: '/canli-yayin', icon: '📹', title: 'Canlı Yayın', desc: 'İnşaatı canlı izleyin' },
|
||
{ href: '/haberler', icon: '📰', title: 'Haberler', desc: 'Güncel haberler' },
|
||
{ href: '/medya', icon: '📸', title: 'Medya Galerisi', desc: 'Videolar ve fotoğraflar' },
|
||
{ href: '/sss', icon: '❓', title: 'Sıkça Sorulan Sorular', desc: 'SSS ve cevaplar' },
|
||
{ href: '/belgeler', icon: '📄', title: 'Belgeler', desc: 'Teknik dokümanlar' },
|
||
{ href: '/iletisim', icon: '📧', title: 'İletişim', desc: 'Bize ulaşın' },
|
||
{ href: 'https://www.ankara.bel.tr/', icon: '🏛️', title: 'Ankara Belediyesi', desc: 'Resmi web sitesi', external: true },
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<header className="fixed top-0 left-0 right-0 z-50 bg-[#003366]/70 backdrop-blur-xl shadow-lg border-b border-[#00B4D8]/40">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex justify-between items-center h-20">
|
||
<Link href="/" className="flex items-center">
|
||
<div className="w-32 h-32">
|
||
<img
|
||
src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
|
||
alt="Ankara Belediyesi Logo"
|
||
className="w-full h-full object-contain"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
|
||
<button
|
||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||
className="relative flex flex-col items-center justify-center w-14 h-14 rounded-xl bg-linear-to-br from-[#004B87] to-[#00B4D8] hover:shadow-xl transition-all duration-300 transform hover:scale-110 overflow-hidden group"
|
||
>
|
||
<div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
<span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
|
||
<span className={`block w-7 h-0.5 bg-white my-1.5 transition-all duration-300 relative z-10 ${isMenuOpen ? 'opacity-0 scale-0' : ''}`}></span>
|
||
<span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Full Screen Overlay Menu */}
|
||
<div className={`fixed inset-0 z-60 transition-all duration-500 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
|
||
<div
|
||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||
onClick={() => setIsMenuOpen(false)}
|
||
></div>
|
||
|
||
<div className={`absolute top-0 right-0 h-full w-full md:w-[550px] bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] shadow-2xl transform transition-transform duration-500 ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
|
||
|
||
<div className="relative flex flex-col h-full">
|
||
<div className="flex justify-between items-center p-8 border-b border-white/20">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-white mb-1">Menü</h2>
|
||
<p className="text-white/70 text-sm">A2 Metro Hattı Projesi</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setIsMenuOpen(false)}
|
||
className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all duration-300 hover:rotate-90"
|
||
>
|
||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<nav className="flex-1 overflow-y-auto p-8 space-y-3">
|
||
{menuItems.map((item, index) => (
|
||
<a
|
||
key={index}
|
||
href={item.href}
|
||
target={item.external ? '_blank' : undefined}
|
||
rel={item.external ? 'noopener noreferrer' : undefined}
|
||
onClick={() => !item.external && setIsMenuOpen(false)}
|
||
className="group block p-5 rounded-2xl bg-white/5 hover:bg-white/15 backdrop-blur-sm border border-white/10 hover:border-white/30 transition-all duration-300 transform hover:scale-105 hover:shadow-xl"
|
||
style={{ animationDelay: `${index * 50}ms` }}
|
||
>
|
||
<div className="flex items-center space-x-4">
|
||
<div className="shrink-0 w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300">
|
||
{item.icon}
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-lg font-bold text-white group-hover:text-[#00B4D8] transition-colors">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-sm text-white/70 group-hover:text-white/90 transition-colors">
|
||
{item.desc}
|
||
</p>
|
||
</div>
|
||
<svg className="w-6 h-6 text-white/50 group-hover:text-white group-hover:translate-x-2 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="p-8 border-t border-white/20">
|
||
<div className="flex items-center space-x-4">
|
||
<div className="flex-1">
|
||
<p className="text-white/70 text-xs mb-2">Sosyal Medya</p>
|
||
<div className="flex space-x-2">
|
||
{[
|
||
{ icon: 'M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z', url: 'https://twitter.com/Ankara_BB' },
|
||
{ icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z', url: 'https://www.facebook.com/ankarabb' },
|
||
{ icon: 'M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z M4 2a2 2 0 100 4 2 2 0 000-4z', url: 'https://www.linkedin.com/company/ankara-bb' },
|
||
].map((social, i) => (
|
||
<a
|
||
key={i}
|
||
href={social.url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
|
||
>
|
||
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d={social.icon} />
|
||
</svg>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|