@skbkontur/side-menu NPM

SideMenu в фирменном стиле (макеты живут здесь).

Для корректной работы SideMenu с версии 1.11.0 необходим пакет @skbkontur/react-ui версии 4.20.0 или выше

import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Kontur, Ofd } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';

<div style={{height: '600px', position: 'relative'}}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
    <SideMenu>
          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
          <SideMenu.Body>
              <SideMenu.Item icon={<DocTextIcon24Regular/>} 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={<FaceAHappyIcon24Regular />} caption={'Контрагенты'} marker/>
              <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} 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={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
            <SideMenu.Divider/>
              <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
              <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
              <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
          </SideMenu.Body>
          <SideMenu.Footer>
              <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
                  <MenuItem>СКБ Контур</MenuItem>
                  <MenuItem>Сириус Базинес</MenuItem>
                  <MenuItem>Контур НТТ</MenuItem>
                  <MenuItem>Промэлектроника</MenuItem>
                  <MenuSeparator />
                  <MenuItem>Список организаций</MenuItem>
              </SideMenu.Organisations>
              <SideMenu.Item icon={<SettingsGearIcon24Regular/>} 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>

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

import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Buhgalteria, Kontur } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';

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' }, THEME_2022)}>
    <SideMenu isSeparatedMenu={true}>
      <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
      <SideMenu.Body>
        <SideMenu.Item icon={<DocTextIcon24Regular/>} 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={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
        <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} 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={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
        <SideMenu.Divider />
        <SideMenu.Item icon={<BookOpenTextIcon24Regular/>}  caption={'Еще раздел'}/>
        <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open} isButton={true}/>
        <SideMenu.Item icon={<SettingsGearIcon24Regular/>} 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>

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

import { useState } from 'react';
import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Kontur, Ofd } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
import { AttachLinkIcon24Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon24Regular';


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' }, THEME_2022)}>
    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
          <SideMenu.Body>
              <SideMenu.Item icon={<DocTextIcon24Regular/>} 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={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
              <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} 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={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
              <SideMenu.Divider />
              <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
              <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
            <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
          </SideMenu.Body>
          <SideMenu.Footer>
              <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
                  <MenuItem>СКБ Контур</MenuItem>
                  <MenuItem>Сириус Базинес</MenuItem>
                  <MenuItem>Контур НТТ</MenuItem>
                  <MenuItem>Промэлектроника</MenuItem>
                  <MenuSeparator />
                  <MenuItem>Список организаций</MenuItem>
              </SideMenu.Dropdown>
              <SideMenu.Item icon={<SettingsGearIcon24Regular/>} 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>

Если не хочется передавать свой id, то для ручного управления можно воспользоваться автоматически сгенерированными айдишниками. А также комбинировать свои id с автоматически сгенерированными.

Автоматическая генерация айдишников происходит по следующей схеме: элементы меню первого уровня получают id равный body-x, где x - индекс элемента. Элементы меню следующих уровней добавляют свой индекс: body-x-y.

Например, в пункте Документы к подписанию передан проп id='documents', а также есть автоматически сгенерированный id='body-0'. Управлять можно по любому из них.

import { useState } from 'react';
import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
import { Kontur, Ofd } from '@skbkontur/logos';
import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';



const [activeItem, setActiveItem] = useState(undefined);
const [isSeparatedMenu, setIsSeparatedMenu] = useState(false)

const items = [
  'body-0',
  'documents',
  'body-0-0',
  'my-id-for-incoming-documents',
  'body-0-1',
  'body-0-1-0',
  'body-0-1-1',
  'body-0-2',
  'body-0-3',
  'body-0-4',
  'body-0-5',
  'body-0-6',
  'body-1',
  'body-2',
  'body-2-0',
  'body-2-1',
  'body-2-2',
  'body-2-3',
  'body-2-4',
  'body-3',
  'body-4',
  'body-5',
  '600',
  'footer-0',
  'footer-1',
  'footer-2',
];

<div style={{height: '600px', display: 'flex', position: 'relative'}}>
  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
          <SideMenu.Body>
              <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'} id={'documents'}>
                  <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
                  <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
                      <SideMenu.SubItem caption={'Исходящие1'}/>
                      <SideMenu.SubItem caption={'Исходящие2'}/>
                  </SideMenu.SubItem>
                  <SideMenu.SubItem caption={'Внутренние'}/>
                  <SideMenu.SubItem caption={'Черновики'}/>
                  <SideMenu.SubItem caption={'Удаленные'}/>
                  <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
                  <SideMenu.SubItem caption={'Требуют обработки'}/>
                  <SideMenu.SubItem caption={'Обработанные'}/>
              </SideMenu.Item>
              <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
              <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} 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={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
              <SideMenu.Divider />
              <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
              <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
          </SideMenu.Body>
          <SideMenu.Footer>
              <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
                  <MenuItem>СКБ Контур</MenuItem>
                  <MenuItem>Сириус Базинес</MenuItem>
                  <MenuItem>Контур НТТ</MenuItem>
                  <MenuItem>Промэлектроника</MenuItem>
                  <MenuSeparator />
                  <MenuItem>Список организаций</MenuItem>
              </SideMenu.Organisations>
              <SideMenu.Item icon={<SettingsGearIcon24Regular/>} 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 с адаптивом (более наглядно в песочнице):

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

где

  .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%;
      }
  }

Роутинг

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

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

// 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 в песочнице.

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

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

Пример v5 в песочнице.

В самом пакете 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:

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 и остальные пропсы в корневой элемент.

Пример в песочнице

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

import { Kontur, Ofd } from '@skbkontur/logos';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
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={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'2'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
</div>

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

import { Kontur, Ofd } from '@skbkontur/logos';
import { SideMenu } from './index';
import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
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={<DocTextIcon24Regular />} caption={'Документы к подписанию'} />
      </SideMenu.Body>
      <SideMenu.Footer>
        <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
      </SideMenu.Footer>
    </SideMenu>
  </ThemeContext.Provider>
  <Button onClick={() => {
    setIsOpen(!isOpen)
  }}>{isOpen ? 'Закрыть меню' : 'Открыть меню'}</Button>
</div>

Переменные кастомизации (см. ThemeContext)

{
  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
}

@skbkontur/icons @skbkontur/react-ui-addons tslib

@everything-registry/sub-chunk-840 @zalastax/nolb-_skb

19 days ago

1 month ago

1 month ago

1 month ago

2 months ago