SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=241-6833&node-type=frame&t=u71R2opdDUAOR8aQ-0)).

[Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)

Пример типизации кастомной темы SideMenu.

```jsx static
import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
import { SideMenu, SideMenuThemeIn } from '@skbkontur/side-menu';

const myTheme = ThemeFactory.create<SideMenuThemeIn>({
  sideMenuProductColor: '#64b419',
});

<ThemeContext.Provider value={myTheme}>
  <SideMenu />
</ThemeContext.Provider>;
```

Базовый пример использования SideMenu

```jsx harmony
import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Kontur, Ofd } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconCommentRectTextRegular24 } from '@skbkontur/icons/IconCommentRectTextRegular24';
import { IconLightbulbRegular24 } from '@skbkontur/icons/IconLightbulbRegular24';
import { IconBookOpenTextRegular24 } from '@skbkontur/icons/IconBookOpenTextRegular24';
import { IconBookmarkRegular24 } from '@skbkontur/icons/IconBookmarkRegular24';
import { IconStackHDownRegular24 } from '@skbkontur/icons/IconStackHDownRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { IconFaceAHappyRegular24 } from '@skbkontur/icons/IconFaceAHappyRegular24';
import { IconAttachLinkRegular24 } from '@skbkontur/icons/IconAttachLinkRegular24';

<div style={{height: '600px', position: 'relative'}}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
    <SideMenu>
          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
          <SideMenu.Body>
              <SideMenu.Item icon={<IconDocTextRegular24/>} caption={'Документы к подписанию'} marker={'2'}>
                  <SideMenu.SubItem caption={'Входящие'}/>
                  <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
                      <SideMenu.SubItem caption={'Исходящие1'}/>
                      <SideMenu.SubItem caption={'Исходящие2'}/>
                  </SideMenu.SubItem>
                  <SideMenu.SubItem caption={'Внутренние'} marker/>
                  <SideMenu.SubItem caption={'Черновики'}/>
                  <SideMenu.SubItem caption={'Удаленные'}/>
                  <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
                  <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
                  <SideMenu.SubItem caption={'Требуют обработки'}/>
                  <SideMenu.SubItem caption={'Обработанные'}/>
              </SideMenu.Item>
              <SideMenu.Item icon={<IconFaceAHappyRegular24 />} caption={'Контрагенты'} marker/>
              <SideMenu.Item icon={<IconCommentRectTextRegular24/>} caption={'Сообщения'} marker={'5'}>
                  <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
                  <SideMenu.SubItem caption={'Исходящие'}/>
                  <SideMenu.SubItem caption={'Внутренние'}/>
                  <SideMenu.SubItem caption={'Черновики'}/>
                  <SideMenu.SubItem caption={'Удаленные'}/>
              </SideMenu.Item>
              <SideMenu.Item icon={<IconLightbulbRegular24/>} caption={'Справочная'}/>
            <SideMenu.Divider/>
              <SideMenu.Link href={'https://google.com'} icon={<IconAttachLinkRegular24 />} caption={'Ссылка'} target={'_blank'}/>
              <SideMenu.Item icon={<IconBookOpenTextRegular24/>} caption={'Еще раздел'}/>
              <SideMenu.Item icon={<IconBookmarkRegular24/>} caption={'Отчетность'}/>
          </SideMenu.Body>
          <SideMenu.Footer>
              <SideMenu.Organisations icon={<IconStackHDownRegular24/>}>
                  <MenuItem>СКБ Контур</MenuItem>
                  <MenuItem>Сириус Базинес</MenuItem>
                  <MenuItem>Контур НТТ</MenuItem>
                  <MenuItem>Промэлектроника</MenuItem>
                  <MenuSeparator />
                  <MenuItem>Список организаций</MenuItem>
              </SideMenu.Organisations>
              <SideMenu.Item icon={<IconSettingsGearRegular24/>} caption={'Реквизиты и настройки'}/>
              <SideMenu.Avatar
                  userName={'Ишматова Елена'}
                  avatarUrl={getKonturAvatarUrl({
                      userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
                  })}
              >
                <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
                  Личный кабинет
                </MenuItem>
                <MenuItem >Безопасность</MenuItem>
                <MenuSeparator />
                <MenuItem >Выйти</MenuItem>
              </SideMenu.Avatar>
          </SideMenu.Footer>
      </SideMenu>
  </ThemeContext.Provider>
</div>
```

С меню второго уровня в отдельной колонке

