imbric-theme 0.2.8 → 0.3.1

package/layout/Sidebar/constants.js

@@ -1,84 +1,204 @@
-export const subItems = {
+export const options = {
+    itemsMenu: [
+        {
+            text: "Home",
+            icon: "home",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
+        },
+        {
+            text: "Activity",
+            icon: "activity",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "Taxi",
+                    href: "/taxi",
+                    view: true,
+                },
+                {
+                    text: "Parking",
+                    href: "/parking",
+                    view: true,
+                },
+                {
+                    text: "Sharing",
+                    href: "/sharing",
+                    view: true,
+                },
+                {
+                    text: "Public transport",
+                    href: "/publictransport ",
+                    view: true,
+                },
+                {
+                    text: "Kilometer sheet",
+                    href: "/kilometersheet",
+                    view: true,
+                }
+            ],
+        },
+        {
+            text: "Staff",
+            icon: "staff",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "People Add",
+                    href: "/staff/taxi",
+                    view: true,
+                },
+                {
+                    text: "People View",
+                    href: "/staff/taxi",
+                    view: true,
+                },
+                {
+                    text: "People Group",
+                    href: "/staff/taxi",
+                    view: true,
+                },
 
-    subItemsActivity: [
-        {
-            href: '/activity/taxi',
-            title: 'Taxi',
-        },
-        {
-            href: '/activity/parking',
-            title: 'Parking',
-        },
-        {
-            href: '/activity/sharing',
-            title: 'Sharing',
-        },
-    ],
+            ],
+        },
+        {
+            text: "Services",
+            icon: "travelPrograms",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
+        },
+        {
+            text: "Billing",
+            icon: "billing",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
+        },
+        {
+            text: "Setting",
+            icon: "setting",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "Company",
+                    href: "/company/edit",
+                    view: true,
+                },
+                {
+                    text: "Wallet",
+                    href: "/company/wallet",
+                    view: true,
+                },
 
-    subItemsStaff: [
-        {
-            href: '/staff/taxi',
-            title: 'People Add',
-        },
-        {
-            href: '/staff/parking',
-            title: 'People View',
-        },
-        {
-            href: '/staff/sharing',
-            title: 'People Group',
-        },
-    ],
+            ],
 
