```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```
```tsx
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>
);
}
```