website/plasma-web-docs/docs/components/NavigationDrawer.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/NavigationDrawer.mdx
346 строк13 KB
Mikhail Lapshin
feat(navigation-drawer): review fixes
03 сен 2025, 10:35
03 сен 2025, 10:35f2a68ed
---
id: navigationdrawer
title: NavigationDrawer
---

import { PropsTable, Description } from '@site/src/components';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# NavigationDrawer

<Description name="NavigationDrawer" />
<PropsTable name="NavigationDrawer" exclude={['css']} />

## Использование

NavigationDrawer — это компонент навигационного меню, который может отображаться в трех режимах `mode`:
- `static` — статичное меню слева от контента
- `drawer` — выдвижное меню поверх контента без затемнения фона
- `overlay` — модальное меню поверх контента с затемнением фона

### Структура меню

Меню состоит из секций, каждая из которых может содержать:
- `label` Заголовок секции (опционально)
- `hasDivider` Отображать ли разделитель. По умолчанию `false`. Разделитель отображается, только если не указан заголовок
- `items` Список элементов меню

### Элементы меню

Каждый элемент меню может содержать:
- `label` Текст
- `icon` Иконку (при включенном `withContentLeft`)
- `contentLeft` Контент слева (вместо иконки, при включенном `withContentLeft`)
- `counter` Счетчик
- `hasIndicator` Индикатор
- `onClick` Колбек при нажатии на меню
- `href` Ссылка
- `target` Для ссылки

## Примеры

