feat(sprint-5.5): add "Save version" button, update navigation block and block components
- Add "Сохранить версию" button to BlockMetaBar that persists current version + changelog from code to PostgreSQL via PATCH API - Update navigation page: menu items section now renders like live example with underlined links, hover dropdowns, and submenus - Restore uncommitted changes from previous session (thirsty-mayer worktree): navigation v1.3 with dropdowns, updated hero/ceo/doctors/reviews/news/ contact-forms/footer blocks, navData.ts extraction, seed updates - Extract nav menu data to shared navData.ts module Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||
import { CeoBlock, CEO_QUESTIONS } from "@/components/blocks/CeoBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -10,7 +11,7 @@ export const metadata: Metadata = {
|
||||
const LLM_CEO_TEXT = `
|
||||
БЛОК: Вводный текст клиники (CEO-блок)
|
||||
Источник: perm.oclinica.ru/lor — секция после баннера
|
||||
Версия: v1.0
|
||||
Версия: v1.1
|
||||
|
||||
НАЗНАЧЕНИЕ:
|
||||
Информационный блок под hero-баннером. Рассказывает о специализации клиники
|
||||
@@ -49,6 +50,17 @@ const LLM_CEO_TEXT = `
|
||||
`.trim();
|
||||
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.1",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Адрес: «ул. Цитная, 9» заменён на «ул. Клары Цеткин, 9»",
|
||||
"Цвет ссылок: #52b4bd (было #0089c3)",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function CeoPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
@@ -63,7 +75,7 @@ export default function CeoPage() {
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Вводный текст (CEO-блок)
|
||||
</h1>
|
||||
<BlockMetaBar path="/blocks/ceo" defaultVersion="v1.0" defaultIsInPreview={false} />
|
||||
<BlockMetaBar path="/blocks/ceo" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок после hero-баннера на perm.oclinica.ru/lor. Описание специализации клиники
|
||||
+ вопросы-стимулы для пациентов.
|
||||
@@ -152,7 +164,7 @@ export default function CeoPage() {
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/ceo" version="v1.0" specText={LLM_CEO_TEXT}>
|
||||
<LlmBlock path="/blocks/ceo" version="v1.1" specText={LLM_CEO_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Часть", "Содержимое", "Примечание"]}
|
||||
|
||||
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
|
||||
const LLM_FORMS_TEXT = `
|
||||
БЛОК: Формы записи и обратной связи
|
||||
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
|
||||
Версия: v1.1
|
||||
Версия: v1.2
|
||||
|
||||
ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
|
||||
Позиция: после блока отзывов
|
||||
@@ -52,6 +52,14 @@ const LLM_FORMS_TEXT = `
|
||||
`.trim();
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.2",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Кнопка: bb-btn-md заменена на bb-btn-lg (18px, bold, как на реальном сайте)",
|
||||
"border-radius кнопки: 7px исправлен на 4px (исправлено в globals.css)",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v1.1",
|
||||
date: "24.03.2026",
|
||||
@@ -77,7 +85,7 @@ export default function ContactFormsPage() {
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Формы записи
|
||||
</h1>
|
||||
<BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
||||
<BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.2" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
|
||||
</p>
|
||||
@@ -126,7 +134,7 @@ export default function ContactFormsPage() {
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact-forms" version="v1.1" specText={LLM_FORMS_TEXT}>
|
||||
<LlmBlock path="/blocks/contact-forms" version="v1.2" specText={LLM_FORMS_TEXT}>
|
||||
<LlmSection title="Форма 1 — Запись на приём" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Тип", "Placeholder"]}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||
import { FooterBlock } from "@/components/blocks/FooterBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -34,7 +35,7 @@ const FOOTER_COLUMNS = [
|
||||
const LLM_FOOTER_TEXT = `
|
||||
БЛОК: Подвал сайта (Footer)
|
||||
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||
Версия: v1.0
|
||||
Версия: v1.1
|
||||
|
||||
СТРУКТУРА ПОДВАЛА:
|
||||
|
||||
@@ -70,6 +71,22 @@ const LLM_FOOTER_TEXT = `
|
||||
✕ Не менять структуру 4 колонок
|
||||
`.trim();
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.1",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Колонка «О клинике»: обновлены все ссылки по реальному сайту (13 ссылок)",
|
||||
"Колонка «Заболевания»: обновлены ссылки (5 категорий)",
|
||||
"Колонка «Вопрос-ответ»: обновлены ссылки (6 пунктов)",
|
||||
"Колонка «Операции»: обновлены ссылки (11 операций, было 6)",
|
||||
"Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А",
|
||||
"Два графика работы по филиалам",
|
||||
"Соцсети: добавлен Дзен",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactFooterPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
@@ -84,7 +101,7 @@ export default function ContactFooterPage() {
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Подвал (Footer)
|
||||
</h1>
|
||||
<BlockMetaBar path="/blocks/contact" defaultVersion="v1.0" defaultIsInPreview={false} />
|
||||
<BlockMetaBar path="/blocks/contact" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
|
||||
</p>
|
||||
@@ -122,7 +139,7 @@ export default function ContactFooterPage() {
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact" version="v1.0" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmBlock path="/blocks/contact" version="v1.1" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmSection title="Структура подвала" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Содержимое", "Фон"]}
|
||||
|
||||
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
|
||||
const LLM_HERO_TEXT = `
|
||||
БЛОК: Hero-баннер (главный баннер страницы)
|
||||
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
|
||||
Версия: v1.2
|
||||
Версия: v1.3
|
||||
|
||||
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
||||
«ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
||||
@@ -52,6 +52,14 @@ const LLM_HERO_TEXT = `
|
||||
`.trim();
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.3",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Счётчик: «98 573 просмотра» заменён на «Поделиться / 98572» (как на реальном сайте)",
|
||||
"Убраны кнопки VK/FB/TW",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v1.2",
|
||||
date: "24.03.2026",
|
||||
@@ -86,7 +94,7 @@ export default function HeroPage() {
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Hero-баннер
|
||||
</h1>
|
||||
<BlockMetaBar path="/blocks/hero" defaultVersion="v1.2" defaultIsInPreview={true} defaultChangelog={CHANGELOG} />
|
||||
<BlockMetaBar path="/blocks/hero" defaultVersion="v1.3" defaultIsInPreview={true} defaultChangelog={CHANGELOG} />
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "}
|
||||
<strong>#f9f4e7</strong>.
|
||||
@@ -161,7 +169,7 @@ export default function HeroPage() {
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/hero" version="v1.2" specText={LLM_HERO_TEXT}>
|
||||
<LlmBlock path="/blocks/hero" version="v1.3" specText={LLM_HERO_TEXT}>
|
||||
<LlmSection title="Структура баннера" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
||||
|
||||
@@ -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. ТОП-БАР (~40px высота, фон #fff, border-bottom 1px solid #e5e7eb)
|
||||
Левая часть:
|
||||
— Адрес: «Б. Цитная, 3» с иконкой 📍
|
||||
— Ссылка: «Клиника ухо горло нос и аллергия»
|
||||
— Ссылка: «Центр аллергологии и пульмонологии»
|
||||
Правая часть:
|
||||
— Телефон: «/342/ 255-53-84» (font-weight: bold, color: #111827)
|
||||
— Кнопка «Заказать звонок» — стиль bb-btn-pill (#e9e4d4, border #d5cfbd, border-radius 25px)
|
||||
1. ВЕРХНЯЯ ПАНЕЛЬ (фон #fff, без рамок)
|
||||
Три столбца:
|
||||
— Столбец 1 (лево): Логотип клиники (logo-main.png, h-20)
|
||||
— Столбец 2 (центр): Три ссылки вертикально с иконкой 📍:
|
||||
· К. Цеткин, 9 (цвет #52b4bd, подчёркнутая)
|
||||
· Клиника лечения кашля и аллергии (цвет #52b4bd, подчёркнутая)
|
||||
· Центр диагностики и реабилитации (цвет #52b4bd, подчёркнутая)
|
||||
— Столбец 3 (право): Телефон «/342/ 255-53-84» (25px, bold, #000) + кнопка «Заказать звонок» (bb-btn-md bb-btn-pill)
|
||||
|
||||
2. ЛОГОТИП (~64px, фон #fff)
|
||||
— Иконка кружок синий (#0089c3) с крестом
|
||||
— Текст «КЛИНИКА УХО ГОРЛО НОС» жирный uppercase, цвет #53514e
|
||||
— Подпись «им. проф. Е.Н.Оленевой» мелкий, цвет #9ca3af
|
||||
|
||||
3. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
|
||||
Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР-операции | Сурдология | Цены | Контакты
|
||||
Шрифт: Fira Sans 14px, weight 400
|
||||
Цвет ссылок: #53514e (--brand-073m)
|
||||
Активный / Hover: #0089c3 (--brand-053m)
|
||||
2. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
|
||||
Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР операции | Сурдология | Цены | Контакты
|
||||
Шрифт: 18px, weight 400
|
||||
Цвет ссылок: #000
|
||||
Активный / Hover: #0089c3
|
||||
Разделители: border-right 1px solid #f3f4f6 между пунктами
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
|
||||
✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
|
||||
✓ Телефон кликабелен (tel: ссылка)
|
||||
✓ Активный пункт меню — цвет #0089c3, остальные #53514e
|
||||
✓ Активный пункт меню — цвет #0089c3, остальные #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)",
|
||||
desc: "Три столбца: логотип (logo-main.png) | три ссылки вертикально с 📍 (К. Цеткин 9, Клиника кашля, Центр диагностики) | телефон 25px + кнопка «Заказать звонок» (pill)",
|
||||
details: "Фон: #fff · Без рамок · Ссылки: #52b4bd, подчёркнутые",
|
||||
},
|
||||
{
|
||||
zone: "2. Логотип",
|
||||
bg: "#f0fdf4",
|
||||
height: "~64px",
|
||||
color: "Фон: #fff",
|
||||
desc: "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким",
|
||||
},
|
||||
{
|
||||
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 и активный пункт — цвет #0089c3 (--brand-053m).
|
||||
Порядок фиксирован. Все пункты чёрные (#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", "—"],
|
||||
|
||||
@@ -80,8 +80,8 @@ body {
|
||||
background: #FFA39C;
|
||||
color: #fff;
|
||||
border-color: #FF847B;
|
||||
border-radius: 7px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
@@ -109,6 +109,20 @@ body {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/* ─── Навигация сайта ────────────────────────────────────────── */
|
||||
.bb-nav-item {
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.bb-nav-item:hover {
|
||||
background: #f5f0e6;
|
||||
}
|
||||
.bb-nav-sub-item {
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.bb-nav-sub-item:hover {
|
||||
background: #f5f0e6;
|
||||
}
|
||||
|
||||
/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
|
||||
.bb-input,
|
||||
.bb-textarea,
|
||||
|
||||
Reference in New Issue
Block a user