189 lines
12 KiB
TypeScript
189 lines
12 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { dataStore, type SiteSettings } from '@/lib/dataStore';
|
||
|
||
export default function Header() {
|
||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
const [settings, setSettings] = useState<SiteSettings | null>(null);
|
||
|
||
useEffect(() => {
|
||
dataStore.getSiteSettings().then(setSettings);
|
||
}, []);
|
||
|
||
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">
|
||
<Image
|
||
src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
|
||
alt="Ankara Belediyesi Logo"
|
||
width={128}
|
||
height={128}
|
||
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>
|
||
{settings && (
|
||
<div className="flex space-x-2">
|
||
{settings.social.twitter && (
|
||
<a
|
||
href={settings.social.twitter}
|
||
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="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" />
|
||
</svg>
|
||
</a>
|
||
)}
|
||
{settings.social.facebook && (
|
||
<a
|
||
href={settings.social.facebook}
|
||
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="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||
</svg>
|
||
</a>
|
||
)}
|
||
{settings.social.instagram && (
|
||
<a
|
||
href={settings.social.instagram}
|
||
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="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
||
</svg>
|
||
</a>
|
||
)}
|
||
{settings.social.youtube && (
|
||
<a
|
||
href={settings.social.youtube}
|
||
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="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
||
</svg>
|
||
</a>
|
||
)}
|
||
{settings.social.linkedin && (
|
||
<a
|
||
href={settings.social.linkedin}
|
||
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="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" />
|
||
</svg>
|
||
</a>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|