Material-UI Core Sidebar

This is the left menu rendered on the RTL and Admin layouts.

FREE

Short description and usage

This component is fully dynamic.

The dynamic stuff is rendered via props. The links that appears inside it and also, the brand logo is dynamic, and can be rendered as an inner link, or an outter link.

To see how the links should look like (since they are an object), please refer to our routing system.

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import FormControl from "@material-ui/core/FormControl";
import InputAdornment from "@material-ui/core/InputAdornment";
import InputLabel from "@material-ui/core/InputLabel";
import OutlinedInput from "@material-ui/core/OutlinedInput";
// @material-ui/icons components
import Search from "@material-ui/icons/Search";

// core components
import Sidebar from "components/Sidebar/Sidebar.js";
import NavbarDropdown from "components/Dropdowns/NavbarDropdown.js";

import routes from "routes.js";

const sidebarLogo = {
  innerLink: "/admin/index",
  imgSrc: require("assets/img/brand/argon-react.png").default,
  imgAlt: "...",
}

const Example = () => {
  return (
    <>
      <Sidebar
        routes={routes}
        logo={sidebarLogo}
        dropdown={<NavbarDropdown />}
        input={
          <FormControl variant="outlined" fullWidth>
            <InputLabel htmlFor="outlined-adornment-search-responsive">
              Search
            </InputLabel>
            <OutlinedInput
              id="outlined-adornment-search-responsive"
              type="text"
              endAdornment={
                <InputAdornment position="end">
                  <Box
                    component={Search}
                    width="1.25rem!important"
                    height="1.25rem!important"
                  />
                </InputAdornment>
              }
              labelWidth={70}
            />
          </FormControl>
        }
      />
    </>
  );
};

export default Example;

Props

Sidebar.defaultProps = {
  routes: [],
};

Sidebar.propTypes = {
  // this is the input/component that will be rendered on responsive
  // in our demo, we add this input component since the AdminNavbar
  // will not be visible on responsive mode
  input: PropTypes.node,
  // this is the dropdown/component that will be rendered on responsive
  // in our demo, it is the same with the dropdown from the AdminNavbar
  // since the AdminNavbar will not be visible on responsive mode
  dropdown: PropTypes.node,
  // NOTE: we recommend that your logo has the following dimensions
  // // 135x40 or 487x144 or a resize of these dimensions
  logo: PropTypes.shape({
    // innerLink is for links that will direct the user within the app
    // it will be rendered as <Link to="...">...</Link> tag
    innerLink: PropTypes.string,
    // outterLink is for links that will direct the user outside the app
    // it will be rendered as simple <a href="...">...</a> tag
    outterLink: PropTypes.string,
    // the image src of the logo
    imgSrc: PropTypes.string.isRequired,
    // the alt for the img
    imgAlt: PropTypes.string.isRequired,
  }),
  // links that will be displayed inside the component
  routes: PropTypes.arrayOf(
    PropTypes.oneOfType([
      // this generates an anchor (<a href="href">..</a>) link
      // this is a link that is sent outside the app
      PropTypes.shape({
        // if this is set to true, than the link will have an absolute position
        // use wisely and with precaution
        upgradeToPro: PropTypes.bool,
        href: PropTypes.string,
        name: PropTypes.string,
        icon: PropTypes.oneOfType([
          // this refers to icons such as ni ni-spaceship or fa fa-heart
          PropTypes.string,
          // this refers to icons from @material-ui/icons
          PropTypes.object,
        ]),
        iconColor: PropTypes.oneOf([
          "Primary",
          "PrimaryLight",
          "Error",
          "ErrorLight",
          "Warning",
          "WarningLight",
          "Info",
          "InfoLight",
        ]),
      }),
      // this generates a Link (<Link to="layout + path">..</Link>) link
      // this is a link that is sent inside the app
      PropTypes.shape({
        path: PropTypes.string,
        name: PropTypes.string,
        layout: PropTypes.string,
        component: PropTypes.func,
        icon: PropTypes.oneOfType([
          // this refers to icons such as ni ni-spaceship or fa fa-heart
          PropTypes.string,
          // this refers to icons from @material-ui/icons
          PropTypes.object,
        ]),
        iconColor: PropTypes.oneOf([
          "Primary",
          "PrimaryLight",
          "Error",
          "ErrorLight",
          "Warning",
          "WarningLight",
          "Info",
          "InfoLight",
        ]),
      }),
      // this is just a title without any action on it
      // you can think of it as a disabled link
      PropTypes.shape({
        title: PropTypes.string,
      }),
      // this is just a divider line
      PropTypes.shape({
        divider: true,
      }),
    ])
  ),
};

