Simple Side Menu

a simple Side menu component written only in React.js and CSS3.

Important: This component must be used with React Router V4.

Demo

Take a look at the demo

Installation

We need to install react router dom firstly if is it not installed

npm install react-router-dom --save

npm install simple-side-menu --save

Usage

menu.js

export default [
  {
    title: "Dashboard",
    iconClassName: "fa fa-dashboard",
    icon: "",
    to: "/simple-side-menu"
  },
  {
    title: "Group",
    isCollapsible: true,
    icon: "group",
    subItems: [
      {
        title: "New group",
        icon: "group_add",
        to: "/simple-side-menu/group/new"
      },
      {
        title: "New person",
        icon: "person_add",
        to: "/simple-side-menu/group/person/new"
      }
    ]
  },
  {
    title: "Notifications",
    icon: "notifications",

    subItems: [
      {
        title: "Active",
        icon: "notifications_active",
        to: "/simple-side-menu/notifications/active"
      },
      {
        title: "Off",
        icon: "notifications_off",
        to: "/simple-side-menu/notifications/off"
      }
    ]
  },
  {
    title: "Settings",
    isCollapsible: true,
    iconClassName: "ion-gear-b",
    subItems: [
      {
        title: "Profile",
        icon: "person",
        to: "/simple-side-menu/settings/profile"
      },
      {
        title: "Applications",
        icon: <i className="material-icons">apps</i>,
        to: "/simple-side-menu/settings/apps"
      }
    ]
  },
  {
    title: "Sign out",
    icon: <i className="ion-log-out" />,
    to: "/simple-side-menu/sign-out"
  }
];

Menu.js

import React, { PureComponent } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container, Header, SideMenu } from "simple-side-menu";

import MENU_ITEMS from "./menu";

class Menu extends PureComponent {
  state = {
    isOpen: true
  };

  toggleMenu = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen
    }));
  };

  render() {
    return (
      <Router>
        <Container>
          <SideMenu
            isOpen={this.state.isOpen}
            header={<Header logo="../public/logo.png" title="MENU_TITLE" />}
            items={MENU_ITEMS}
          />
          <div className="main">
            <button onClick={this.toggleMenu}>Toggle Me</button>
            <Route exact path="/" component={Dashboard} />
            <Route path="/group/new" component={AddGroup} />
            <Route path="/group/person/new" component={AddPerson} />
            <Route
              path="/notifications/active"
              component={NotificationsActive}
            />
            <Route path="/notifications/off" component={NotificationsOff} />
            <Route path="/settings/profile" component={Profile} />
            <Route path="/settings/apps" component={Application} />
            <Route path="/sign-out" component={LogOut} />
          </div>
        </Container>
      </Router>
    );
  }
}

const RoutePath = ({ path }) => <h4>{path}</h4>;

const Dashboard = () => <RoutePath path="/dashboard" />;
const AddGroup = () => <RoutePath path="/group/new" />;
const AddPerson = () => <RoutePath path="/group/person/new" />;
const NotificationsActive = () => <RoutePath path="/notifications/active" />;
const NotificationsOff = () => <RoutePath path="/notifications/off" />;
const Profile = () => <RoutePath path="/settings/profile" />;
const Application = () => <RoutePath path="/settings/apps" />;
const LogOut = () => <RoutePath path="/sign-out" />;

export default Menu;

API

<SideMenu />

Prop	Type	Default	Description
isOpen	bool	true	Specify if the side menu must be opened.
items	array	Required	Property for the configuration of the component SideMenu. check the menu.js
header	elem	null	Property for the side menu header. you can use Header component or any JSX element.
isExpandable	bool	false	This property make possibile usage of the expanded mode. don't use it with toggle menu fonctionnality.
defaultIconClassName	string	material-icons	Property for default icon className used for menu item and sub menu item, the Allowed values (material-icons, fa).

<Header />

Prop	Type	Default	Description
to	string	/	Path of home page
logo	string	null	The source path for the logo of application
title	string	null	The title of the side menu
headerClassName	string	nav-container__header	the Header className.
logoClassName	string	nav-container__logo	The Logo className.
titleClassName	string	nav-container__title	The title className.

Styling

.nav-container {
  background-color: #db3d44;
}

.sub-menu {
  background-color: #ff6666;
}

.sub-menu__item--active,
.sub-menu__item:hover,
.sub-menu__item:visited,
.menu-item--active,
.menu-item > *:first-child:hover {
  background-color: #af3136;
}

.nav-container__header,
.side-menu,
.menu-item {
	box-shadow: 0 1px 0 #fff !important;
  -webkit-box-shadow:  0 1px 0 #fff !important;
  -moz-box-shadow: 0 1px 0 #fff !important;
}