如何使用下拉菜单制作语义 UI React 侧边栏

Question

我正在尝试实现 `Semantic Ui React Sidebar With Dropdown

我想要这样：

我知道有很多要求，但我希望你能帮助我...我正在尝试在我的菜单上添加一个下拉菜单

这是我当前的侧边栏代码：

import React from 'react';
import cn from 'classnames';
import { Icon, Menu } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

export default function Sidebar(props) {
  const classes = cn(
    'ui',
    'sidebar',
    'push',
    'left',
    'inverted',
    'menu',
    'vertical',
    'animating',
    { visible: props.toggleMenu }
  );

  return (
    <div className={classes}>
      <Menu.Item as={Link} to="/admin">
        Dashboard <Icon name="home" />
      </Menu.Item>
      <Menu.Item as={Link} to="/admin/orders">
        Orders
      </Menu.Item>
    </div>
  );
}

它看起来像这样：

顺便说一句，这是我获得侧边栏代码的地方...https://react.semantic-ui.com/modules/sidebar/

帮助新手？提前非常感谢！！！

Answer 1

检查this codesandbox，它实现了基本的展开/折叠功能但没有图标。 您可以使逻辑适应您的代码。

主要思想是将展开/折叠的菜单存储在您的状态

const [expandState, setExpandState] = useState({});

并根据它们的状态，显示隐藏子菜单项。

  <Menu.Item as={Link} to="/admin">
    <i className="fa fa-home" />
    Dashboard
    <span
      style={{ float: "right" }}
      onClick={() =>
        setExpandState({
          ...expandState,
          dashboard: !expandState.dashboard
        })
      }
    >
      Expand/Collapse
    </span>
    {expandState.dashboard ? (
      <Menu.Item as={Link} to="/admin/orders">
        Orders2
      </Menu.Item>
    ) : null}
  </Menu.Item>

Answer 2

将图标向左浮动

    <Icon name='home' style={{float : "left"}}/>

或

你可以使用css

***请检查班级名称***

    i {
      float: left;
      margin-right: 12px !important;
    }
    the menu item itself just becomes an a element
    
    a {
      text-align: center;
      line-height: 40px;
    }