Блог

Для меню моего проекта react я использовал MenuItem из «@blueprintjs / core», и, как показано на рисунке, при наведении курсора на пункт меню, у которого есть дочерние элементы, они открываются с правой стороны. Есть ли способ изменить это и открыть дочернее подменю под его родительским элементом?

 import React from 'react';
import { MenuItem } from '@blueprintjs/core';
import Style from './styled';

const leftMenu = () => {

const Items = createNav.map(menuItem => {
    let children;
    if ('children' in menuItem) {
        children = menuItem.children.map(child => {
            return (
                <MenuItem
                    icon={child.icon}
                    text={child.title}
                    href={child.path}
                    key={menuItem.path}
                    />
                );
            });
        }
        return (
            <Style.MenuItem
                icon={menuItem.icon}
                text={menuItem.title}
                href={menuItem.path}
                key={menuItem.path}
            >
                {children}
            </Style.MenuItem>
        );
    });
    return <Style.Menu>{Items}</Style.Menu>;
};

export default LeftMenu;
  

для оформления я использую styled-components

  const Menu = styled(bpMenu)`
     padding: 0 !important;
     background-color: transparent !important;
`;

const MenuItem = styled(Item)`
     background-color: red ;
     margin: 5px;
`;
  

открывается ли он автоматически? Я столкнулся с проблемой, подменю открывались автоматически, хотя я не зависал и не нажимал!!!

затем добавлено autoFocus={false} в popover2. вот мой пример кода

 <Popover2
     content={
       <>
        <Menu key="menu">
          <MenuItem icon="camera" text="Menu 1"></MenuItem>
          <MenuItem icon="dollar" text="Menu 2" disabled={true} />
          <MenuItem  icon="lifesaver" text="Football">
               <MenuItem icon="chart" text="Team 1" />
               <MenuItem icon="chart" text="Team 2" />
               <MenuItem icon="chart" text="Team 3" />
         </MenuItem>                                        
       </Menu>
      </>
     }
     position="bottom"
     interactionKind="hover"
     autoFocus={false}
>
     <Button
         text="vivid..."
         minimal
         large={false}
         className="b f5 white _btn_"
         intent="none"
         icon="share"
     />
</Popover2>
  

А для оформления панели навигации вы также можете следовать за панелью навигации blueprintjs