```jsx harmony
import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Buhgalteria, Kontur } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator } from '@skbkontur/react-ui';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconCommentRectTextRegular24 } from '@skbkontur/icons/IconCommentRectTextRegular24';
import { IconLightbulbRegular24 } from '@skbkontur/icons/IconLightbulbRegular24';
import { IconBookOpenTextRegular24 } from '@skbkontur/icons/IconBookOpenTextRegular24';
import { IconBookmarkRegular24 } from '@skbkontur/icons/IconBookmarkRegular24';
import { IconStackHDownRegular24 } from '@skbkontur/icons/IconStackHDownRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { IconFaceAHappyRegular24 } from '@skbkontur/icons/IconFaceAHappyRegular24';

const [opened, setOpened] = React.useState(false);

const open = () => {
  setOpened(true);
}

const close = () => {
  setOpened(false);
}

const linearLightGradient = `repeating-linear-gradient(
                                60deg,
                                #fafafa,
                                #fafafa 20px,
                                #dfdede 20px,
                                #dfdede 40px
                              )`

const renderModal = () => {
  return (
    <Modal onClose={close}>
      <Modal.Header>Выбор организации</Modal.Header>
      <Modal.Body>
        <Input/>
        <div>Список организаций</div>
      </Modal.Body>
    </Modal>
  );
}

<div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' })}>
    <SideMenu isSeparatedMenu={true}>
      <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
      <SideMenu.Body>
        <SideMenu.Item icon={<IconDocTextRegular24/>} caption={'Документы'} marker={'2'}>
          <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
            <SideMenu.SubItem caption={'Входящие 1'}>
              <SideMenu.SubItem caption={'Входящие11'}>
                <SideMenu.SubItem caption={'Входящие111'}/>
                <SideMenu.SubItem caption={'Входящие112'}/>
                <SideMenu.SubItem caption={'Входящие113'}/>
              </SideMenu.SubItem>
              <SideMenu.SubItem caption={'Входящие12'}/>
              <SideMenu.SubItem caption={'Входящие13'}/>
            </SideMenu.SubItem>
            <SideMenu.SubItem caption={'Входящие2'}>
              <SideMenu.SubItem caption={'Входящие21'}>
                <SideMenu.SubItem caption={'Входящие211'}/>
                <SideMenu.SubItem caption={'Входящие212'}/>
                <SideMenu.SubItem caption={'Входящие213'}/>
              </SideMenu.SubItem>
              <SideMenu.SubItem caption={'Входящие22'}/>
              <SideMenu.SubItem caption={'Входящие23'}/>
            </SideMenu.SubItem>
            <SideMenu.SubItem caption={'Входящие3'}/>
          </SideMenu.SubItem>
          <SideMenu.SubItem caption={'Исходящие'}/>
          <SideMenu.SubItem caption={'Внутренние'}/>
          <SideMenu.SubItem caption={'Черновики'}/>
          <SideMenu.SubItem caption={'Удаленные'}/>
          <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
          <SideMenu.SubItem caption={'Требуют обработки'}/>
          <SideMenu.SubItem caption={'Обработанные'}/>
        </SideMenu.Item>
        <SideMenu.Item icon={<IconFaceAHappyRegular24 />} caption={'Контрагенты'}/>
        <SideMenu.Item icon={<IconCommentRectTextRegular24/>} caption={'Сообщения'} marker={'5'}>
          <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
          <SideMenu.SubItem caption={'Исходящие'}/>
          <SideMenu.SubItem caption={'Внутренние'}/>
          <SideMenu.SubItem caption={'Черновики'}/>
          <SideMenu.SubItem caption={'Удаленные'}/>
        </SideMenu.Item>
        <SideMenu.Item icon={<IconLightbulbRegular24/>} caption={'Справочная'}/>
        <SideMenu.Divider />
        <SideMenu.Item icon={<IconBookOpenTextRegular24/>}  caption={'Еще раздел'}/>
        <SideMenu.Item icon={<IconBookmarkRegular24/>} caption={'Отчетность'}/>
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<IconStackHDownRegular24/>} caption={'СКБ Контур'} onClick={open} isButton={true}/>
        <SideMenu.Item icon={<IconSettingsGearRegular24/>} caption={'Реквизиты и настройки'}/>
        <SideMenu.Avatar
          userName={'Ишматова Елена'}
          avatarUrl={getKonturAvatarUrl({
            userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
          })}
        >
          <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
            Личный кабинет
          </MenuItem>
          <MenuItem >Безопасность</MenuItem>
          <MenuSeparator />
          <MenuItem >Выйти</MenuItem>
        </SideMenu.Avatar>
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
    {'Content '.repeat(100)}
    {opened && renderModal()}
  </div>
</div>
```