PRO

Short description and usage

This component has some static and some dynamic stuff rendered inside it.

The dynamic stuff is rendered via props. The links that appears inside it (minus the ones for the documentation - which are static) are dynamic. Also, the brand logo is dynamic, and can be rendered as an inner link, or an outter link.

To see how the links should look like (since they are an object), please refer to our routing system.

import React from "react";
...
// @material-ui/icons components

// core components

...

import Sidebar from "components/Sidebar/Sidebar.js";

...

const Admin = () => {
  ...
  const [sidebarOpenResponsive, setSidebarOpenResponsive] = React.useState(
    false
  );
  ...
  const logo = {
    innerLink: "/index",
    imgSrc: require("../assets/img/brand/argon-react.png").default,
    imgAlt: "...",
  };
  return (
    <>
      ...
        <Sidebar
          routes={routes}
          openResponsive={sidebarOpenResponsive}
          closeSidebarResponsive={() => setSidebarOpenResponsive(false)}
          logo={logo}
        />
      ...
    </>
  );
};

export default Admin;

Props

Sidebar.defaultProps = {
  routes: [],
  openResponsive: false,
  closeSidebarResponsive: () => {},
};

const commonProps = {
  name: PropTypes.string,
  // NOTE: you can either use miniName or icon, but not both
  // // // if you use both, only the icon will render
  miniName: PropTypes.string,
  icon: PropTypes.oneOfType([
    // this refers to icons such as ni ni-spaceship or fa fa-heart
    PropTypes.string,
    // this refers to icons from @material-ui/icons
    PropTypes.object,
  ]),
  iconColor: PropTypes.oneOf([
    "Primary",
    "PrimaryLight",
    "Error",
    "ErrorLight",
    "Warning",
    "WarningLight",
    "Info",
    "InfoLight",
    "Success",
    "SuccessLight",
    "Default",
  ]),
};

// this generates an anchor (<a href="href">..</a>) link
// this is a link that is sent outside the app
const hrefProp = PropTypes.shape({
  // if this is set to true, than the link will have an absolute position
  // use wisely and with precaution
  upgradeToPro: PropTypes.bool,
  href: PropTypes.string,
  ...commonProps,
});

// this generates a Link (<Link to="layout + path">..</Link>) link
// this is a link that is sent inside the app
const linkProp = PropTypes.shape({
  path: PropTypes.string,
  layout: PropTypes.string,
  component: PropTypes.func,
  ...commonProps,
});

const collapseProp = PropTypes.shape({
  collapse: true,
  // name of the collapse - needs to be unique
  state: PropTypes.string,
  // if you have multi level collapses,
  // you need to set this array to all of the
  // collapses you wish to keep open when opening
  // the multi level collapse
  multiStates: PropTypes.arrayOf(PropTypes.string),
  views: PropTypes.arrayOf(PropTypes.oneOfType([hrefProp, linkProp])),
  ...commonProps,
});

Sidebar.propTypes = {
  // use this to make the Sidebar open on responsive mode
  openResponsive: PropTypes.bool.isRequired,
  // callback for closing the Sidebar on responsive mode
  closeSidebarResponsive: PropTypes.func.isRequired,
  // this is the input/component that will be rendered on responsive
  // in our demo, we add this input component since the AdminNavbar
  // will not be visible on responsive mode
  input: PropTypes.node,
  // this is the dropdown/component that will be rendered on responsive
  // in our demo, it is the same with the dropdown from the AdminNavbar
  // since the AdminNavbar will not be visible on responsive mode
  dropdown: PropTypes.node,
  // NOTE: we recommend that your logo has the following dimensions
  // // 135x40 or 487x144 or a resize of these dimensions
  logo: PropTypes.shape({
    // innerLink is for links that will direct the user within the app
    // it will be rendered as <Link to="...">...</Link> tag
    innerLink: PropTypes.string,
    // outterLink is for links that will direct the user outside the app
    // it will be rendered as simple <a href="...">...</a> tag
    outterLink: PropTypes.string,
    // the image src of the logo
    imgSrc: PropTypes.string.isRequired,
    // the alt for the img
    imgAlt: PropTypes.string.isRequired,
  }),
  // links that will be displayed inside the component
  routes: PropTypes.arrayOf(
    PropTypes.oneOfType([
      hrefProp,
      linkProp,
      collapseProp,
      // this is just a title without any action on it
      // you can think of it as a disabled link
      PropTypes.shape({
        title: PropTypes.string,
      }),
      // this is just a divider line
      PropTypes.shape({
        divider: true,
      }),
    ])
  ),
};