Системные и дополнительные секции

30 вариантов оформления нижнего блока сайдбара #menu-static-footer и соседних полос (среда, статистика). Каждый файл — отдельный HTML с моком меню. Кликайте переключатель, чтобы свернуть/развернуть.

Как открыть: http://127.0.0.1:3000/examples/menu-static-footer/ (запустите CMS-сервер, например npm start). Прямой file:// может не работать.

Первая серия (01–10)

01 · Как сейчас

Текущий production: chevron, длинный заголовок.

Открыть

02 · Короткая pill

Компактная капсула с иконкой.

Открыть

03 · Сегменты

«Система» и «Дополнительно» в одной полоске.

Открыть

04 · Handle-bar

Нижняя «ручка» drawer.

Открыть

05 · Иконки секций

Эмодзи-превью секций в заголовке.

Открыть

06 · Ghost-link

Только текст-ссылка без рамки.

Открыть

07 · Чипы-превью

Свёрнуто видны мини-чипы секций.

Открыть

08 · Accent band

Фиолетовая полоса — как в production.

Открыть

09 · Статус-точки

Цветные точки статуса по секциям.

Открыть

10 · Компакт + счётчик

Короткое название и badge «3».

Открыть

Новая серия (11–20)

11 · Rail list

Цветная полоса слева, плоский список без рамок.

Открыть

12 · Soft cards

Карточки с тенью на лавандовом фоне.

Открыть

13 · Compact rows

Одна строка на секцию, chevron справа (iOS-style).

Открыть

14 · Grouped

Группы «Инфраструктура» и «Интеграции».

Открыть

15 · Icon grid

Сетка 2×N с крупными иконками.

Открыть

16 · Dark console

Тёмная зона в стиле IDE / терминала.

Открыть

17 · Floating sheet

«Лист» с закруглением и тенью снизу.

Открыть

18 · Numbered

Нумерация 01–05 для порядка секций.

Открыть

19 · Inline chips

Все секции — чипы в одном потоке.

Открыть

20 · Unified stack

Единый стек: секции + среда + статистика.

Открыть

Дерево (21–30)

21 · Tree classic

Windows-дерево с треугольниками ▶ ▾.

Открыть

22 · Tree guides

Вертикальные линии-направляющие (Obsidian / VS Code).

Открыть

23 · Tree Finder

macOS Finder: disclosure + иконки папок.

Открыть

24 · Tree dotted

ASCII-ветки ├─ └─ в моноширинном стиле.

Открыть

25 · Tree compact

Плотное дерево — минимум высоты.

Открыть

26 · Tree levels

Цвет фона и полоса по уровню вложенности.

Открыть

27 · Tree status

Дерево со статус-точками у секций.

Открыть

28 · Tree outline

Нумерованное оглавление с пунктиром.

Открыть

29 · Tree dark

Тёмное дерево в стиле IDE.

Открыть

30 · Tree animated

Плавное раскрытие веток + активный узел.

Открыть