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" ></i>,
    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" ></SideMenu>}
            items={MENU_ITEMS}
          />
          <div className="main">
            <button onClick={this.toggleMenu}>Toggle Me</button>
            <Route exact path="/" component={Dashboard} ></Route>
            <Route path="/group/new" component={AddGroup} ></Route>
            <Route path="/group/person/new" component={AddPerson} ></Route>
            <Route
              path="/notifications/active"
              component={NotificationsActive}
            ></Route>
            <Route path="/notifications/off" component={NotificationsOff} ></Route>
            <Route path="/settings/profile" component={Profile} ></Route>
            <Route path="/settings/apps" component={Application} ></Route>
            <Route path="/sign-out" component={LogOut} ></Route>
          </div>
        </Container>
      </Router>
    );
  }
}
const RoutePath = ({ path }) => <h4>{path}</h4>;
const Dashboard = () => <RoutePath path="/dashboard" ></RoutePath>;
const AddGroup = () => <RoutePath path="/group/new" ></RoutePath>;
const AddPerson = () => <RoutePath path="/group/person/new" ></RoutePath>;
const NotificationsActive = () => <RoutePath path="/notifications/active" ></RoutePath>;
const NotificationsOff = () => <RoutePath path="/notifications/off" ></RoutePath>;
const Profile = () => <RoutePath path="/settings/profile" ></RoutePath>;
const Application = () => <RoutePath path="/settings/apps" ></RoutePath>;
const LogOut = () => <RoutePath path="/sign-out" ></RoutePath>;
export default Menu;

API

<SideMenu ></SideMenu>

<Header ></Header>

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;
}