-    subItemsSetting: [
-        {
-            href: '/staff/taxi',
-            title: 'People Add',
         },
         {
-            href: '/staff/parking',
-            title: 'People View',
+            text: "Order Taxi",
+            icon: "orderTaxi",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
         },
         {
-            href: '/staff/sharing',
-            title: 'People Group',
+            text: "Dashboards",
+            icon: "dashboardsUwa",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
         },
-    ],
-
-    subItemsPermissions: [
-        {
-            href: '/permissions/managestaff',
-            title: 'Permissions',
-        },
-    ],
-
-    subItemsAnalytics: [
         {
-            href: '/analytics/dashboard',
-            title: 'Dashboard',
+            text: "Projects",
+            icon: "projectsUwa",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
         },
         {
-            href: '/analytics/taxi',
-            title: 'Taxi',
-        },
-        {
-            href: '/analytics/tollsparking',
-            title: 'Parking',
-        },
-    ],
+            text: "Permissions",
+            icon: "permissions",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "Permissions",
+                    href: "/permissions/managestaff",
+                    view: true,
+                },
+
+            ],
+        },
+        {
+            text: "Analytics",
+            icon: "analytics",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "Dashboard",
+                    href: "/analytics/dashboard",
+                    view: true,
+                },
+                {
+                    text: "Taxi",
+                    href: "/analytics/taxi",
+                    view: true,
+                },
+                {
+                    text: "Parking",
+                    href: "/analytics/tollsparking",
+                    view: true,
+                },
+            ],
+        },
+        {
+            text: "Legal",
+            icon: "legal",
+            href: "/home",
+            view: true,
+            viewSubMenu: true,
+            submenu: [
+                {
+                    text: "Privacy policy",
+                    href: "/legal/dashboard",
+                    view: true,
+                },
+                {
+                    text: "General terms",
+                    href: "/legal/taxi",
+                    view: true,
+                },
+                {
+                    text: "Particular terms",
+                    href: "/legal/tollsparking",
+                    view: true,
+                },
+            ],
 
-    subItemsLegal: [
-        {
-            href: 'https://www.imbric.com/privacypolicy/',
-            title: 'Privacy policy',
         },
         {
-            href: 'https://www.imbric.com/general-terms/',
-            title: 'General terms',
+            text: "User Guide",
+            icon: "info",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
         },
         {
-            href: 'https://www.imbric.com/particular-terms/',
-            title: 'Particular terms',
+            text: "My profile",
+            icon: "profile",
+            href: "/home",
+            view: true,
+            viewSubMenu: false,
         },
     ],
 

package/layout/Sidebar/index.js

@@ -1,3 +1,3 @@
 export { default, Sidebar } from './Sidebar'
-export { subItems } from './constants'
+export { options } from './constants'
 export { default as styles } from './Sidebar.module.css'

package/molecules/ItemMenu/ItemMenu.js

@@ -0,0 +1,129 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './ItemMenu.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import { Link, Route, BrowserRouter } from 'react-router-dom'
+
+import Icon from '../../atoms/Icon'
+
+
+export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, toHref }) => {
+
+  //create initial menuCollapse state using useState hook
+  const [subMenuCollapse, setSubMenuCollapse] = useState(false)
+
+  //create a custom function that will change menucollapse state from false to true and true to false
+  const subMenuIconClick = () => {
+    //condition checking to change state from true to false and vice versa
+    subMenuCollapse ? setSubMenuCollapse(false) : setSubMenuCollapse(true);
+  };
+
+
+  if (!subMenu) {
+    return (
+      <>
+        <BrowserRouter>
+          <Link to={toHref}>
+            <li className={getStyles('pro-menu-item')}>
+
+              <div className={getStyles('pro-inner-item')}>
+
+                <span className={getStyles('pro-icon-wrapper')}>
+
+                  <span className={getStyles('pro-icon')}>
+                    <Icon
+                      size={size}
+                      name={icon}
+                      color={color}
+                      background={background}
+                      onClick={function noRefCheck() { }}
+                    />
+                  </span>
+
+                </span>
+
+                <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+
+              </div>
+
+            </li>
+          </Link>
+        </BrowserRouter>
+      </>
+    )
+  } else {
+    return (
+      <>
+        <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse })} title="Home" href="/">
+
+          <div className={getStyles('pro-inner-item')} onClick={subMenuIconClick}>
+
+            <span className={getStyles('pro-icon-wrapper')}>
+
+              <span className={getStyles('pro-icon')}>
+                <Icon
+                  size={size}
+                  name={icon}
+                  color={color}
+                  background={background}
+                  onClick={function noRefCheck() { }}
+                />
+              </span>
+
+            </span>
+
+            <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+
+            <span className={getStyles('pro-arrow-wrapper')}>
+              <span className={getStyles('pro-arrow')}></span>
+            </span>
+
+          </div>
+
+          <div className={getStyles('react-slidedown', 'pro-inner-list-item', { 'closed': !subMenuCollapse })}>
+            <div>
+              <ul>
+
+                {itemSubmenu.map((item, index) => (
+                  <li key={index} className={getStyles('pro-menu-item')} href={item.href}>
+                    <div className={getStyles('pro-inner-item')} role="button">
+                      <span className={getStyles('pro-item-content')}>{item.text}</span></div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+        </li>
+      </>
+    )
+  }
+
+
+}
+
+ItemMenu.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  subMenu: PropTypes.bool.isRequired,
+  icon: PropTypes.oneOf(options.icons),
+  size: PropTypes.oneOf(options.sizes),
+  color: PropTypes.oneOf(options.colors),
+  background: PropTypes.oneOf(options.backgrounds),
+}
+
+ItemMenu.defaultProps = {
+  subMenu: false,
+  toHref: '/',
+  icon: 'home',
+  size: 'lg',
+  color: 'highlight',
+  background: 'transparent',
+  getStyles: () => { },
+}
+
+
+export default withStyles(styles)(ItemMenu)