imbric-theme 0.3.0 → 0.3.3

package/layout/Sidebar/constants.js

@@ -1,217 +1,228 @@
-export const subItems = {
-
-    subItemsLegal: [
-        {
-            href: 'https://www.imbric.com/privacypolicy/',
-            title: 'Privacy policy',
-        },
-        {
-            href: 'https://www.imbric.com/general-terms/',
-            title: 'General terms',
-        },
-        {
-            href: 'https://www.imbric.com/particular-terms/',
-            title: 'Particular terms',
-        },
-    ],
-
-}
-
-export const options = {
-    itemsMenu: [
-        {
-            text: "Home",
-            icon: "home",
-            href: "/home",
-            view: true,
-        },
-        {
-            text: "Activity",
-            icon: "activity",
-            href: "/home",
-            view: 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,
-            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,
-                },
-
-            ],
-        },
-        {
-            text: "Services",
-            icon: "travelPrograms",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "Billing",
-            icon: "billing",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "Setting",
-            icon: "setting",
-            href: "/home",
-            view: true,
-            submenu: [
-                {
-                    text: "Company",
-                    href: "/company/edit",
-                    view: true,
-                },
-                {
-                    text: "Wallet",
-                    href: "/company/wallet",
-                    view: true,
-                },
-
-            ],
-
-        },
-        {
-            text: "Order Taxi",
-            icon: "orderTaxi",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "Dashboards",
-            icon: "dashboardsUwa",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "Projects",
-            icon: "projectsUwa",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "Permissions",
-            icon: "permissions",
-            href: "/home",
-            view: true,
-            submenu: [
-                {
-                    text: "Permissions",
-                    href: "/permissions/managestaff",
-                    view: true,
-                },
-
-            ],
-        },
-        {
-            text: "Analytics",
-            icon: "analytics",
-            href: "/home",
-            view: 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,
-            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,
-                },
-            ],
-
-        },
-        {
-            text: "User Guide",
-            icon: "info",
-            href: "/home",
-            view: true,
-
-        },
-        {
-            text: "My profile",
-            icon: "profile",
-            href: "/home",
-            view: true,
-
-        },
-    ],
-
-}
+export const options = [
+	{
+		active: false,
+		href: '/',
+		icon: 'home',
+		text: 'Home',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/activity/activity-taxi',
+		icon: 'activity',
+		submenu: [
+			{
+				active: false,
+				href: '/activity/activity-taxi',
+				text: 'Taxi',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-parking',
+				text: 'Parking',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-sharing',
+				text: 'Sharing',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-public-transport',
+				text: 'Public transport',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-kilometer-sheet',
+				text: 'Kilometer sheet',
+				view: true,
+			},
+		],
+		text: 'Activity',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/staff/staff-add',
+		icon: 'staff',
+		submenu: [
+			{
+				active: false,
+				href: '/staff/staff-add',
+				text: 'Staff Add',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/staff/staff-view',
+				text: 'Staff View',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/staff/staff-group',
+				text: 'Staff Group',
+				view: true,
+			},
+		],
+		text: 'Staff',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/services',
+		icon: 'travelPrograms',
+		text: 'Services',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/billing',
+		icon: 'billing',
+		text: 'Billing',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/setting/setting-company',
+		icon: 'setting',
+		submenu: [
+			{
+				active: false,
+				href: '/setting/setting-company',
+				text: 'Company',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/setting/setting-wallet',
+				text: 'Wallet',
+				view: true,
+			},
+		],
+		text: 'Setting',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/order-taxi',
+		icon: 'orderTaxi',
+		text: 'Order Taxi',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/dashboards',
+		icon: 'dashboardsUwa',
+		text: 'Dashboards',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/projects',
+		icon: 'projectsUwa',
+		text: 'Projects',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/permissions/permissions-manage-staff',
+		icon: 'permissions',
+		submenu: [
+			{
+				active: false,
+				href: '/permissions/permissions-manage-staff',
+				text: 'Permissions',
+				view: true,
+			},
+		],
+		text: 'Permissions',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '#',
+		icon: 'analytics',
+		submenu: [
+			{
+				active: false,
+				href: '/analytics/analytics-dashboard',
+				text: 'Dashboard',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/analytics/analytics-taxi',
+				text: 'Taxi',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/analytics/analytics-tollsparking',
+				text: 'Parking',
+				view: true,
+			},
+		],
+		text: 'Analytics',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '#',
+		icon: 'legal',
+		submenu: [
+			{
+				active: false,
+				href: '/legal/dashboard',
+				text: 'Privacy policy',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/legal/taxi',
+				text: 'General terms',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/legal/tollsparking',
+				text: 'Particular terms',
+				view: true,
+			},
+		],
+		text: 'Legal',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'info',
+		text: 'User Guide',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'profile',
+		text: 'My profile',
+		view: true,
+		viewSubMenu: false,
+	},
+]

package/layout/Sidebar/index.js

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

package/molecules/ItemMenu/ItemMenu.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import Link from 'next/link'
 
 import styles from './ItemMenu.module.css'
 import { options } from './constants'
