https://github.com/hamzamhadbi/simple-side-menu
Simple react side menu
https://github.com/hamzamhadbi/simple-side-menu
navigation navigation-drawer react react-router sidebar sidemenu sidenav
Last synced: 4 months ago
JSON representation
Simple react side menu
- Host: GitHub
- URL: https://github.com/hamzamhadbi/simple-side-menu
- Owner: HamzaMhadbi
- Created: 2018-11-29T03:56:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-18T22:31:40.000Z (over 1 year ago)
- Last Synced: 2025-02-18T18:03:12.406Z (5 months ago)
- Topics: navigation, navigation-drawer, react, react-router, sidebar, sidemenu, sidenav
- Language: JavaScript
- Homepage: https://hamzamhadbi.github.io/simple-side-menu
- Size: 565 KB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://HamzaMhadbi.github.io/simple-side-menu)
## Installation
We need to install react router dom firstly if is it not installed
```bash
npm install react-router-dom --save
```
```bash
npm install simple-side-menu --save
```
## Usage
**menu.js**
```javascript
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: apps,
to: "/simple-side-menu/settings/apps"
}
]
},
{
title: "Sign out",
icon: ,
to: "/simple-side-menu/sign-out"
}
];
```
**Menu.js**
```javascript
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 (
}
items={MENU_ITEMS}
/>
Toggle Me
);
}
}
const RoutePath = ({ path }) =>
{path}
;
const Dashboard = () => ;
const AddGroup = () => ;
const AddPerson = () => ;
const NotificationsActive = () => ;
const NotificationsOff = () => ;
const Profile = () => ;
const Application = () => ;
const LogOut = () => ;
export default Menu;
```
## API
``
| 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](#usage) |
| 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). |
``
| 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
```CSS
.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;
}
```