imbric-theme 0.2.7 → 0.3.0

package/.storybook/preview.js

@@ -3,7 +3,6 @@ import React from 'react'
 import 'minireset.css'
 import '../styles/globals.css'
 import '../styles/tokens.css'
-import '../styles/sidebar.css'
 
 const getStyles = ({ __sb } = {}) => ({
   display: 'flex',

package/index.js

@@ -3,7 +3,6 @@ export { default as CenteredContent } from './layout/CenteredContent'
 export { default as Container } from './layout/Container'
 export { default as FullHeightContent } from './layout/FullHeightContent'
 export { default as Spacer } from './layout/Spacer'
-export { default as Navbar } from './layout/Navbar'
 export { default as Sidebar } from './layout/Sidebar'
 
 // Atoms
@@ -31,3 +30,4 @@ export { default as Score } from './molecules/Score'
 export { default as Task } from './molecules/Task'
 export { default as TaskCounter } from './molecules/TaskCounter'
 export { default as IconLabel } from './molecules/IconLabel'
+export { default as ItemMenu } from './molecules/ItemMenu'

package/layout/Sidebar/Sidebar.css

@@ -0,0 +1,90 @@
+.is-home {
+  display: none;
+}
+
+#header {
+  position: absolute;
+  width: 220px;
+}
+
+#header .pro-sidebar {
+  height: 100vh;
+}
+
+#header .closemenu {
+  color: var(--color-primary);
+  position: absolute;
+  right: -7px;
+  z-index: 9999;
+  line-height: 20px;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 22px;
+  top: 8px;
+  cursor: pointer;
+}
+
+#header .pro-sidebar {
+  width: 100%;
+  min-width: 100%;
+}
+
+#header .pro-sidebar.collapsed {
+  width: 80px;
+  min-width: 80px;
+}
+
+#header .pro-sidebar-inner {
+  background-color: var(--color-base-white);
+  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
+}
+
+#header .pro-sub-menu > .pro-inner-list-item {
+  position: relative;
+  background-color: var(--color-brand-hint-of-red);
+  padding-left: 44px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout::-webkit-scrollbar {
+  display: none;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout .logotext  {
+  padding: 8px 20px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul {
+  padding: 0 5px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
+  color: var(--color-font-highlight);
+  margin: 6px 0px;
+  /* font-weight: bold; */
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
+  background-color: var(--color-brand-eastern-blue);
+  /* color: var(--color-font-highlight);
+  border-radius: 3px; */
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
+  color: var(--color-font-highlight);
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout .active {
+  background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
+}
+
+#header .logo {
+  padding: 20px;
+}
+
+@media only screen and (max-width: 720px) {
+  html {
+    overflow: hidden;
+  }
+}

package/layout/Sidebar/Sidebar.js

@@ -2,28 +2,16 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import withStyles from '../../hocs/withStyles'
 
-import { subItems } from './constants'
-
-//import react pro sidebar components
-import {
-  ProSidebar,
-  Menu,
-  MenuItem,
-  SubMenu,
-  SidebarHeader,
-  SidebarFooter,
-  SidebarContent,
-} from "react-pro-sidebar"
+import { options } from './constants'
 
 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'
+import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
 
-export const Sidebar = ({ getStyles, options }) => {
+export const Sidebar = ({ getStyles }) => {
 
   //create initial menuCollapse state using useState hook
   const [menuCollapse, setMenuCollapse] = useState(false)
@@ -36,260 +24,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">
-
-              {/* {options.forEach(itemMenu => {
-                console.log(itemMenu);  //This does ifre                       
+      <div className={getStyles('header', {
+        'collapsed': menuCollapse,
+      })}>
 
-              })} */}
+        <div className={getStyles('pro-sidebar')}>
 
-              {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-inner')}>
 
-              <Divider color="highlight" />
+            <div className={getStyles('pro-sidebar-layout')}>
 
-              {options.isActivity.view ?
-                <SubMenu
-                  title={'Activity'}
-                  icon={(<Icon color="inverted" name="activity" onClick={function noRefCheck() { }} size="md" />)}
-                  onOpenChange={(open) => {
+              <div className={getStyles('pro-sidebar-header')}>
 
-                  }}
+                <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 ? (
 
-                >
-                  {subItems.subItemsActivity.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
+                    <Icon
+                      name="angleRight"
+                      onClick={function noRefCheck() { }}
+                    />
 
-              {options.isStaff.view ?
-                <SubMenu
-                  title={'Staff'}
-                  icon={(<Icon color="inverted" name="staff" onClick={function noRefCheck() { }} size="md" />)}
-                  onOpenChange={(open) => {
+                  ) : (
+                    <Icon
+                      name="angleLeft"
+                      onClick={function noRefCheck() { }}
+                    />
+                  )}
+                </div>
 
-                  }}
-                >
-                  {subItems.subItemsStaff.map((item) => (
-                    <MenuItem
-                      key={item.title}
-                      href={item.href}
-                      title={item.title}
-                    >
-                      {item.title}
-                    </MenuItem>
-                  ))}
-                </SubMenu>
-                : null
-              }
+              </div>
 
-              {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
-              }
+              <div className={getStyles('pro-sidebar-content')}>
 
-              {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
-              }
+                <nav className={getStyles('pro-menu', 'inner-submenu-arrows')}>
 
-              <Divider color="highlight" />
+                  <ul>
 
-              {options.isOrderTaxi.view ?
-                <MenuItem
-                  title={'orderTaxi'}
-                  icon={(<Icon color="inverted" name="orderTaxi" onClick={function noRefCheck() { }} size="lg" />)}
-                  href={'/orderTaxi'}
-                >
-                  Order Taxi
-                </MenuItem>
-                : null
-              }
+                    {options.itemsMenu.map((item) => (
+                      item.view ?
+                        <ItemMenu
+                          icon={item.icon}
+                          subMenu={item.submenu}
+                          itemSubmenu={item.submenu}
+                        >
+                          {item.text}
+                        </ItemMenu>
+                        : null
+                      
+                    ))}
 
-              <Divider color="highlight" />
+                  </ul>
 
-              {options.isDashboards.view ?
-                <MenuItem
-                  title={'dashboards'}
-                  icon={(<Icon color="inverted" name="dashboardsUwa" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/dashboards'}
-                >
-                  Dashboards
-                </MenuItem>
-                : null
-              }
+                </nav>
 
-              {options.isProjects.view ?
-                <MenuItem
-                  title={'projects'}
-                  icon={(<Icon color="inverted" name="projectsUwa" onClick={function noRefCheck() { }} size="md" />)}
-                  href={'/projects'}
-                >
-                  Projects
-                </MenuItem>
-                : null
-              }
+              </div>
 
-              {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>
     </>
   )