How to make a Semantic Ui React Sidebar With Dropdown

Question

Im trying to achieve `Semantic Ui React Sidebar With Dropdown

I want it like this:

I know its a lot to request but i hope you help me... Im trying to add a dropdown on my menu

This is my current sidebar code:

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>
  );
}

and it looks like this:

Btw here is where i get the sidebar code... https://react.semantic-ui.com/modules/sidebar/

Help a newbie out? Thanks so much in advance!!!

Answer 1

Check this codesandbox which implements basic expand/collapse functionality but without icons. You can adapt the logic to your code.

The main idea is to store the expanded/collapsed menus in your state

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

and depending on their state, to show hide sub menu items.

  <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>