Мобильное меню

Для создания мобильного меню в Ant Design (antd) используется компонент Drawer, который обеспечивает выдвижную панель, идеально подходящую для навигации на мобильных устройствах. Drawer позволяет управлять положением панели, её шириной, видимостью и поведением при закрытии.

import { Drawer, Button, Menu } from 'antd';
import { useState } from 'react';

const MobileMenu = () => {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => setVisible(true);
  const onCl ose = () => setVisible(false);

  return (
    <>
      <Button type="primary" onCl ick={showDrawer}>
        Открыть меню
      </Button>
      <Drawer
        title="Меню"
        placement="left"
        onCl ose={onClose}
        visible={visible}
      >
        <Menu mode="inline">
          <Menu.Item key="1">Главная</Menu.Item>
          <Menu.Item key="2">О нас</Menu.Item>
          <Menu.Item key="3">Контакты</Menu.Item>
        </Menu>
      </Drawer>
    </>
  );
};

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

  • placement – задаёт сторону, с которой выезжает меню (left, right, top, bottom). Для мобильного меню чаще используют left или right.
  • visible – управляет видимостью панели.
  • onClose – коллбэк для закрытия меню.

Адаптивность и переключение между десктопной и мобильной навигацией

В мобильных версиях сайта часто используется комбинация Drawer и обычного Menu для десктопа. Для реализации адаптивного поведения удобно использовать useMediaQuery или библиотеку react-responsive:

import { useMediaQuery } from 'react-responsive';

const isMobile = useMediaQuery({ maxWidth: 768 });

return (
  <>
    {isMobile ? <MobileMenu /> : <DesktopMenu />}
  </>
);

Рекомендации:

  • Разделять мобильное и десктопное меню позволяет оптимизировать производительность и улучшить UX.
  • В мобильной версии меню часто сворачивается в иконку «гамбургера» с использованием Button и MenuOutlined из @ant-design/icons.

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

Ant Design предоставляет возможность изменять стили компонентов через props, а также через styled-components или CSS-in-JS. Для Drawer и Menu доступны следующие параметры:

  • width – ширина выдвижного меню (например, width={250}).
  • closable – возможность отображения стандартного крестика для закрытия.
  • mask – включение/выключение затемнённого фона.
  • maskClosable – закрытие меню при клике на маску.
<Drawer
  title="Меню"
  placement="left"
  onCl ose={onClose}
  visible={visible}
  width={300}
  closable={false}
  maskClosable={true}
>
  <Menu mode="inline">
    <Menu.Item key="1">Главная</Menu.Item>
    <Menu.Item key="2">Услуги</Menu.Item>
    <Menu.Item key="3">Контакты</Menu.Item>
  </Menu>
</Drawer>

Вложенные меню и SubMenu

Для более сложной навигации можно использовать SubMenu, который поддерживает вложенные пункты:

import { Menu } from 'antd';

const { SubMenu } = Menu;

<Menu mode="inline">
  <Menu.Item key="1">Главная</Menu.Item>
  <SubMenu key="sub1" title="Услуги">
    <Menu.Item key="2">Дизайн</Menu.Item>
    <Menu.Item key="3">Разработка</Menu.Item>
  </SubMenu>
  <Menu.Item key="4">Контакты</Menu.Item>
</Menu>

Особенности для мобильного меню:

  • mode="inline" обеспечивает вертикальное расположение.
  • Для Drawer важно контролировать высоту и скролл, если количество пунктов большое.
  • Можно использовать CSS свойство overflow: auto; для прокрутки.

Анимации и плавное открытие

Ant Design поддерживает стандартные анимации при открытии Drawer, но для более выразительных эффектов можно подключить react-transition-group или CSS-переходы:

.ant-drawer-content-wrapper {
  transition: transform 0.3s ease-in-out;
}

Практическая рекомендация: Плавное открытие улучшает пользовательский опыт, особенно при медленном интернет-соединении на мобильных устройствах.

Интеграция с роутером

Для SPA часто используется react-router-dom, где пункты меню должны вести на разные маршруты:

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

<Menu mode="inline">
  <Menu.Item key="1">
    <Link to="/">Главная</Link>
  </Menu.Item>
  <Menu.Item key="2">
    <Link to="/about">О нас</Link>
  </Menu.Item>
</Menu>

Совет: После перехода по ссылке стоит автоматически закрывать Drawer через onClose, чтобы не оставлять меню открытым на новом экране.

Управление состоянием и контекст

Для сложных проектов можно использовать React Context или Redux для управления состоянием мобильного меню. Это позволяет:

  • Открывать/закрывать меню из разных компонентов.
  • Сохранять выбранный пункт меню при переходах между страницами.
  • Синхронизировать меню с другими элементами интерфейса, например, с шапкой или подвалом.
const MenuContext = React.createContext();

const MenuProvider = ({ children }) => {
  const [visible, setVisible] = useState(false);
  return (
    <MenuContext.Provider value={{ visible, setVisible }}>
      {children}
    </MenuContext.Provider>
  );
};

Оптимизация производительности

  • Минимизировать количество вложенных компонентов внутри Drawer, особенно при большом меню.
  • Использовать lazy loading для подменю с большим количеством элементов.
  • Контролировать рендеринг через React.memo для пунктов меню, чтобы не перегружать мобильное устройство.

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

Оглавление