# 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 (with side-bar and top-bar) :

- In components/Home
- Inside the [Switch] tag

```jsx
<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
- 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>
```