Nextjs Core Sidebar

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

FREE

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";
...other code
// core components
...other code
import Sidebar from "components/Sidebar/Sidebar.js";
...other code
import routes from "routes.js";
...other code

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

class Admin extends React.Component {
  render() {
    return (
      <>
        <Sidebar
          {...this.props}
          routes={routes}
          logo={logo}
        />
      ...other code
      </>
    );
  }
}

export default Admin;

Props

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

Sidebar.propTypes = {
  // links that will be displayed inside the component
  routes: PropTypes.arrayOf(PropTypes.object),
  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
  })
};

PRO

Short description and usage

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

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

import React from "react";
// ... other code
import Sidebar from "components/Sidebar/Sidebar.js";

import routes from "routes.js";

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

class Admin extends React.Component {
  state = {
    sidenavOpen: true
  };
  // toggles collapse between mini sidenav and normal
  toggleSidenav = e => {
    if (document.body.classList.contains("g-sidenav-pinned")) {
      document.body.classList.remove("g-sidenav-pinned");
      document.body.classList.add("g-sidenav-hidden");
    } else {
      document.body.classList.add("g-sidenav-pinned");
      document.body.classList.remove("g-sidenav-hidden");
    }
    this.setState({
      sidenavOpen: !this.state.sidenavOpen
    });
  };
  render() {
    return (
      <>
        // ... other code
        <Sidebar
          {...this.props}
          routes={routes}
          toggleSidenav={this.toggleSidenav}
          sidenavOpen={this.state.sidenavOpen}
          logo={logo}
        />
        // ... other code
        {this.state.sidenavOpen ? (
          <div className="backdrop d-xl-none" onClick={this.toggleSidenav} />
        ) : null}
      </>
    );
  }
}

export default Admin;

Props

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

Sidebar.propTypes = {
  // function used to make sidenav mini or normal
  toggleSidenav: PropTypes.func,
  // prop to know if the sidenav is mini or normal
  sidenavOpen: PropTypes.bool,
  // links that will be displayed inside the component
  routes: PropTypes.arrayOf(PropTypes.object),
  // logo
  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
  })
};