@@ -7,7 +8,7 @@ import withStyles from '../../hocs/withStyles'
 
 import Icon from '../../atoms/Icon'
 
-export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu }) => {
+export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, itemHref, itemActive }) => {
 
   //create initial menuCollapse state using useState hook
   const [subMenuCollapse, setSubMenuCollapse] = useState(false)
@@ -22,45 +23,50 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
   if (!subMenu) {
     return (
       <>
-        <li className={getStyles('pro-menu-item')}>
+        <Link href={itemHref} passHref>
+          <li className={getStyles('pro-menu-item', { 'active': itemActive })}>
 
-          <div className={getStyles('pro-inner-item')}>
+            <div className={getStyles('pro-inner-item')}>
 
-            <span className={getStyles('pro-icon-wrapper')}>
+              <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 className={getStyles('pro-icon')}>
 
-            </span>
+                  <Icon
+                    size={size}
+                    name={icon}
+                    color={ itemActive ? 'primary' : color}
+                    background={background}
+                    onClick={function noRefCheck() { }}
+                  />
 
-            <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+                </span>
 
-          </div>
+              </span>
 
-        </li>
+              <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+
+            </div>
+
+          </li>
+        </Link>
       </>
     )
   } else {
     return (
       <>
-        <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse })} title="Home" href="/">
+        <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse }, { 'activesubtxt': itemActive })} 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}
+                  color={ itemActive ? 'primary' : color}
                   background={background}
                   onClick={function noRefCheck() { }}
                 />
@@ -68,7 +74,7 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
 
             </span>
 
-            <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+            <span className={getStyles('pro-item-content', 'title', { 'color': color })}>{children}</span>
 
             <span className={getStyles('pro-arrow-wrapper')}>
               <span className={getStyles('pro-arrow')}></span>
@@ -80,11 +86,13 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
             <div>
               <ul>
 
-                {itemSubmenu.map((item) => (
-                  <li 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>
+                {itemSubmenu.map((item, index) => (
+                  <Link key={index} href={item.href} passHref>
+                    <li className={getStyles('pro-menu-item', { 'activesub': item.active })}>
+                      <div className={getStyles('pro-inner-item')} role="button">
+                        <span className={getStyles('pro-item-content')}>{item.text}</span></div>
+                    </li>
+                  </Link>
                 ))}
               </ul>
             </div>
@@ -102,6 +110,7 @@ ItemMenu.propTypes = {
   children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
   subMenu: PropTypes.bool.isRequired,
+  itemActive: PropTypes.bool,
   icon: PropTypes.oneOf(options.icons),
   size: PropTypes.oneOf(options.sizes),
   color: PropTypes.oneOf(options.colors),
@@ -110,10 +119,12 @@ ItemMenu.propTypes = {
 
 ItemMenu.defaultProps = {
   subMenu: false,
+  itemActive: false,
   icon: 'home',
   size: 'lg',
   color: 'highlight',
   background: 'transparent',
+  itemHref: '/',
   getStyles: () => { },
 }
 

package/molecules/ItemMenu/ItemMenu.module.css

@@ -30,7 +30,7 @@
 }
 
 .pro-menu-item {
-  font-size: 15px;
+  font-size: var(--font-size-base);
   list-style: none;
 }
 
@@ -89,14 +89,23 @@
   color: var(--color-primary);
 }
 
-
 /* ////////////////////// */
 
+.pro-menu-item.active .pro-item-content {
+  color: var(--color-primary);
+}
 
-.pro-menu-item.active {
-  color: #d8d8d8;
+.pro-sub-menu .pro-menu-item.activesub .pro-item-content {
+  color: var(--color-primary);
 }
 
+.pro-menu-item.pro-sub-menu.activesubtxt .pro-inner-item .pro-item-content.title {
+  color: var(--color-primary);
+  /* font-size: 32px; */
+}
+
+/* ////////////////////// */
+
 .pro-menu-item .suffix-wrapper {
   opacity: 1;
   transition: opacity 0.2s;
@@ -190,7 +199,7 @@
 }
 
 .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
-  padding: 14px 30px 14px 15px;
+  padding: 10px 30px 10px 15px;
   margin: 0;
 }
 
@@ -324,11 +333,6 @@
   transition-property: none;
 }
 
-.pro-menu {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
 .pro-sub-menu>.pro-inner-list-item {
   position: relative;
   background-color: hsl(0deg 0% 0% / 2%);
@@ -339,25 +343,6 @@
   padding-bottom: 15px;
 }
 
-.pro-menu a {
-  text-decoration: none;
-  color: #adadad;
-}
-
-.pro-menu a:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: transparent;
-}
-
-.pro-menu a:hover {
-  color: #d8d8d8;
-}
-
 .popper-arrow {
   position: absolute;
   z-index: -1;

package/molecules/ItemMenu/ItemMenu.stories.js

@@ -16,6 +16,8 @@ export default {
     children: 'Home',
     subMenu: false,
     itemSubmenu: options.itemSubmenu,
+    itemActive: false,
+    itemHref: '/'
   },
   argTypes: {
     itemSubmenu: {