С ручным управлением

Для управления активным пунктом меню используйте проп `activeItem`.

Для `SideMenu.Link` при отсутствии `id` будет использован `href`

```jsx harmony
import { useState } from 'react';
import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Kontur, Ofd } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator} from '@skbkontur/react-ui';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconCommentRectTextRegular24 } from '@skbkontur/icons/IconCommentRectTextRegular24';
import { IconLightbulbRegular24 } from '@skbkontur/icons/IconLightbulbRegular24';
import { IconBookOpenTextRegular24 } from '@skbkontur/icons/IconBookOpenTextRegular24';
import { IconBookmarkRegular24 } from '@skbkontur/icons/IconBookmarkRegular24';
import { IconStackHDownRegular24 } from '@skbkontur/icons/IconStackHDownRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { IconFaceAHappyRegular24 } from '@skbkontur/icons/IconFaceAHappyRegular24';
import { IconAttachLinkRegular24 } from '@skbkontur/icons/IconAttachLinkRegular24';


const [activeItem, setActiveItem] = useState('122');
const [isSeparatedMenu, setIsSeparatedMenu] = useState(false)
const items = [
  "100",
  "110",
  "120",
  "121",
  "122",
  "130",
  "140",
  "150",
  "160",
  "170",
  "200",
  "300",
  "310",
  "320",
  "330",
  "340",
  "350",
  "400",
  "500",
  "600",
  "https://google.com"
];

<div style={{ height: '600px', display: 'flex', position: 'relative' }}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
    <SideMenu activeItem={activeItem} onActiveItemChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} withWidget={false} />
      <SideMenu.Body>
        <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию id=100'} marker={'2'} id={'100'}>
          <SideMenu.SubItem caption={'Входящие id=110'} id={'110'} />
          <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
            <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'} />
            <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'} />
          </SideMenu.SubItem>
          <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'} />
          <SideMenu.SubItem caption={'Черновики id=140'} id={'140'} />
          <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'} />
          <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
          <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'} />
          <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'} />
        </SideMenu.Item>
        <SideMenu.Item icon={<IconFaceAHappyRegular24 />} caption={'Контрагенты id=200'} id={'200'} />
        <SideMenu.Item icon={<IconCommentRectTextRegular24 />} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
          <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'} />
          <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'} />
          <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'} />
          <SideMenu.SubItem caption={'Черновики id=340'} id={'340'} />
          <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'} />
        </SideMenu.Item>
        <SideMenu.Item icon={<IconLightbulbRegular24 />} caption={'Справочная id=400'} id={'400'} />
        <SideMenu.Divider />
        <SideMenu.Item icon={<IconBookOpenTextRegular24 />} caption={'Еще раздел id=500'} id={'500'} />
        <SideMenu.Item icon={<IconBookmarkRegular24 />} caption={'Отчетность id=600'} id={'600'} />
        <SideMenu.Link href={'https://google.com'} icon={<IconAttachLinkRegular24 />} caption={'Ссылка'}
                       target={'_blank'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Dropdown icon={<IconStackHDownRegular24 />}>
          <MenuItem>СКБ Контур</MenuItem>
          <MenuItem>Сириус Базинес</MenuItem>
          <MenuItem>Контур НТТ</MenuItem>
          <MenuItem>Промэлектроника</MenuItem>
          <MenuSeparator />
          <MenuItem>Список организаций</MenuItem>
        </SideMenu.Dropdown>
        <SideMenu.Item icon={<IconSettingsGearRegular24 />} caption={'Реквизиты и настройки'} />
        <SideMenu.Avatar
          userName={'Ишматова Елена'}
          avatarUrl={getKonturAvatarUrl({
            userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
          })}
        >
          <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
            Личный кабинет
          </MenuItem>
          <MenuItem>Безопасность</MenuItem>
          <MenuSeparator />
          <MenuItem>Выйти</MenuItem>
        </SideMenu.Avatar>
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
  <div style={isSeparatedMenu ? { position: 'absolute', left: '464px' } : {}}>
    <p>Active Item: {activeItem}</p>
    <Select items={items} value={activeItem} onValueChange={setActiveItem} />
    <Switcher
      caption="isSeparatedMenu: "
      items={[
        {
          label: 'True',
          value: true,
        },
        {
          label: 'False',
          value: false,
        }
      ]
      }
      value={isSeparatedMenu}
      onValueChange={setIsSeparatedMenu}
    />
  </div>
</div>
```

