add description for nested submenus and fix sidebar overflow

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
 

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>

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;

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

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",

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