Legacy ADMY MenuSide
Раскрытая панель показывает подписи и дочерние пункты под строкой. Свёрнутая показывает иконки и отдельное абсолютное подменю; его положение рассчитывается от фактической цели click с исходным смещением 40px. Прокрутка списка пересчитывает это положение. Badge больше 99 сокращается до 99+, ноль не показывается. Права, совпавшие маршруты и счётчики передаются готовыми состояниями прототипа. Сохранённое раскрытие задают expandedItems и collapsedSubmenuIndex, точный DOM-якорь исходного click — submenuAnchorPath; действия внутри панели меняют это состояние и сообщают его onstatechange. Позиция отдельного подменю считается при щелчке, прокрутке списка и восстановлении сохранённого состояния; сворачивание панели её не пересчитывает, как и в исходнике.
Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)
Когда использовать
- Боковая навигация существующего экрана ADMY.
Не использовать:
- Новая структура навигации без требования legacy.
Исходная композиция
Навигация с дочерними пунктами и сворачиванием.
<!--
/**
* 🟢
*
* Боковая навигация демонстрирует исходные состояния сворачивания.
* Ссылки остаются в текущем примере и не создают продуктовых маршрутов.
*/
-->
<script>
import Component from '$lib/ui/LegacyAdmyMenuSide.svelte';
import Btn from '$lib/ui/LegacyAdmyBtn.svelte';
import {t} from '$lib/spec/demo-lang.svelte.js';
let asideCollapsed=$state(false);
const items=$derived([{title:t('Главная'),icon:'home',to:'#menu-home'},{title:t('Настройки'),icon:'settings',badge:7,children:[{title:t('Профиль'),to:'#menu-profile'},{title:t('Уведомления'),to:'#menu-notifications'}]}]);
</script>
<Btn onclick={()=>asideCollapsed=!asideCollapsed}>{t('Свернуть')}</Btn>
<Component {items} {asideCollapsed} />
<div id="menu-home"></div><div id="menu-profile"></div><div id="menu-notifications"></div>