ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add industrial background and refined styling to mobile menu

Browse Source
This commit is contained in:
ayrisdev
2026-04-12 19:26:40 +03:00
parent ae4677d27e
commit f49496dde6
1 changed files with 62 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/Navbar.tsx
View File

@@ -88,58 +88,76 @@ export function Navbar() {
{/* Mobile Menu Overlay */} {/* Mobile Menu Overlay */}
<div <div
className={cn( className={cn(
"fixed inset-0 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500", "fixed inset-0 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500 overflow-hidden",
mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none" mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
)} )}
> >
<div className="flex justify-between items-center mb-16"> {/* Background Image for Mobile Menu */}
<div className="flex flex-col"> <div className="absolute inset-0 z-0">
<span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span> <Image
<span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span> src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
</div> alt="Mobile menu background"
<button fill
onClick={() => setMobileMenuOpen(false)} sizes="100vw"
className="p-4 bg-white/5 text-white" className="object-cover grayscale brightness-[0.15]"
> />
<X size={32} /> <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-background/95 to-background" />
</button>
</div> </div>
<div className="flex flex-col gap-8"> <div className="relative z-10 flex flex-col h-full">
{NAV_LINKS.map((link, idx) => ( <div className="flex justify-between items-center mb-16">
<Link <div className="flex flex-col">
key={link.name} <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
href={link.href} <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
</div>
<button
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
className={cn( className="p-4 bg-white/5 text-white rounded-full hover:bg-primary transition-colors"
"font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4",
pathname === link.href ? "text-primary" : "text-white/60"
)}
style={{ transitionDelay: `${idx * 50}ms` }}
> >
{link.name} <X size={24} />
</Link> </button>
))} </div>
</div>
<div className="mt-auto flex flex-col gap-4"> <div className="flex flex-col gap-8">
<button {NAV_LINKS.map((link, idx) => (
onClick={() => { <Link
handleWhatsApp(); key={link.name}
setMobileMenuOpen(false); href={link.href}
}} onClick={() => setMobileMenuOpen(false)}
className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all" className={cn(
> "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4 flex items-center gap-4 group",
<MessageCircle className="w-6 h-6" /> pathname === link.href ? "text-primary" : "text-white/60"
HIZLI TEKLİF AL )}
</button> style={{ transitionDelay: `${idx * 50}ms` }}
<a >
href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`} <div className={cn(
className="w-full border border-white/10 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3" "w-2 h-2 bg-primary rounded-full transition-all group-hover:scale-150",
> pathname === link.href ? "opacity-100" : "opacity-0 group-hover:opacity-100"
<Phone className="w-5 h-5" /> )} />
{siteConfig.contact.phone} {link.name}
</a> </Link>
))}
</div>
<div className="mt-auto flex flex-col gap-4">
<button
onClick={() => {
handleWhatsApp();
setMobileMenuOpen(false);
}}
className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all shadow-[0_20px_50px_rgba(234,179,8,0.2)]"
>
<MessageCircle className="w-6 h-6" />
HIZLI TEKLİF AL
</button>
<a
href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
className="w-full border border-white/10 bg-white/5 backdrop-blur-sm text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3 hover:bg-white/10 transition-all"
>
<Phone className="w-5 h-5" />
{siteConfig.contact.phone}
</a>
</div>
</div> </div>
</div> </div>
</nav> </nav>