<Tabs>
    <TabItem value="simple" label="Simple" default>
        ```tsx live
        import React from 'react';
        import { NavigationDrawer } from '@salutejs/plasma-web';

        export function App() {
            const sections = [{
                items: [
                    {
                        label: 'Главная',
                        selected: true
                    },
                    {
                        label: 'Выход',
                    },
                ]
            }];
             return (
                <div>
                    <NavigationDrawer
                        sections={sections}
                    >
                    Основной контент
                    </NavigationDrawer>
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value="content-left" label="Content Left" default>
        ```tsx live
        import React from 'react';
        import { NavigationDrawer } from '@salutejs/plasma-web';

        export function App() {
            const ContentLeft = (
                <div style={{backgroundColor: '#99999950', width: '100%', height: '100%'}}/>
            )

            const sections = [
                {
                    label: 'Section 1',
                    items: [
                        {
                            label: 'Item 1',
                            contentLeft: ContentLeft,
                            selected: true,
                        },
                        {
                            label: 'Item 2',
                            contentLeft: ContentLeft,
                            counter: 1,
                        },
                        {
                            label: 'Item 3',
                            contentLeft: ContentLeft,
                            disabled: true,
                        },
                        {
                            label: 'Item 4',
                            contentLeft: ContentLeft,
                            hasIndicator: true,
                        },
                        { label: 'Item 5', contentLeft: ContentLeft },
                    ],
                },
            ];
             return (
                <div>
                    <NavigationDrawer
                        sections={sections}
                    >
                    Основной контент
                    </NavigationDrawer>
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value='static' label="Static">
        ```tsx live
        import React, { useState } from 'react';
        import { NavigationDrawer, Button } from '@salutejs/plasma-web';
        import { IconBlankOutline, IconSettingsFill, IconHomeAltFill, IconLogout, IconStacksOutline } from '@salutejs/plasma-icons';

        export function App() {
            const [isOpen, setIsOpen] = useState(true);

            return (
                <div style={{position: 'relative'}}>
                    <NavigationDrawer
                        opened={isOpen}
                        sections={[
                            {
                                label: 'Основная секция',
                                items: [
                                    {
                                        label: 'Главная',
                                        icon: <IconHomeAltFill />,
                                        selected: true,
                                        action: () => console.log('Главная')
                                    },
                                    {
                                        label: 'Настройки',
                                        icon: <IconSettingsFill />,
                                        action: () => console.log('Настройки'),
                                    },
                                ]
                            },
                            {
                                label: 'Документы',
                                items: [
                                    {
                                        label: 'Обзор документов',
                                        icon: <IconBlankOutline />,
                                        action: () => console.log('Обзор документов'),
                                    },
                                    {
                                        label: 'С индикатором',
                                        icon: <IconStacksOutline />,
                                        action: () => console.log('С индикатором'),
                                        hasIndicator: true
                                    },
                                ]
                            },
                            {
                                items: [
                                    {
                                        label: 'Выход',
                                        icon: <IconLogout />,
                                        action: () => console.log('Выход')
                                    },
                                ]
                            }
                        ]}
                    >
                        <div style={{ padding: '20px' }}>
                            <Button onClick={() => setIsOpen(!isOpen)}>
                                Переключить меню
                            </Button>
                            <p>Основной контент приложения</p>
                        </div>
                    </NavigationDrawer>
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value='overlay' label="Overlay">
        ```tsx live
        import React, { useState } from 'react';
        import { NavigationDrawer, Button } from '@salutejs/plasma-web';
        import { IconBlankOutline } from '@salutejs/plasma-icons';

        export function App() {
            const [isOpen, setIsOpen] = useState(false);

            return (
                <div
                    style={{
                        width: 500,
                        height: 300,
                        position: 'relative',
                        overflow: 'hidden',
                        transform: 'translateZ(0)',
                    }}
                >
                    <NavigationDrawer
                        mode="overlay"
                        opened={isOpen}
                        onHide={() => setIsOpen(false)}
                        sections={[
                            {
                                hasDivider: false,
                                items: [
                                    {
                                        label: 'Пункт меню',
                                        action: () => console.log('Клик'),
                                        icon: <IconBlankOutline />,
                                    }
                                ]
                            }
                        ]}
                    >
                        <div style={{ padding: '20px', width: '100%' }}>
                            <Button onClick={() => setIsOpen(true)}>
                                Открыть меню
                            </Button>
                            <p>Основной контент</p>
                        </div>
                    </NavigationDrawer>
            </div>
        );
    }
    ```
    </TabItem>
    <TabItem value='drawer' label="Drawer">
        ```tsx live
        import React, { useState } from 'react';
        import { NavigationDrawer, Button } from '@salutejs/plasma-web';
        import { IconBlankOutline } from '@salutejs/plasma-icons';

        export function App() {
            const [isOpen, setIsOpen] = useState(false);

            return (
                <div
                    style={{
                        width: 500,
                        height: 300,
                        position: 'relative',
                        overflow: 'hidden',
                        transform: 'translateZ(0)',
                    }}
                >
                    <NavigationDrawer
                        mode="drawer"
                        opened={isOpen}
                        sections={[
                            {
                                hasDivider: false,
                                items: [
                                    {
                                        label: 'Пункт меню',
                                        action: () => console.log('Клик'),
                                        icon: <IconBlankOutline />,
                                    }
                                ]
                            }
                        ]}
                    >
                        <div style={{ padding: '20px' }}>
                            <p>Основной контент</p>
                            <Button onClick={() => setIsOpen(!isOpen)}>
                                Переключить меню
                            </Button>
                        </div>
                    </NavigationDrawer>
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value='drawer-hover' label="Drawer with hover">
        ```tsx live
        import React, { useState, useRef, useEffect } from 'react';
        import { NavigationDrawer } from '@salutejs/plasma-web';
        import { IconBlankOutline } from '@salutejs/plasma-icons';

        export function App() {
            const [isOpen, setIsOpen] = useState(false);

            const ref = useRef<HTMLDivElement>(null);

            useEffect(() => {
                if (ref.current) {
                    const sidebar = ref.current.childNodes[0] as HTMLDivElement;
                    sidebar.onmouseenter = () => {
                        setIsOpen(true);
                    };
                    sidebar.onmouseleave = () => {
                        setIsOpen(false);
                    };
                }
            }, [ref]);

            return (
                <div
                    style={{
                        width: 500,
                        height: 300,
                        position: 'relative',
                        overflow: 'hidden',
                        transform: 'translateZ(0)',
                    }}
                >
                    <NavigationDrawer
                        mode="drawer"
                        opened={isOpen}
                        ref={ref}
                        sections={[
                            {
                                hasDivider: false,
                                items: [
                                    {
                                        label: 'Пункт меню',
                                        action: () => console.log('Клик'),
                                        icon: <IconBlankOutline />,
                                    }
                                ]
                            }
                        ]}
                    >
                        <div style={{ padding: '20px' }}>
                            <p>Основной контент</p>
                        </div>
                    </NavigationDrawer>
                </div>
            );
        }
        ```
    </TabItem>
</Tabs>