initial commit

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+demo
+dist
+rollup.config.js

.eslintrc

@@ -0,0 +1,31 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "project": "./tsconfig.json"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "extends": ["airbnb-typescript", "prettier"],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: npm release
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Publish
+        run: yarn publish
+        env:
+          # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+build
+dist
+
+# vs code config
+.vscode
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2020-05-06
+
+### Added
+
+- Initial release of the react pro sidebar library

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present Mohamed Azouaoui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,200 @@
+# [React Pro Sidebar](https://azouaoui-med.github.io/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-image]: https://img.shields.io/npm/v/react-pro-sidebar.svg?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
+
+## Demo
+
+[Live preview](https://azouaoui-med.github.io/react-pro-sidebar)
+
+## Installation
+
+### yarn
+
+```bash
+yarn add react-pro-sidebar
+```
+
+### npm
+
+```bash
+npm install react-pro-sidebar
+```
+
+## Usage
+
+```jsx
+import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
+import 'react-pro-sidebar/dist/css/styles.css';
+
+<ProSidebar>
+  <Menu iconShape="square">
+    <MenuItem icon={<FaGem />}>Dashboard</MenuItem>
+    <SubMenu title="Components" icon={<FaHeart />}>
+      <MenuItem>Component 1</MenuItem>
+      <MenuItem>Component 2</MenuItem>
+    </SubMenu>
+  </Menu>
+</ProSidebar>;
+```
+
+If you are using sass then you can import the styles directly into your scss file
+
+```scss
+@import '../node_modules/react-pro-sidebar/dist/scss/styles.scss';
+```
+
+## Custom Styling
+
+There are sets of sass variables available which you can override to define your own styles
+
+You need to include your override variables before importing the scss file
+
+Your `custom.scss` file should look something like this
+
+```scss
+// Your variable overrides
+$sidebar-bg-color: #1d1d1d;
+$sidebar-color: #adadad;
+$highlight-color: #d8d8d8;
+$submenu-bg-color: #2b2b2b;
+$submenu-bg-color-collapsed: #2b2b2b;
+$icon-bg-color: #2b2b2b;
+$icon-size: 35px;
+
+@import '../node_modules/react-pro-sidebar/dist/scss/styles.scss';
+```
+
+## 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
+
+```jsx
+import { Link } from 'react-router-dom';
+
+<MenuItem icon={<FaGem />}>
+  Dashboard
+  <Link to="/" />
+</MenuItem>;
+```
+
+## API
+
+### ProSidebar
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>collapsed</td>
+            <td>boolean</td>
+            <td>Set the collapsed status of the sidebar </td>
+            <td><code>false</code></td>
+        </tr>
+        <tr>
+            <td>rtl</td>
+            <td>boolean</td>
+            <td>Set RTL direction</td>
+            <td><code>false</code></td>
+        </tr>
+        <tr>
+            <td>width</td>
+            <td>number | string</td>
+            <td>Set the width of the sidebar</td>
+            <td><code>270px</code></td>
+        </tr>
+        <tr>
+            <td>image</td>
+            <td>string</td>
+            <td>Set the url of the image to use in the background</td>
+            <td><code>-</code></td>
+        </tr>
+    </tbody>
+</table>
+
+### Menu
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+     <tbody>
+        <tr>
+            <td>iconShape</td>
+            <td>string</td>
+            <td>Set the shape of the icon : <code>square</code> | <code>round</code> | <code>circle</code> </td>
+            <td><code>-</code></td>
+        </tr>  
+    </tbody>
+
+</table>
+
+### MenuItem
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+     <tbody>
+        <tr>
+            <td>icon</td>
+            <td>ReactNode</td>
+            <td>Set the icon for the menu item </td>
+            <td><code>-</code></td>
+        </tr>  
+    </tbody>
+
+</table>
+
+### SubMenu
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+     <tbody>
+        <tr>
+            <td>icon</td>
+            <td>ReactNode</td>
+            <td>Set the icon for submenu title </td>
+            <td><code>-</code></td>
+        </tr>  
+        <tr>
+            <td>title</td>
+            <td>string | ReactNode</td>
+            <td>Set the submenu title </td>
+            <td><code>-</code></td>
+        </tr>  
+    </tbody>
+
+</table>
+
+## License
+
+MIT © [Mohamed Azouaoui](https://azouaoui.netlify.com)

demo/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*