npm package: @n3/react-page-blocks
Description: Page blocks (header and sidebar) for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.1

# @n3/react-page-blocks

Шапка и сайдбар для приложений на базе `@n3/kit`.

```javascript
import {
  Header,
  Sidebar,
  Layout,
  LayoutWithoutSidebar,
  useLayoutState,
  LocalStorageLayout,
  parseLayoutFromLocalStorage,
} from '@n3/react-page-blocks';
```

* `Header` - шапка страницы
* `Sidebar` - сайдбар страницы
* `Layout` - компонент, включающий в себя шапку и сайдбар
* `LayoutWithoutSidebar` - компонент, включающий в себя шапку и `Grid`, центрирующий контент
* `LocalStorageLayout` - аналогичен `Layout`, а также хранит состояние открытости/закрытости пунктов в `localStorage`
* `useLayoutState` - хук для получения состояния `Layout` (возвращает `null`, если `Layout` не испоьзуется)
* `parseLayoutFromLocalStorage` - парсинг состояния `Layout` из `localStorage`

## Props

### Header

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| logo | + | HeaderLogoParams |  | Логотип в левой части |
| isUserBlockHidden |  | boolean | false | Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями) |
| showAvatar |  | boolean |  | Отображать ли аватар текущего пользователя |
| avatar |  | string |  | Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан) |
| userName |  | ReactNode |  | Имя текщего пользователя |
| dropdownOptions |  | HeaderDropdownOption[] |  | Опции выпадающего меню |
| menu |  | HeaderMenuItem[] |  | Левое меню |
| rightMenu |  | HeaderMenuItem[] |  | Правое меню |
| withPusher |  | boolean | false | Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки |
| counters |  | { [key: string]: number; } |  | Счётчики |
| countersMaxNumber |  | number |  | Максимальное число в счётчиках |
| collapsible |  | boolean |  | Отображение иконки раскрытия бокового меню на меленьких разрешениях |
| openMenu |  | () => void |  | Функция раскрытия бокового меню |

### Sidebar

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| menuCollapsible |  | boolean | true | Возможность схлопывания меню в иконки |
| linksGroups | + | (SidebarLinksGroup \| SidebarLink)[] |  | Описание пунктов |
| counters |  | { [key: string]: number; } | "{}" | Счётчики |
| countersMaxNumber |  | number | null | Максимальное число в счётчиках |
| showCountersInOpenedState |  | boolean | false | Показывать ли счётчики у открытых групп |
| collapsible |  | boolean | true | Возможность скрытия меню на маленьких экранах |
| collapsed |  | boolean | true | Скрыто ли меню на маленьком экране |
| openedGroups |  | { [key: string]: boolean; } | "{}" | Объект, показывающий, какие группы открыты |
| openedByDefault |  | boolean | false | Открыты ли по умолчанию группы, id которых отстуствуют в openedGroups |
| menuCollapsed |  | boolean | false | Схлопнуто ли меню в иконки |
| closeMenu |  | () => void | "(): void => {}" | Обработчик закрытия меню |
| setMenuCollapsed |  | (nextValue: boolean) => void | "(): void => {}" | Обработчик схлопывания меню в иконки<br>@param nextValue - новое состояние схлопнутости |
| onToggleGroup |  | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню<br>@param groupId - id группы<br>@param opened - новое состояние открытости/закрытости |

#### Параметры `link`

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| type | + | "link" |  |  |
| id | + | string |  |  |
| title | + | ReactNode |  | Заголовок ссылки |
| renderIcon |  | RenderSidebarIcon | null | Функция рендера иконки первого уровня |
| payload | + | { url: string; target?: string; isAnchor?: boolean; } |  |  |

#### Параметры `group`

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| type | + | "group" |  |  |
| id | + | string |  |  |
| title | + | ReactNode |  | Заголовок группы |
| renderIcon |  | RenderSidebarIcon | null | Функция рендера иконки первого уровня |
| payload | + | { links: (SidebarLinksGroup \| SidebarLink)[]; } |  |  |

### Layout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| header | + | HeaderParams |  | Объект props компонента Header |
| sidebar | + | SidebarParams |  | Объект props компонента Sidebar |
| collapsible |  | boolean | true | Возможность скрытия меню на маленьких экранах |
| menuCollapsed |  | boolean | false | Схлопнуто ли меню в иконки |
| openedGroups |  | { [key: string]: boolean; } | "{}" | Объект, показывающий, какие группы открыты |
| counters |  | { [key: string]: number; } | "{}" | Счётчики |
| countersMaxNumber |  | number | null | Максимальное число в счётчиках |
| children | + | ((renderProps: LayoutContextValue) => ReactNode) |  | Функция рендера контента<br>@param renderProps |
| onCollapseMenu |  | (nextValue: boolean) => void | "(): void => {}" | Обработчик схлопывания меню в иконки<br>@param nextValue - новое состояние схлопнутости |
| onToggleGroup |  | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню<br>@param groupId - id группы<br>@param opened - новое состояние открытости/закрытости |

### LayoutWithoutSidebar

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| header | + | HeaderParams |  | Объект props компонента Header |
| counters |  | { [key: string]: number; } | `{}` | Счётчики |
| countersMaxNumber |  | number | `null` | Максимальное число в счётчиках |
| hasGrid |  | boolean | `true` | Оборачивать ли содержимое в компонент Grid |
| grid |  | GridProps | `{}` | Объект props компонента Grid |
| children |  | ReactNode | `null` | Контент |