You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.6 KiB
95 lines
3.6 KiB
"use client"; |
|
|
|
import { NAV_ITEMS } from "./navData"; |
|
export { NAV_ITEMS }; |
|
|
|
function NavItem({ item, isActive }: { item: (typeof NAV_ITEMS)[number]; isActive: boolean }) { |
|
const hasSubmenu = item.submenu.length > 0; |
|
|
|
return ( |
|
<div className="bb-nav-item-wrap relative group"> |
|
<a |
|
href="#" |
|
className="bb-nav-item px-2.5 py-3 whitespace-nowrap inline-flex items-center gap-1" |
|
style={{ |
|
fontSize: 18, |
|
color: "#000", |
|
fontWeight: 400, |
|
textDecoration: "underline", |
|
textUnderlineOffset: "4px", |
|
}} |
|
> |
|
{item.label} |
|
{hasSubmenu && ( |
|
<span className="text-xs" style={{ color: "#9ca3af", textDecoration: "none", display: "inline-block" }}>▾</span> |
|
)} |
|
</a> |
|
{hasSubmenu && ( |
|
<div |
|
className="absolute left-0 top-full z-50 hidden group-hover:block min-w-[220px] py-1 rounded shadow-lg" |
|
style={{ background: "#fff", border: "1px solid #e5e7eb" }} |
|
> |
|
{item.submenu.map((sub) => ( |
|
<a |
|
key={sub} |
|
href="#" |
|
className="block px-4 py-2 text-sm bb-nav-sub-item" |
|
style={{ color: "#333", textDecoration: "none" }} |
|
> |
|
{sub} |
|
</a> |
|
))} |
|
</div> |
|
)} |
|
</div> |
|
); |
|
} |
|
|
|
export function NavigationBlock() { |
|
return ( |
|
<div className="bg-white relative"> |
|
{/* Верхняя панель: три столбца — логотип | ссылки | телефон+кнопка */} |
|
<div className="flex items-center px-6 py-4"> |
|
{/* Столбец 1: Логотип */} |
|
<div className="shrink-0"> |
|
<img |
|
src="/logo/logo-main.png" |
|
alt="Клиника ухо, горло, нос" |
|
className="h-20 w-auto" |
|
/> |
|
</div> |
|
|
|
{/* Столбец 2: Три ссылки вертикально — прижат к логотипу */} |
|
<div className="flex flex-col gap-1.5 ml-6"> |
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}> |
|
<span style={{ color: "#9ca3af" }}>📍</span> |
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>К. Цеткин, 9</span> |
|
</a> |
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}> |
|
<span style={{ color: "#9ca3af" }}>📍</span> |
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>Клиника лечения кашля и аллергии</span> |
|
</a> |
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}> |
|
<span style={{ color: "#9ca3af" }}>📍</span> |
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>Центр диагностики и реабилитации</span> |
|
</a> |
|
</div> |
|
|
|
{/* Столбец 3: Телефон + кнопка вертикально — прижат вправо */} |
|
<div className="flex flex-col items-end gap-2 shrink-0 ml-auto"> |
|
<span className="font-bold" style={{ color: "#000", fontSize: 25 }}> |
|
/342/ 255-53-84 |
|
</span> |
|
<button className="bb-btn bb-btn-md bb-btn-pill">Заказать звонок</button> |
|
</div> |
|
</div> |
|
|
|
{/* Главное меню */} |
|
<nav className="flex bg-white"> |
|
{NAV_ITEMS.map((item, i) => ( |
|
<NavItem key={item.label} item={item} isActive={i === 0} /> |
|
))} |
|
</nav> |
|
</div> |
|
); |
|
}
|
|
|