From e2699b6df2bd2eef62b7eedcb1f8e50a158cde34 Mon Sep 17 00:00:00 2001
From: Qolzam <amir.gholzam@live.com>
Date: Sat, 21 Oct 2017 13:52:08 +0700
Subject: [PATCH] [Docs]How to add a new component

---
 docs/layers/components.md | 57 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/docs/layers/components.md b/docs/layers/components.md
index 36cccc5..79f433a 100644
--- a/docs/layers/components.md
+++ b/docs/layers/components.md
@@ -1,3 +1,60 @@
 # Components
 
 This layer include [React components](https://facebook.github.io/react/docs/react-component.html) that let you split the UI into independent, reusable pieces, and think about each piece in isolation.
+
+## Add a new component
+
+To add a new page in Home.jsx (with side-bar and top-bar) :
+
+- In components/Home.jsx
+- Inside the  <Switch> tag
+
+```javascript
+<SidebarMain>
+            <Switch>
+            {/* Add your <Route/> here! */}
+             </Switch>
+</SidebarMain>
+```
+
+- Add your component route between <Switch> tag to load in home page
+
+```javascript
+<Route path="/route-name" component={ComponentName} />
+```
+
+To add a new item for menu bar
+
+- In components/Home.jsx
+- Inside the <Menu> tag
+
+```javascript
+   <SidebarContent>
+      <Menu style={{ color: "rgb(117, 117, 117)", width: '210px' }}>
+       {/* Add you <NavLink /> here */}
+      </Menu>
+    </SidebarContent>
+```
+
+- Add your component NavLink between <Menu> tag
+
+```javascript
+<NavLink to='/route-name'>
+    <MenuItem primaryText="MenuItemName" style={{ color: "rgb(117, 117, 117)" }} leftIcon={<SvgIcon />} />
+    {/* Other menu itemes  */}
+</NavLink>
+```
+
+*Note: You can choose your icon for <SvgIcon /> from [material-ui icons](http://www.material-ui.com/#/components/svg-icon)*
+
+To add your page in Master page (without side-bar menu and top-bar)
+
+- In components/Master/Master.tsx
+- Add your <Route /> tag between <Switch /> tag
+
+```javascript
+<Switch>
+         <Route path='/route-name' component={ComponentName} />
+         {/* Other routes  */}
+</Switch>
+```