js-src/admin/components/header/AppMenu.tsx - develop - minimus/simple-view

js-src/admin/components/header/AppMenu.tsx
60 строк2 KB
minimus
feat: frontend galleries DataGrid
03 авг 2026, 18:54
03 авг 2026, 18:54633f599
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Link, Menu, MenuItem } from '@mui/material';
import React, { FC, useState, MouseEvent, useMemo, useCallback } from 'react';
import { useLocation, Link as RouterLink } from 'react-router-dom';
import { useShallow } from 'zustand/react/shallow';

import { useMainStore } from '../../data/stories/main/mainStore';

interface TMenuItem {
  title: string;
  link: string;
  key: 'galleries' | 'new-gallery' | 'settings';
  test: RegExp;
}

const AppMenu: FC = () => {
  const { localeStrings } = useMainStore(useShallow((state) => state));

  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
  const { menu: { galleries = '', newGallery = '', settings = '' } = {} } = localeStrings ?? {};

  const location = useLocation();
  const { pathname } = location;

  const menu: TMenuItem[] = useMemo(
    () => [
      { title: galleries, link: '/galleries', key: 'galleries', test: new RegExp(/^\/(galleries)?$/i) },
      { title: newGallery, link: '/galleries/new', key: 'new-gallery', test: new RegExp(/^\/galleries\/new$/i) },
      { title: settings, link: '/settings', key: 'settings', test: new RegExp(/^\/settings$/i) },
    ],
    [galleries, newGallery, settings],
  );

  const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
    setAnchorEl(event.currentTarget);
  }, []);

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);

  return (
    <>
      <IconButton size="large" edge="start" color="inherit" aria-label="Menu" sx={{ mr: 2 }} onClick={handleClick}>
        <MenuIcon />
      </IconButton>
      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}>
        {menu.map((item: TMenuItem) => (
          <MenuItem key={item.key} disabled={item.test.test(pathname) /*=== pathname*/} onClick={handleClose}>
            <Link key={`link-${item.key}`} component={RouterLink} to={item.link} underline="none" color="textPrimary">
              {item.title}
            </Link>
          </MenuItem>
        ))}
      </Menu>
    </>
  );
};

export default AppMenu;