Nextjs Core Sidebar

Pro Component

FREE

We’ve restyled the classic Material UI Drawer.

It comes in 5 different colors (just pass the color prop to it with one of the purple, blue, green, orange, red, white), option to set a background image (image), a option to set the brand text (logoText), a option to set the logo image (logo) and a option to set the routes / links to be displayed in it (routes).

Style

You will find the styles for this component in assets/jss/nextjs-material-dashboard/components/sidebarStyle.js.

Usage

import Sidebar from 'components/Sidebar/Sidebar.js';
import appRoutes from 'routes/app.js';
import image from 'assets/img/sidebar-1.jpg';
import logo from 'assets/img/reactlogo.png';

const [mobileOpen,setMobileOpen] = React.useState(false);

const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
};

<Sidebar
    routes={appRoutes}
    logoText={"Creative Tim"}
    logo={logo}
    image={image}
    handleDrawerToggle={handleDrawerToggle}
    open={mobileOpen}
    color="blue"
    {...rest}
/>

Props

Sidebar.propTypes = {
  rtlActive: PropTypes.bool,
  handleDrawerToggle: PropTypes.func,
  bgColor: PropTypes.oneOf([
    "white",
    "purple",
    "blue",
    "green",
    "orange",
    "red",
  ]),
  logo: PropTypes.string,
  image: PropTypes.string,
  logoText: PropTypes.string,
  routes: PropTypes.arrayOf(PropTypes.object),
  open: PropTypes.bool,
};

PRO

This is the main navigation of the Admin layout. It’s position is on left, and if you’re on RTL it is on the right side of the window.

To change our demo user, you need to change lines 134-221.

Between lines 31-55 there is a custom made component in which we render the links, links from the header (top navigation of our demo) and the user collapse. We’ve done this so that we can initialize and use PerfectScrollbar for Windows users.

Style

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro/components/sidebarStyle.js.

Usage

import React from "react";
...

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

import routes from "routes.js";

...

import image from "assets/img/sidebar-2.jpg";
import logo from "assets/img/logo-white.svg";

...

export default function YourCOmponentName(){
  ...
  const [mobileOpen,setMobileOpen] = React.useState(false);
  const [miniActive,setMiniActive] = React.useState(false);
  const [image,setImage] = React.useState(image);
  const [color,setColor] = React.useState("blue");
  const [bgColor,setBgColor] = React.useState("black");
  ...
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };
  ...
  return (
    ...
      <Sidebar
        routes={routes}
        logoText={"Creative Tim"}
        logo={logo}
        image={this.state.image}
        handleDrawerToggle={this.handleDrawerToggle}
        open={this.state.mobileOpen}
        color={this.state.color}
        bgColor={this.state.bgColor}
        miniActive={this.state.miniActive}
        {...rest}
      />
    ...
  );
}

...

Props

Sidebar.defaultProps = {
  bgColor: "blue",
};

Sidebar.propTypes = {
  classes: PropTypes.object.isRequired,
  bgColor: PropTypes.oneOf(["white", "black", "blue"]),
  rtlActive: PropTypes.bool,
  color: PropTypes.oneOf([
    "white",
    "red",
    "orange",
    "green",
    "blue",
    "purple",
    "rose",
  ]),
  logo: PropTypes.string,
  logoText: PropTypes.string,
  image: PropTypes.string,
  routes: PropTypes.arrayOf(PropTypes.object),
  miniActive: PropTypes.bool,
  open: PropTypes.bool,
  handleDrawerToggle: PropTypes.func,
};

SidebarWrapper.propTypes = {
  className: PropTypes.string,
  user: PropTypes.object,
  headerLinks: PropTypes.object,
  links: PropTypes.object,
};

export default withStyles(sidebarStyle)(withRouter(Sidebar));

Note

For more information about the links, please read the routing system section

Props

If you wish to change this component, you should also check the following props from the base Material-UI components: