From 6929d179ef22d025b54d99f0fe7eb398cfd5ba13 Mon Sep 17 00:00:00 2001
From: Mohamed AZOUAOUI <azouaoui.med@gmail.com>
Date: Thu, 7 May 2020 00:56:19 +0100
Subject: [PATCH] add description for nested submenus and fix sidebar overflow

---
 CHANGELOG.md                    | 10 +++++++++-
 README.md                       | 27 +++++++++++++++++++++++----
 demo/src/App.scss               |  1 +
 demo/src/Layout.js              |  2 +-
 package.json                    |  2 +-
 src/scss/partials/_sidebar.scss |  1 +
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index befd977..d7f437d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- update readme : merge API tables into one single table
+### Changed
+
+- Update readme
+  - Merge API tables into one single table use prop instead of name
+  - Add description on how to use nested sub-menus
+
+### Fixed
+
+- Fix overflow of the sidebar content
 
 ## [0.1.0-beta.1] - 2020-05-06
 
diff --git a/README.md b/README.md
index 59533b6..23c6329 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
-# [React Pro Sidebar](https://azouaoui-med.github.io/react-pro-sidebar)
+# [React Pro Sidebar](https://www.npmjs.com/package/react-pro-sidebar)
 
-[![npm][npm-image]][npm-url] [![License](https://badgen.net/npm/license/react-pro-sidebar)](https://www.npmjs.com/package/react-pro-sidebar)
+[![npm][version]][npm-url]
+[![License][license]][npm-url]
+[![Peer][peer]][npm-url]
 
-[npm-image]: https://img.shields.io/npm/v/react-pro-sidebar.svg?style=flat-square
+[version]: https://img.shields.io/npm/v/react-pro-sidebar.svg?style=flat-square
+[license]: https://img.shields.io/github/license/azouaoui-med/react-pro-sidebar?style=flat-square
+[peer]: https://img.shields.io/npm/dependency-version/react-pro-sidebar/peer/react?style=flat-square
 [npm-url]: https://www.npmjs.com/package/react-pro-sidebar
 
 React sidebar library with dropdown menus and unlimited number of nested submenus
@@ -69,6 +73,21 @@ $icon-size: 35px;
 @import '../node_modules/react-pro-sidebar/dist/scss/styles.scss';
 ```
 
+## Using nested sub-menus
+
+You can have as many nested menu-items and sub-menus as you like, and the syntax is very simple
+
+```jsx
+<Menu iconShape="square">
+  <SubMenu title="Components" icon={<FaGem />}>
+    <MenuItem>Component 1</MenuItem>
+    <SubMenu title="Sub Component 1" icon={<FaHeart />}>
+      {/* you can have more nested submenus ... */}
+    </SubMenu>
+  </SubMenu>
+</Menu>
+```
+
 ## Using React Router Dom
 
 Here is an example on how to use [react router dom](https://github.com/ReactTraining/react-router) in the menu item
@@ -88,7 +107,7 @@ import { Link } from 'react-router-dom';
     <thead>
         <tr>
             <th>Component</th>
-            <th>Name</th>
+            <th>Prop</th>
             <th>Type</th>
             <th>Description</th>
             <th>Default</th>
diff --git a/demo/src/App.scss b/demo/src/App.scss
index 96d1efa..b15b181 100644
--- a/demo/src/App.scss
+++ b/demo/src/App.scss
@@ -28,6 +28,7 @@ body {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
     header {
       margin-bottom: 40px;
       border-bottom: 1px solid #efefef;
diff --git a/demo/src/Layout.js b/demo/src/Layout.js
index 8df912c..b819138 100644
--- a/demo/src/Layout.js
+++ b/demo/src/Layout.js
@@ -9,7 +9,7 @@ function Layout({ setLocale }) {
   const intl = useIntl();
   const [rtl, setRtl] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
-  const [image, setImage] = useState(false);
+  const [image, setImage] = useState(true);
 
   const handleCollapsedChange = (checked) => {
     setCollapsed(checked);
diff --git a/package.json b/package.json
index a85fc03..32e07f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-pro-sidebar",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0",
   "description": "React sidebar library with dropdown menus and unlimit number of nested submenus",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss
index a5e5d1d..5cc44dd 100644
--- a/src/scss/partials/_sidebar.scss
+++ b/src/scss/partials/_sidebar.scss
@@ -6,6 +6,7 @@
   text-align: left;
   transition: width 0.3s;
   position: relative;
+  overflow-y: auto;
   > img.sidebar-bg {
     width: 100%;
     height: 100%;