react-antd-dashboard/build/layout/SideMenu/index.js

React dashboard layout solution created using AntD and permission based navigation. Supports theming with Less, parameterized routes and private routing. Contains useful components for dashboard application.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from "react";
import "./index.css";
import { Menu, Layout } from "antd";
const {
  SubMenu
} = Menu;
const {
  Sider
} = Layout;
let dom = {};

try {
  dom = require('react-router-dom');
} catch (e) {}

const {
  Link,
  withRouter
} = dom;

class SideMenu extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "onCollapse", collapsed => {
      localStorage.setItem("collapsedMenu", collapsed);
      this.setState({
        collapsed
      });
    });

    _defineProperty(this, "renderMenuItem", item => {
      const {
        key,
        icon,
        value
      } = item;
      return /*#__PURE__*/React.createElement(Menu.Item, {
        key: key
      }, /*#__PURE__*/React.createElement(Link, {
        to: `/${key}`
      }, icon, " ", /*#__PURE__*/React.createElement("span", null, value)));
    });

    _defineProperty(this, "renderMenuItems", () => {
      const items = this.props.menuItems || [];
      return items.map(item => {
        if (!item.subItems || item.subItems.length === 0) {
          return this.renderMenuItem(item);
        } else {
          return /*#__PURE__*/React.createElement(SubMenu, {
            key: item.key,
            title: /*#__PURE__*/React.createElement("span", null, item.icon, /*#__PURE__*/React.createElement("span", null, item.value))
          }, item.subItems.map(subItem => this.renderMenuItem(subItem)));
        }
      });
    });

    this.state = {
      collapsed: localStorage.getItem("collapsedMenu") === "true",
      item: null
    };
  }

  componentWillUnmount() {
    this.unlisten();
  }

  componentDidMount() {
    const path = this.props.location.pathname;
    const item = path !== "/" ? path.substr(1) : this.props.menuItems[0].key || null;
    this.setState({
      item: item
    });
    this.unlisten = this.props.history.listen((location, action) => {
      const path = location.pathname;
      const item = path !== "/" ? path.substr(1) : this.props.menuItems[0].key || null;
      this.setState({
        item: item
      });
    });
  }

  render() {
    const logo = this.props.logo || null;
    const expandedLogo = this.props.expandedLogo || null;
    return /*#__PURE__*/React.createElement(Sider, {
      collapsible: true,
      collapsed: this.state.collapsed,
      onCollapse: this.onCollapse
    }, this.props.collapsed ? logo && /*#__PURE__*/React.createElement("img", {
      src: logo,
      alt: "logo",
      className: "side-menu-logo"
    }) : expandedLogo && /*#__PURE__*/React.createElement("img", {
      src: expandedLogo,
      alt: "logo",
      className: "side-menu-logo"
    }), /*#__PURE__*/React.createElement(Menu, {
      theme: "dark",
      selectedKeys: [this.state.item],
      mode: "inline"
    }, this.renderMenuItems()));
  }

}

let whatToExport;

if (dom.Route) {
  whatToExport = withRouter(SideMenu);
} else {
  whatToExport = props => /*#__PURE__*/React.createElement("div", null, "No React Router");
}

export default whatToExport;