@ -1,7 +1,9 @@
import type { Metadata } from "next" ;
import { LlmBlock , LlmSection , LlmTable , LlmRules } from "@/components/llm/LlmBlock" ;
import { NavigationBlock , NAV_ITEMS } from "@/components/blocks/NavigationBlock" ;
import { NavigationBlock } from "@/components/blocks/NavigationBlock" ;
import { NAV_ITEMS } from "@/components/blocks/navData" ;
import { BlockMetaBar } from "@/components/ui/BlockMetaBar" ;
import { type ChangelogEntry } from "@/components/ui/BlockChangelog" ;
export const metadata : Metadata = {
title : "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой" ,
@ -10,40 +12,73 @@ export const metadata: Metadata = {
const LLM_NAV_TEXT = `
БЛОК : Шапка и н а в и г а ц и я с а й т а ( Header )
Источник : perm.oclinica.ru / lor — р е а л ь н а я ш а п к а с а й т а
Версия : v1.0
Версия : v1.3
С Т Р У К Т У Р А Ш А П К И ( 3 з о н ы с в е р х у в н и з ) :
С Т Р У К Т У Р А Ш А П К И ( 2 з о н ы с в е р х у в н и з ) :
1 . Т О П - Б А Р ( ~ 40 px в ы с о т а , ф о н # fff , border - bottom 1 px solid # e5e7eb )
Л е в а я ч а с т ь :
— А д р е с : « Б . Ц и т н а я , 3 » с и к о н к о й 📍
— С с ы л к а : « К л и н и к а у х о г о р л о н о с и а л л е р г и я »
— С с ы л к а : « Ц е н т р а л л е р г о л о г и и и п у л ь м о н о л о г и и »
П р а в а я ч а с т ь :
— Т е л е ф о н : « / 342 / 255 - 53 - 84 » ( font - weight : bold , color : # 111827 )
— К н о п к а « З а к а з а т ь з в о н о к » — с т и л ь bb - btn - pill ( # e9e4d4 , border # d5cfbd , border - radius 25 px )
1 . В Е Р Х Н Я Я П А Н Е Л Ь ( ф о н # fff , б е з р а м о к )
Т р и с т о л б ц а :
— С т о л б е ц 1 ( л е в о ) : Л о г о т и п к л и н и к и ( logo - main . png , h - 20 )
— С т о л б е ц 2 ( ц е н т р ) : Т р и с с ы л к и в е р т и к а л ь н о с и к о н к о й 📍 :
· К . Ц е т к и н , 9 ( ц в е т # 52 b4bd , п о д ч ё р к н у т а я )
· К л и н и к а л е ч е н и я к а ш л я и а л л е р г и и ( ц в е т # 52 b4bd , п о д ч ё р к н у т а я )
· Ц е н т р д и а г н о с т и к и и р е а б и л и т а ц и и ( ц в е т # 52 b4bd , п о д ч ё р к н у т а я )
— С т о л б е ц 3 ( п р а в о ) : Т е л е ф о н « / 342 / 255 - 53 - 84 » ( 25 px , bold , # 000 ) + к н о п к а « З а к а з а т ь з в о н о к » ( bb - btn - md bb - btn - pill )
2 . Л О Г О Т И П ( ~ 64 px , ф о н # fff )
— И к о н к а к р у ж о к с и н и й ( # 0089 c3 ) с к р е с т о м
— Т е к с т « К Л И Н И К А У Х О Г О Р Л О Н О С » ж и р н ы й uppercase , ц в е т # 53514 e
— П о д п и с ь « и м . п р о ф . Е . Н . О л е н е в о й » м е л к и й , ц в е т # 9 ca3af
3 . Г Л А В Н О Е М Е Н Ю ( ~ 46 px , ф о н # fff , border - top 1 px solid # e5e7eb )
П у н к т ы ( 8 ш т у к ) : К л и н и к а | Л О Р в р а ч и | З а б о л е в а н и я | В о п р о с - о т в е т | Л О Р - о п е р а ц и и | С у р д о л о г и я | Ц е н ы | К о н т а к т ы
Шрифт : Fira Sans 14 px , weight 400
Ц в е т с с ы л о к : # 53514 e ( -- brand - 073 m )
А к т и в н ы й / Hover : # 0089 c3 ( -- brand - 053 m )
2 . Г Л А В Н О Е М Е Н Ю ( ~ 46 px , ф о н # fff , border - top 1 px solid # e5e7eb )
П у н к т ы ( 8 ш т у к ) : К л и н и к а | Л О Р в р а ч и | З а б о л е в а н и я | В о п р о с - о т в е т | Л О Р о п е р а ц и и | С у р д о л о г и я | Ц е н ы | К о н т а к т ы
Шрифт : 18px , weight 400
Ц в е т с с ы л о к : # 000
А к т и в н ы й / Hover : # 0089 c3
Разделители : border - right 1 px solid # f3f4f6 м е ж д у п у н к т а м и
П Р А В И Л А :
✓ Л о г о т и п в с е г д а к л и к а б е л е н — в е д ё т н а г л а в н у ю с т р а н и ц у р а з д е л а
✓ К н о п к а « З а к а з а т ь з в о н о к » в с е г д а в и д н а , pill - с т и л ь
✓ Т е л е ф о н к л и к а б е л е н ( tel : ссылка )
✓ А к т и в н ы й п у н к т м е н ю — ц в е т # 0089 c3 , о с т а л ь н ы е # 53514 e
✓ А к т и в н ы й п у н к т м е н ю — ц в е т # 0089 c3 , о с т а л ь н ы е # 000
✕ Н е д о б а в л я т ь п у н к т ы м е н ю , к о т о р ы х н е т н а с а й т е
✕ Н е м е н я т ь п о р я д о к п у н к т о в м е н ю
` .trim();
const CHANGELOG : ChangelogEntry [ ] = [
{
version : "v1.3" ,
date : "24.03.2026" ,
changes : [
"Подменю: выпадающие списки при hover для Клиника, Заболевания, Вопрос-ответ, ЛОР операции" ,
"Hover-эффект: бежевый фон #f5f0e6 при наведении на пункт меню" ,
"Пункты меню подчёркнуты (underline), без разделителей между ними" ,
"Убрана рамка между шапкой и меню (border-top)" ,
"Все пункты меню чёрного цвета #000 (было: первый #0089c3)" ,
"Уменьшен padding пунктов (px-2.5 вместо px-4) — все помещаются в ширину экрана" ,
] ,
} ,
{
version : "v1.2" ,
date : "24.03.2026" ,
changes : [
"Убрана рамка и тень вокруг шапки (как на реальном сайте)" ,
"Структура: 3 столбца (логотип | ссылки вертикально | телефон+кнопка) вместо горизонтального ряда" ,
"Логотип: реальный logo-main.png вместо кружка, размер h-20 (было h-12)" ,
"Кнопка: bb-btn-md (было bb-btn-sm)" ,
"Анатомия шапки: обновлена — 2 зоны вместо 3" ,
] ,
} ,
{
version : "v1.1" ,
date : "24.03.2026" ,
changes : [
"Адрес: «Б. Цитная, 3» заменён на «К. Цеткин, 9»" ,
"Ссылки: обновлены на «Клиника лечения кашля и аллергии» и «Центр диагностики и реабилитации»" ,
"Телефон: размер 25px (было ~14px)" ,
"Меню: font-size 18px (было 14px), цвет ссылок #000 (было #53514e)" ,
"Цвет ссылки адреса: #52b4bd (было #0089c3)" ,
"«ЛОР операции» без дефиса (было «ЛОР-операции»)" ,
] ,
} ,
] ;
export default function NavigationPage() {
return (
< div className = "p-8 max-w-5xl mx-auto space-y-10" >
@ -58,7 +93,7 @@ export default function NavigationPage() {
< h1 className = "text-2xl font-bold mb-2" style = { { color : "var(--bb-text)" } } >
Ш а п к а и н а в и г а ц и я
< / h1 >
< BlockMetaBar path = "/blocks/navigation" defaultVersion = "v1.0 " defaultIsInPreview = { true } / >
< BlockMetaBar path = "/blocks/navigation" defaultVersion = "v1.3 " defaultIsInPreview = { true } defaultChangelog = { CHANGELOG } / >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
Т о ч н о е в о с п р о и з в е д е н и е ш а п к и с perm . oclinica . ru / lor . Т р и зоны : топ - б а р , л о г о т и п , г л а в н о е м е н ю .
< / p >
@ -69,7 +104,7 @@ export default function NavigationPage() {
< h2 className = "font-semibold text-base" style = { { color : "var(--bb-text)" } } >
Ж и в о й п р и м е р
< / h2 >
< div className = "rounded-xl overflow-hidden" >
< div className = "rounded-xl" style = { { paddingBottom : 40 } } >
< NavigationBlock / >
< / div >
< / section >
@ -79,28 +114,19 @@ export default function NavigationPage() {
< h2 className = "font-semibold text-base" style = { { color : "var(--bb-text)" } } >
А н а т о м и я ш а п к и
< / h2 >
< div className = "grid grid-cols-1 md:grid-cols-3 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
{ [
{
zone : "1. Топ-бар " ,
zone : "1. Верхняя панель " ,
bg : "#f0f9ff" ,
height : "~40px" ,
color : "Фон: #fff" ,
desc : "Адрес, ссылки на разделы клиники, телефон, кнопка «Заказать звонок» (pill)" ,
} ,
{
zone : "2. Логотип" ,
bg : "#f0fdf4" ,
height : "~64px" ,
color : "Фон: #fff" ,
desc : "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким" ,
desc : "Три столбца: логотип (logo-main.png) | три ссылки вертикально с 📍 (К. Цеткин 9, Клиника кашля, Центр диагностики) | телефон 25px + кнопка «Заказать звонок» (pill)" ,
details : "Фон: #fff · Без рамок · Ссылки: #52b4bd, подчёркнутые" ,
} ,
{
zone : "3. Навигация " ,
zone : "2. Главное меню" ,
bg : "#fefce8" ,
height : "~46px" ,
color : "Фон: #fff, border-top" ,
desc : "8 горизонтальных пунктов, активный = #0089c3, остальные = #53514e" ,
desc : "8 горизонтальных пунктов: Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР операции | Сурдология | Цены | Контакты" ,
details : "Фон: #fff · border-top · 18px · Активный: #0089c3, остальные: #000" ,
} ,
] . map ( ( z ) = > (
< div
@ -115,7 +141,7 @@ export default function NavigationPage() {
{ z . desc }
< / p >
< p className = "text-[11px] font-mono mt-1" style = { { color : "var(--bb-text-muted)" } } >
H : { z . height } · { z . color }
{ z . details }
< / p >
< / div >
) ) }
@ -127,29 +153,49 @@ export default function NavigationPage() {
< h2 className = "font-semibold text-base" style = { { color : "var(--bb-text)" } } >
П у н к т ы г л а в н о г о м е н ю
< / h2 >
< div className = "flex flex-wrap gap-2" >
{ NAV_ITEMS . map ( ( item , i ) = > (
< span
key = { item }
className = "px-3 py-1.5 rounded text-sm"
style = { {
background : i === 0 ? "#dff0fa" : "var(--bb-sidebar-bg)" ,
color : i === 0 ? "var(--brand-053m)" : "var(--bb-text)" ,
border : "1px solid var(--bb-border)" ,
fontWeight : i === 0 ? 500 : 400 ,
} }
>
{ item }
{ i === 0 && (
< span className = "ml-1.5 text-[10px]" style = { { color : "var(--bb-text-muted)" } } >
( а к т и в н ы й )
< / span >
) }
< / span >
) ) }
< div className = "rounded-xl border overflow-visible" style = { { borderColor : "var(--bb-border)" , background : "#fff" } } >
< div className = "flex items-center justify-center flex-wrap" style = { { borderTop : "1px solid #e5e7eb" } } >
{ NAV_ITEMS . map ( ( item , i ) = > (
< div key = { item . label } 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 }
{ item . submenu . length > 0 && (
< span className = "text-xs" style = { { color : "#9ca3af" , textDecoration : "none" , display : "inline-block" } } > ▾ < / span >
) }
< / a >
{ item . submenu . length > 0 && (
< 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 >
) ) }
< / div >
< / div >
< p className = "text-xs" style = { { color : "var(--bb-text-muted)" } } >
П о р я д о к п у н к т о в ф и к с и р о в а н . Hover и а к т и в н ы й п у н к т — ц в е т # 0089 c3 ( -- brand - 053 m ) .
П о р я д о к ф и к с и р о в а н . В с е п у н к т ы ч ё р н ы е ( # 000 ) , п о д ч ё р к н у т ы . Hover — б е ж е в ы й ф о н # f5f0e6 . ▾ — в ы п а д а ю щ е е п о д м е н ю п р и н а в е д е н и и .
< / p >
< / section >
@ -161,9 +207,13 @@ export default function NavigationPage() {
< div className = "grid grid-cols-2 md:grid-cols-4 gap-3" >
{ [
{ label : "Фон шапки" , value : "#ffffff" , token : "—" } ,
{ label : "Ссылки меню" , value : "#53514e" , token : "--brand-073m" } ,
{ label : "Активный / hover" , value : "#0089c3" , token : "--brand-053m" } ,
{ label : "Пункты меню" , value : "#000000" , token : "—" } ,
{ label : "Hover фон меню" , value : "#f5f0e6" , token : "bb-nav-item:hover" } ,
{ label : "Ссылки адресов" , value : "#52b4bd" , token : "—" } ,
{ label : "Кнопка «Заказать»" , value : "#e9e4d4" , token : "bb-btn-pill" } ,
{ label : "Подменю фон" , value : "#ffffff" , token : "—" } ,
{ label : "Подменю hover" , value : "#f5f0e6" , token : "bb-nav-sub-item:hover" } ,
{ label : "Телефон" , value : "#000000" , token : "25px, bold" } ,
] . map ( ( t ) = > (
< div
key = { t . label }
@ -189,14 +239,13 @@ export default function NavigationPage() {
< / section >
{ /* LLM блок */ }
< LlmBlock path = "/blocks/navigation" version = "v1.0 " specText = { LLM_NAV_TEXT } >
< LlmBlock path = "/blocks/navigation" version = "v1.3 " specText = { LLM_NAV_TEXT } >
< LlmSection title = "Зоны шапки" / >
< LlmTable
headers = { [ "Зона" , "Высота" , " Фон" , "Содержимое" ] }
headers = { [ "Зона" , "Фон" , "Содержимое" ] }
rows = { [
[ "Топ-бар" , "~40px" , "#fff" , "Адрес, ссылки разделов, телефон /342/ 255-53-84, кнопка «Заказать звонок»" ] ,
[ "Логотип" , "~64px" , "#fff" , "Кружок #0089c3 + «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»" ] ,
[ "Навигация" , "~46px" , "#fff + border-top" , "8 пунктов: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты" ] ,
[ "Верхняя панель" , "#fff, без рамок" , "Логотип (logo-main.png) | 3 ссылки вертикально с 📍 (#52b4bd) | Телефон 25px + кнопка pill" ] ,
[ "Главное меню" , "#fff, border-top" , "8 пунктов 18px: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР операции / Сурдология / Цены / Контакты" ] ,
] }
/ >
< LlmSection title = "Цвета" / >
@ -204,7 +253,7 @@ export default function NavigationPage() {
headers = { [ "Элемент" , "Цвет" , "Токен" ] }
rows = { [
[ "Фон шапки" , "#ffffff" , "—" ] ,
[ "Ссылки меню (default)" , "#53514e" , "--brand-073m " ] ,
[ "Ссылки меню (default)" , "#000000" , "— " ] ,
[ "Активный пункт / hover" , "#0089c3" , "--brand-053m" ] ,
[ "Кнопка «Заказать звонок»" , "#e9e4d4 / border #d5cfbd" , "bb-btn-pill" ] ,
[ "Телефон" , "#111827, font-weight bold" , "—" ] ,
AR 15 M4
2 months ago