### Адаптивность
Брейкпойнты можно менять через пропы:

`desktopMediaQuery`
`narrowDesktopMediaQuery`
`tabletMediaQuery`
`mobileMediaQuery`

Либо через переменные темы:

`sideMenuDesktopMediaQuery = '(min-width: 1200px)';`
`sideMenuNarrowDesktopMediaQuery = '(min-width: 992px)';`
`sideMenuTabletMediaQuery = '(min-width: 768px)';`
`sideMenuMobileMediaQuery = '(min-width: 0px)';`

Для того чтобы пропускать брекпойнты, достаточно указать значение, равное следующему за ним брейкпойнту.
Например, в следующем случае у `SideMenu` не будет адаптива для планшетов:

`<SideMenu tabletMediaQuery={'(min-width: 768px)'} narrowDesktopMediaQuery={'(min-width: 768px)'}/>`

Пример встраивания SideMenu с адаптивом (более наглядно в [песочнице](https://codesandbox.io/s/dark-waterfall-5b4fkh?file=/src/App.js)):

```jsx static
<div className="App">
  <div className="layout">
    <div className="menu">
      <SideMenu />
    </div>
    <div className="content">
      ...
    </div>
  </div>
</div>

<style>
{`
  .layout {
    display: flex;
    flex-direction: column;
  }

  .layout .menu {
    height: 68px;
  }

  @media screen and (min-width: 992px) {
      .layout {
          flex-direction: row;
          height: 100vh;
      }

      .layout .menu {
          height: 100%;
      }
  }
`}
</style>
 ```


### Роутинг

Компонент `SideMenu.Link` можно использовать, например, вместе с `react-router-dom`.

Для этого можно сделать подобную обёртку:


```ts static
// react-router-dom v6
import { useNavigate } from "react-router-dom";

interface SideMuneReLinkProps extends SideMenuLinkProps {
  href: string;
}

const SideMuneReLink: React.FunctionComponent<SideMuneReLinkProps> = (
  props
) => {
  const navigate = useNavigate();

  return (
    <SideMenu.Link
      {...props}
      onClick={(e) => {
        e.preventDefault();
        navigate(props.href);
      }}
    />
  );
};
```

Пример `v6` в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-v6-4cl188?file=/src/App.tsx).

---

В предыдущей мажорной версии хук назывался иначе - `useHistory`.

```ts static
// react-router-dom v5
import { useHistory } from "react-router-dom";
```


Пример `v5` в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-v5-0ipgj4?file=/src/App.tsx).


В самом пакете `react-router-dom v5` обработчик клика немного умнее.
Например, он игнорирует клики с модификаторами, чтобы ссылка отрабатывала привычным способом.

Детали реализации можно посмотреть здесь: https://github.com/remix-run/react-router/blob/v5/packages/react-router-dom/modules/Link.js#L36


При необходимости вы можете повторить часть этой логики в своей обёртке.

---

Также можно использовать `SideMenu.Link` передав туда компонент ссылки, например обертку со ссылкой из `react-router-dom`:

```ts static
import { Link } from 'react-router-dom';

interface SideMenuReactRouterLinkProps extends SideMenuLinkProps {
  href: string;
}

const LinkWrapper = React.forwardRef<HTMLAnchorElement, SideMenuReactRouterLinkProps>(({ href, ...rest }, ref) => (
  <Link {...rest} to={href} ref={ref} />
));

const SideMenuReactRouterLink: React.FunctionComponent<SideMenuReactRouterLinkProps> = (props) => (
  <SideMenu.Link {...props} component={LinkWrapper} />
);
```

Если вы используете кастомную ссылку, то убедитесь, что она прокидывает `ref` и остальные пропсы в корневой элемент.

Пример в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-vtv6r8)

## Подключение виджета уведомлений `SideMenu.Notifications`

