diff --git a/src/components/AsideHeader/loc/README-ru.md b/src/components/AsideHeader/loc/README-ru.md new file mode 100644 index 0000000..e98725f --- /dev/null +++ b/src/components/AsideHeader/loc/README-ru.md @@ -0,0 +1,222 @@ + + +# AsideHeader + + + +Компонент `AsideHeader` позволяет создать гибкий и настраиваемый интерфейс навигации в приложении. +Пользователи могут легко адаптировать внешний вид боковой панели под цвета своего бренда, а также добавлять уникальные ссылки и иконки, отражающие функциональность приложения. + +Данный компонент предлагает надежное решение для создания интуитивно понятных и визуально привлекательных систем навигации, улучшая при этом пользовательский опыт и обеспечивая гибкость для адаптации к различным сценариям. + +```ts +import {AsideHeader} from '@gravity-ui/navigation'; +``` + + + +## Внешний вид + + + +### Состояние + +Компонент имеет два состояния: свернутое и развернутое. +Управлять состоянием можно через свойства `compact` и `onChangeCompact`, а видимостью кнопки — через `hideCollapseButton`. + +### Оформление верхнего блока + +`AsideHeader` позволяет выделить верхний блок с элементами логотипа и подзаголовка с помощью свойства `headerDecoration`. + +### Пользовательский фон + +Компонент поддерживает различные варианты оформления, такие как добавление фонового изображения или разделение блоков по цвету. Для этого используются свойства `customBackground` и `customBackgroundClassName`. + +## Блоки + +Интерфейс навигации состоит из трех блоков: верхнего, среднего и нижнего. Эти блоки схожи, но могут различаться функциональностью в зависимости от частоты обращения к ним пользователей. +**Примечание**: состоянием элементов управляет пользователь. + +### Верхний блок + +Данный блок, как правило, включает логотип и другие элементы, расположенные под ним, которые присутствуют на всех страницах сайта. Для быстрого перехода на главную страницу можно использовать кликабельный логотип. При необходимости под логотипом можно разместить другие элементы, такие как поисковая строка и каталог. + +Элементы данного блока поддерживают тултипы, всплывающие окна и выдвижные боковые панели — для их применения необходимо задать соответствующие настройки. + +### Средний блок (`menuItems`) + +Данный блок является основным, а его содержимое может меняться в зависимости от текущей страницы. Один из примеров использования — навигация по многостраничным сайтам. +При нехватке вертикального пространства элементы автоматически сворачиваются в иконку с многоточием. + +Элементы навигации могут находиться в двух состояниях: свернутом (`isCollapsed`), когда видна только иконка, и развернутом. Также можно настроить внешний вид всего элемента через обертку. + +С помощью настроек `AllPages` пользователи могут закреплять нужные элементы и скрывать ненужные, задавая им состояние `pinned` (закреплено) и `hidden` (скрыто). Закрепленные элементы всегда остаются видимыми. + +Для добавления компонента `All Pages`, отображающего панель редактирования списка видимых элементов, необходим обратный вызов `onMenuItemsChanged`. + +**Примечание**: пользователь управляет списком элементов меню, полученным из обратного вызова, и передает новое состояние элементов в `AsideHeader`. + +### Нижний блок + +Нижний блок (футер) повышает удобство пользователей, обеспечивая легкий доступ к элементам и вспомогательным ресурсам. Он позволяет связаться со службой поддержки и включает дополнительную информацию, чтобы пользователю было проще ориентироваться. + +В футере можно использовать как собственные компоненты, так и `AsideHeaderFooterItem`. + +#### Выделение элемента + +Выделение элемента поверх модальных окон может быть полезным, если пользователь хочет отправить сообщение об ошибке через форму обратной связи, открываемую в модальном окне. + +В компоненте `AsideHeaderFooterItem` можно передать свойство `bringForward`, которое отображает иконку поверх модальных окон. Кроме того, в `AsideHeader` необходимо передать функцию, которая будет уведомлять об открытии модальных окон. + +## Рендеринг контента + +Область справа от `AsideHeader` отведена под основной контент страницы. +При разворачивании и сворачивании элемента навигации его размер (значение `size`) будет меняться. Это нужно учитывать, например, для корректировки макета компонентов. +CSS-переменная `--gn-aside-header-size` содержит актуальный размер элемента навигации. + +Ниже представлено описание альтернативного метода рендеринга контента. + +### Оптимизация рендеринга + +Если контент вашего приложения необходимо рендерить быстрее, чем это позволяют свойства `AsideHeader`, можно перейти на использование `PageLayout` с расширенными настройками. + + + +```diff +--- Main.tsx ++++ Main.tsx +-import {AsideHeader} from './AsideHeader' ++import {PageLayout, AsideFallback} from '@gravity-ui/navigation'; ++const Aside = React.lazy(() => ++ import('./Aside').then(({Aside}) => ({ default: Aside })) ++); + +- ++ ++ }> ++