Сворачиваемое боковое меню

Для работы с компонентами бокового меню необходимо установить библиотеку Ant Design и подключить её стили. Обычно это делается через npm:

npm install antd

Импорт базовых стилей выполняется в основном файле проекта:

import 'antd/dist/reset.css';

Боковое меню реализуется через компонент Layout.Sider в сочетании с Menu. Основной каркас выглядит так:

import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';

const { Sider } = Layout;

<Layout>
  <Sider collapsible>
    <Menu
      mode="inline"
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      style={{ height: '100%', borderRight: 0 }}
    >
      <Menu.SubMenu key="sub1" icon={<UserOutlined />} title="Пользователи">
        <Menu.Item key="1">Список пользователей</Menu.Item>
        <Menu.Item key="2">Добавить пользователя</Menu.Item>
      </Menu.SubMenu>
      <Menu.SubMenu key="sub2" icon={<LaptopOutlined />} title="Техника">
        <Menu.Item key="3">Компьютеры</Menu.Item>
        <Menu.Item key="4">Принтеры</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  </Sider>
</Layout>

Ключевые моменты:

  • collapsible делает боковое меню сворачиваемым.
  • defaultSelectedKeys и defaultOpenKeys задают активные элементы и открытые подменю по умолчанию.
  • icon позволяет использовать иконки из Ant Design Icons для визуального разделения пунктов.

Управление сворачиванием

Компонент Sider поддерживает управление состоянием через проп collapsed. Для динамического управления состоянием используется React-хук useState:

import { useState } from 'react';
import { Layout, Menu, Button } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

const { Sider } = Layout;

const CollapsibleSider = () => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapse = () => setCollapsed(!collapsed);

  return (
    <Layout>
      <Sider collapsible collapsed={collapsed} onColla pse={setCollapsed}>
        <Menu mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">Главная</Menu.Item>
          <Menu.Item key="2">Настройки</Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Button onCl ick={toggleCollapse} style={{ margin: 16 }}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
      </Layout>
    </Layout>
  );
};

Особенности управления:

  • collapsed хранит текущее состояние меню (свернуто/развернуто).
  • onCollapse автоматически получает новое состояние при клике на встроенный триггер Sider.
  • Кастомные кнопки для управления можно размещать в основной части макета.

Подменю и группировка элементов

Ant Design Menu поддерживает вложенные элементы через Menu.SubMenu. Это позволяет организовать логическую структуру, которая будет разворачиваться и сворачиваться вместе с Sider.

Пример с многоуровневым меню:

<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
  <Menu.SubMenu key="sub1" icon={<UserOutlined />} title="Пользователи">
    <Menu.Item key="1">Список пользователей</Menu.Item>
    <Menu.Item key="2">Добавить пользователя</Menu.Item>
    <Menu.SubMenu key="sub1-1" title="Роли">
      <Menu.Item key="3">Администраторы</Menu.Item>
      <Menu.Item key="4">Пользователи</Menu.Item>
    </Menu.SubMenu>
  </Menu.SubMenu>
</Menu>

Советы по структуре:

  • Использовать key уникально для каждого элемента, чтобы React корректно обновлял меню.
  • defaultOpenKeys можно использовать для предварительного открытия подменю.
  • Для длинных списков рекомендуется разбивать пункты на группы через SubMenu для удобства навигации.

Адаптивность и реакция на ширину экрана

Sider поддерживает автоматическое скрытие при уменьшении ширины экрана через проп breakpoint и collapsedWidth:

<Sider
  collapsible
  breakpoint="lg"
  collapsedWidth="0"
  onBreakpo int={broken => console.log(broken)}
>
  <Menu mode="inline" defaultSelectedKeys={['1']}>
    <Menu.Item key="1">Главная</Menu.Item>
    <Menu.Item key="2">Настройки</Menu.Item>
  </Menu>
</Sider>
  • breakpoint принимает значения xs, sm, md, lg, xl, xxl.
  • collapsedWidth="0" позволяет полностью скрывать меню на малых экранах.
  • onBreakpoint получает булево значение true/false для состояния точки перелома.

Кастомизация внешнего вида

Стилизация Sider и Menu возможна через встроенные стили, CSS-модули или styled-components. Основные свойства для кастомизации:

  • Фон и цвет текста: style={{ background: '#001529', color: '#fff' }}
  • Ширина: width={240}
  • Скрытие триггера: trigger={null}
  • Использование темной темы: theme="dark" для меню

Пример темного бокового меню:

<Sider collapsible theme="dark">
  <Menu mode="inline" defaultSelectedKeys={['1']} theme="dark">
    <Menu.Item key="1" icon={<UserOutlined />}>Главная</Menu.Item>
    <Menu.Item key="2" icon={<LaptopOutlined />}>Проекты</Menu.Item>
  </Menu>
</Sider>

Интеграция с React Router

Для навигации между страницами меню часто используют React Router. Сопоставление ключей и маршрутов выполняется через проп onClick:

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

<Menu
  mode="inline"
  onCl ick={({ key }) => navigate(key)}
>
  <Menu.Item key="/home">Главная</Menu.Item>
  <Menu.Item key="/settings">Настройки</Menu.Item>
</Menu>
  • key элемента соответствует маршруту.
  • onClick выполняет переход без перезагрузки страницы.
  • Подменю также можно интегрировать аналогично.

Производительность при большом количестве элементов

Для длинных списков рекомендуется использовать virtualized menu с библиотеками вроде react-window, чтобы снизить нагрузку на DOM.

Пример подхода:

  • Использовать массив данных для генерации пунктов через map.
  • Подменю создаются динамически при рендере.
const items = Array.from({ length: 1000 }, (_, i) => ({
  key: `item-${i}`,
  label: `Элемент ${i}`,
}));

<Menu mode="inline" items={items} />
  • Такой подход снижает ручное управление key и позволяет масштабировать меню.
  • Для больших структур рекомендуется разделять пункты на группы через SubMenu для удобства пользователя.

Анимация и пользовательский опыт

Ant Design автоматически добавляет анимацию при сворачивании и разворачивании Sider. Дополнительно можно управлять скоростью и эффектами через CSS-переходы.

  • Использовать transition: width 0.2s для плавного изменения ширины.
  • При кастомных иконках можно добавлять эффекты вращения или подсветки активного пункта.
  • Следить за контрастностью и читаемостью текста на темном фоне.

Такое построение сворачиваемого бокового меню обеспечивает полную функциональность, адаптивность под разные устройства, а также масштабируемость для крупных проектов, оставаясь при этом гибким для интеграции с маршрутизацией и кастомными стилями.

Оглавление