resolver/docs/layers/components.md

Components

This layer include React components 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

<SidebarMain>
            <Switch>
            {/* Add your <Route/> here! */}
             </Switch>
</SidebarMain>

• Add your component route between [Switch] tag to load in home page

<Route path="/route-name" component={ComponentName} />

To add a new item for menu bar

• In components/Home.jsx
• Inside the [Menu] tag

   <SidebarContent>
      <Menu style={{ color: "rgb(117, 117, 117)", width: '210px' }}>
       {/* Add you <NavLink /> here */}
      </Menu>
    </SidebarContent>

• Add your component NavLink between [Menu] tag

<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

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

<Switch>
         <Route path='/route-name' component={ComponentName} />
         {/* Other routes  */}
</Switch>