imbric-theme 0.2.6 → 0.2.9

package/layout/Sidebar/Sidebar.js

@@ -2,28 +2,72 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import withStyles from '../../hocs/withStyles'
 
-import { subItems } from './constants'
+import { subItems, options } from './constants'
 
 //import react pro sidebar components
-import {
-  ProSidebar,
-  Menu,
-  MenuItem,
-  SubMenu,
-  SidebarHeader,
-  SidebarFooter,
-  SidebarContent,
-} from "react-pro-sidebar"
-
-// import styles from './Sidebar.module.css'
+// import {
+//   ProSidebar,
+//   Menu,
+//   MenuItem,
+//   SubMenu,
+//   SidebarHeader,
+//   SidebarFooter,
+//   SidebarContent,
+// } from "react-pro-sidebar"
+
+import styles from './Sidebar.module.css'
 //import sidebar css from react-pro-sidebar module and our custom css 
 // import "react-pro-sidebar/dist/css/styles.css"
 
 import Picture from '../../atoms/Picture'
 import Icon from '../../atoms/Icon'
 import Divider from '../../atoms/Divider'
-
-export const Sidebar = ({ getStyles, options }) => {
+import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
+
+const items = [
+  {
+    href: '/',
+    icon: 'home',
+    title: 'Dashboard'
+  },
+  {
+    href: '/customers',
+    icon: 'home',
+    title: 'Customers'
+  },
+  {
+    href: '/products',
+    icon: 'home',
+    title: 'Products'
+  },
+  {
+    href: '/account',
+    icon: 'home',
+    title: 'Account'
+  },
+  {
+    href: '/settings',
+    icon: 'home',
+    title: 'Settings'
+  },
+  {
+    href: '/login',
+    icon: 'home',
+    title: 'Login'
+  },
+  {
+    href: '/register',
+    icon: 'home',
+    title: 'Register'
+  },
+  {
+    href: '/404',
+    icon: 'home',
+    title: 'Error'
+  }
+];
+
+export const Sidebar = ({ getStyles }) => {
 
   //create initial menuCollapse state using useState hook
   const [menuCollapse, setMenuCollapse] = useState(false)
@@ -36,260 +80,72 @@ export const Sidebar = ({ getStyles, options }) => {
 
   return (
     <>
-      <div id="header">
-        {/* collapsed props to change menu size using menucollapse state */}
-        <ProSidebar collapsed={menuCollapse}>
-          <SidebarHeader>
-            <div className="logotext">
-              {/* small and big change using menucollapse state */}
-              {/* <p>{menuCollapse ? "Logo" : "Big Logo"}</p> */}
-              {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
-            </div>
-            <div className="closemenu" onClick={menuIconClick}>
-              {/* changing menu collapse icon on click */}
-              {menuCollapse ? (
-
-                <Icon
-                  name="angleRight"
-                  onClick={function noRefCheck() { }}
-                />
-
-              ) : (
-                <Icon
-                  name="angleLeft"
-                  onClick={function noRefCheck() { }}
-                />
-              )}
-            </div>
-          </SidebarHeader>
-          <SidebarContent>
-            <Menu iconShape="circle">
+      <div className={getStyles('header', {
+        'collapsed': menuCollapse,
+      })}>
 
-              {/* {options.forEach(itemMenu => {
-                console.log(itemMenu);  //This does ifre                       
+        <div className={getStyles('pro-sidebar')}>
 
-              })} */}
+          <div className={getStyles('pro-sidebar-inner')}>
 
-              {options.isHome.view ?
-                <MenuItem
-                  title={'Home'}
-                  icon={(<Icon color="inverted" name="home" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/'}
-                >
-                  Home
-                </MenuItem>
-                : null
-              }
+            <div className={getStyles('pro-sidebar-layout')}>
 
-              <Divider color="highlight" />
+              <div className={getStyles('pro-sidebar-header')}>
 
-              {options.isActivity.view ?
-                <SubMenu
-                  title={'Activity'}
-                  icon={(<Icon color="inverted" name="activity" onClick={function noRefCheck() { }} size="md" />)}
-                  onOpenChange={(open) => {
+                <div className={getStyles('logotext')}>
+                  {/* small and big change using menucollapse state */}
+                  {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
+                </div>
+                <div className={getStyles('closemenu')} onClick={menuIconClick}>
+                  {/* changing menu collapse icon on click */}
+                  {menuCollapse ? (
 
-                  }}
+                    <Icon
+                      name="angleRight"
+                      onClick={function noRefCheck() { }}
+                    />
 
-                >
-                  {subItems.subItemsActivity.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
+                  ) : (
+                    <Icon
+                      name="angleLeft"
+                      onClick={function noRefCheck() { }}
+                    />
+                  )}
+                </div>
 
-              {options.isStaff.view ?
-                <SubMenu
-                  title={'Staff'}
-                  icon={(<Icon color="inverted" name="staff" onClick={function noRefCheck() { }} size="md" />)}
-                  onOpenChange={(open) => {
+              </div>
 
-                  }}
-                >
-                  {subItems.subItemsStaff.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
+              <div className={getStyles('pro-sidebar-content')}>
 
-              {options.isServices.view ?
-                <MenuItem
-                  title={'Services'}
-                  icon={(<Icon color="inverted" name="travelPrograms" onClick={function noRefCheck() { }} size="lg" />)}
-                  href={'/services'}
-                >
-                  Services
-                </MenuItem>
-                : null
-              }
-              {options.isBilling.view ?
-                <MenuItem
-                  title={'Billing'}
-                  icon={(<Icon color="inverted" name="billing" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/billing'}
-                >
-                  Billing
-                </MenuItem>
-                : null
-              }
+                <nav className={getStyles('pro-menu', 'inner-submenu-arrows')}>
 
-              {options.isSetting.view ?
-                <SubMenu
-                  title={'Setting'}
-                  icon={(<Icon color="inverted" name="setting" onClick={function noRefCheck() { }} size="md" />)}
-                >
-                  {subItems.subItemsSetting.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
+                  <ul>
 
-              <Divider color="highlight" />
+                    {options.itemsMenu.map((item) => (
+                      item.view ?
+                        <ItemMenu
+                          icon={item.icon}
+                          subMenu={item.submenu}
+                          itemSubmenu={item.submenu}
+                        >
+                          {item.text}
+                        </ItemMenu>
+                        : null
+                      
+                    ))}
 
-              {options.isOrderTaxi.view ?
-                <MenuItem
-                  title={'orderTaxi'}
-                  icon={(<Icon color="inverted" name="orderTaxi" onClick={function noRefCheck() { }} size="lg" />)}
-                  href={'/orderTaxi'}
-                >
-                  Order Taxi
-                </MenuItem>
-                : null
-              }
+                  </ul>
 
-              <Divider color="highlight" />
+                </nav>
 
-              {options.isDashboards.view ?
-                <MenuItem
-                  title={'dashboards'}
-                  icon={(<Icon color="inverted" name="dashboardsUwa" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/dashboards'}
-                >
-                  Dashboards
-                </MenuItem>
-                : null
-              }
+              </div>
 
-              {options.isProjects.view ?
-                <MenuItem
-                  title={'projects'}
-                  icon={(<Icon color="inverted" name="projectsUwa" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/projects'}
-                >
-                  Projects
-                </MenuItem>
-                : null
-              }
-
-              {options.isPermissions.view ?
-                <SubMenu
-                  title={'Permissions'}
-                  icon={(<Icon color="inverted" name="permissions" onClick={function noRefCheck() { }} size="md" />)}
-                >
-                  {subItems.subItemsPermissions.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
-
-              {options.isAnalytics.view ?
-                <SubMenu
-                  title={'Analytics'}
-                  icon={(<Icon color="inverted" name="analytics" onClick={function noRefCheck() { }} size="md" />)}
-                >
-                  {subItems.subItemsAnalytics.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
-
-              <Divider color="highlight" />
-
-              {options.isLegal.view ?
-                <SubMenu
-                  title={'Legal'}
-                  icon={(<Icon color="inverted" name="legal" onClick={function noRefCheck() { }} size="md" />)}
-                >
-                  {subItems.subItemsLegal.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
-
-              {options.isUserGuide.view ?
-                <MenuItem
-                  title={'UserGuide'}
-                  icon={(<Icon color="inverted" name="info" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/userGuide'}
-                >
-                  User Guide
-                </MenuItem>
-                : null
-              }
+            </div>
 
-              <Divider color="highlight" />
+          </div>
 
-              {options.isMyProfile.view ?
-                <MenuItem
-                  title={'my-profile'}
-                  icon={(<Icon color="inverted" name="profile" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/my-profile'}
-                >
-                  My profile
-                </MenuItem>
-                : null
-              }
+        </div>
 
-            </Menu>
-          </SidebarContent>
-          <SidebarFooter>
-            <Menu iconShape="circle">
-              <MenuItem icon={(<Icon color="inverted" name="logout" onClick={function noRefCheck() { }} size="md" />)}>Logout</MenuItem>
-            </Menu>
-          </SidebarFooter>
-        </ProSidebar>
       </div>
     </>
   )
@@ -309,4 +165,4 @@ Sidebar.defaultProps = {
   getStyles: () => { },
 }
 
-export default withStyles(subItems)(Sidebar)
+export default withStyles(styles)(Sidebar)