61 lines
2.5 KiB
Text
61 lines
2.5 KiB
Text
|
---
|
||
|
|
// src/components/layout/header/MobileMenu.astro
|
||
|
|
import Button from '@components/base/Button.astro';
|
||
|
|
interface Props {
|
||
|
|
links: { text: string; href: string }[];
|
||
|
|
}
|
||
|
|
const { links } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<!-- 1. ОВЕРЛЕЙ -->
|
||
|
|
<div
|
||
|
|
id="menu-overlay"
|
||
|
|
class="fixed inset-0 bg-black/80 z-[140] opacity-0 pointer-events-none transition-opacity duration-500 lg:hidden"
|
||
|
|
></div>
|
||
|
|
|
||
|
|
<!-- 2. DRAWER (Боковая панель) -->
|
||
|
|
<div
|
||
|
|
id="mobile-menu"
|
||
|
|
class="fixed top-0 left-0 bottom-0 w-[85%] max-w-[400px] bg-[#181611] z-[150] -translate-x-full transition-transform duration-500 ease-in-out lg:hidden flex flex-col shadow-[20px_0_60px_rgba(0,0,0,0.5)] border-r border-white/5"
|
||
|
|
>
|
||
|
|
<!-- ШАПКА ВНУТРИ МЕНЮ (Теперь здесь лого вместо текста "Навигация") -->
|
||
|
|
<div class="p-6 h-20 flex items-center border-b border-white/5 bg-[#181611]">
|
||
|
|
<div class="flex items-center gap-4 text-white">
|
||
|
|
<div class="size-10 bg-primary/20 rounded flex items-center justify-center">
|
||
|
|
<span class="material-symbols-outlined text-primary text-2xl">local_shipping</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<h2 class="text-white text-xl font-bold font-display leading-none tracking-tight uppercase">KHIMTRANS</h2>
|
||
|
|
<span class="text-[10px] text-text-secondary font-display tracking-widest uppercase font-semibold">Service</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- СПИСОК ССЫЛОК -->
|
||
|
|
<div class="flex-grow overflow-y-auto p-8 bg-[#181611]">
|
||
|
|
<nav class="flex flex-col gap-8">
|
||
|
|
{links.map((link, index) => (
|
||
|
|
<a
|
||
|
|
href={link.href}
|
||
|
|
class="text-3xl font-display font-black uppercase tracking-tighter text-white hover:text-primary transition-colors flex items-baseline gap-4 group mobile-link"
|
||
|
|
>
|
||
|
|
<span class="text-xs font-mono text-gray-700">0{index + 1}</span>
|
||
|
|
{link.text}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ФУТЕР МЕНЮ -->
|
||
|
|
<div class="p-8 bg-[#13110d] border-t border-white/5">
|
||
|
|
<div class="flex flex-col gap-6">
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-[10px] text-gray-500 uppercase tracking-[0.2em]">Круглосуточно:</span>
|
||
|
|
<a href="tel:88005553535" class="text-xl font-bold text-white hover:text-primary transition-colors">
|
||
|
|
8 (800) 555-35-35
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<Button href="/contacts" variant="primary" className="w-full justify-center">Оставить заявку</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|