- [Документация виджета уведомлений](https://wiki.skbkontur.ru/pages/viewpage.action?pageId=952721322)
- [Поддержка в ~notification-support](https://chat.skbkontur.ru/kontur/channels/notification-support)

```jsx harmony
import { SideMenu } from '@skbkontur/side-menu';

<SideMenu>
  <SideMenu.Body>
    <SideMenu.Notifications
      widgetApi={widgetApi}
      count={count}
      showDivider
    />
  </SideMenu.Body>
</SideMenu>
```

#### Пример кастомизации

```jsx harmony
import { Kontur, Ofd } from '@skbkontur/logos';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';

<div style={{ height: '200px', position: 'relative' }}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px', sideMenuProductColor: '#64b419' })}>
    <SideMenu>
      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
      <SideMenu.Body>
        <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} marker={'2'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<IconSettingsGearRegular24 />} caption={'Реквизиты и настройки'} />
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
</div>
```

#### Пример с использованием пропа `isOpen`

```jsx harmony
import { Kontur, Ofd } from '@skbkontur/logos';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';

const [isOpen, setIsOpen] = React.useState(true);

<div style={{ height: '200px', position: 'relative', display: 'flex' }}>
  <ThemeContext.Provider
    value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuProductColor: '#64b419' })}>
    <SideMenu isOpen={isOpen} onOpen={() => console.log('onOpen')} onClose={() => console.log('onClose')}>
      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
      <SideMenu.Body>
        <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<IconSettingsGearRegular24 />} caption={'Реквизиты и настройки'} />
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
  <Button onClick={() => {
    setIsOpen(!isOpen)
  }}>{isOpen ? 'Закрыть меню' : 'Открыть меню'}</Button>
</div>
```

#### Пример с использованием пропа `isPinned`

```jsx harmony
import { Kontur, Ofd } from '@skbkontur/logos';
import { SideMenu } from '@skbkontur/side-menu';
import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';

const [isPinned, setIsPinned] = React.useState(localStorage.getItem('sideMenuIsPinned') === 'true');

React.useEffect(() => {
  window.addEventListener('storage', () => {
    setIsPinned(localStorage.getItem('sideMenuIsPinned') === 'true');
  });
}, []);

<div style={{ height: '200px', position: 'relative', display: 'flex' }}>
  <ThemeContext.Provider
    value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuProductColor: '#64b419' })}>
    <SideMenu isPinned={isPinned}
              onPinnedValueChange={(isPinned) => {
                localStorage.setItem('sideMenuIsPinned', String(isPinned));
              }}>
      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
      <SideMenu.Body>
        <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<IconSettingsGearRegular24 />} caption={'Реквизиты и настройки'} />
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
</div>
```

#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))

```typescript static
{
  sideMenuWidth: string;
  sideMenuWidthForTouchScreens: string;
  sideMenuMinimizedWidth: string;
  sideMenuMarginX: string;
  sideMenuBgColor: string;
  sideMenuBoxShadowOffsetX: string;
  sideMenuBoxShadowOffsetY: string;
  sideMenuBoxShadowBlurRadius: string;
  sideMenuBoxShadowColor: string;
  sideMenuBoxShadow: string;
  sideMenuLineHeight: string;
  sideMenuLargeLineHeight: string;
  sideMenuProductColor: string;
  sideMenuDividerBgColor: string;
  sideMenuDesktopMediaQuery: string;
  sideMenuNarrowDesktopMediaQuery: string;
  sideMenuTabletMediaQuery: string;
  sideMenuMobileMediaQuery: string;
  //#region SeparatedSubMenu
  sideMenuSeparatedSubMenuBgColor: string;
  sideMenuSeparatedSubMenuBorderRightColor: string;
  sideMenuSeparatedSubMenuPaddingY: string;
  sideMenuSeparatedSubMenuPaddingX: string;
  //#endregion
  //#region NestedMenu
  sideMenuNestedMenuPaddingLeft: string;
  //#endregion
  //#region RightBorder
  sideMenuRightBorderWidth: string;
  sideMenuRightBorderIconColor: string;
  sideMenuRightBorderHoverIconColor: string;
  // #region BackButton (for Mobiles)
  sideMenuBackButtonCaptionFontWeight: string;
  sideMenuBackButtonCaptionFontSize: string;
  sideMenuBackButtonCaptionLineHeight: string;
  sideMenuBackButtonCaptionPaddingY: string;
  sideMenuBackButtonIconPaddingLeft: string;
  sideMenuBackButtonIconPaddingRight: string;
  //#endregion
  // #region Burger (for Mobiles or Tablets)
  sideMenuBurgerMarginRight: string;
  //#endregion
}
```