Hamburger
This commit is contained in:
Şahan Hasret
@@ -1,51 +1,132 @@
|
||||
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: '/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="w-full bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] border-b border-[#00B4D8]/40 shadow-lg">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Logo - Sol taraf */}
|
||||
<div className="shrink-0">
|
||||
<Link href="/" className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12">
|
||||
<>
|
||||
<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.mamak.bel.tr/images/logo.svg"
|
||||
alt="Mamak Belediyesi Logo"
|
||||
src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
|
||||
alt="Ankara Belediyesi Logo"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[#48CAE4] text-sm font-semibold uppercase tracking-wider">T.C.</span>
|
||||
<span className="text-white text-xl font-bold">Mamak Belediyesi</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Sağ taraf - Arama ve İletişim */}
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Arama butonu */}
|
||||
<button className="p-2.5 rounded-full border-2 border-white text-white hover:bg-[#00B4D8] hover:border-[#00B4D8] transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Bize Ulaşın - Ankara Belediyesi */}
|
||||
<a
|
||||
href="https://www.ankara.bel.tr/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center space-x-2 px-4 py-2.5 rounded-lg bg-[#00B4D8] text-white hover:bg-[#48CAE4] transition-colors shadow-lg"
|
||||
<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"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium">Bize Ulaşın</span>
|
||||
</a>
|
||||
<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>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user