imbric-theme 0.3.2 → 0.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/layout/Sidebar/Sidebar.js +6 -3
  2. package/layout/Sidebar/Sidebar.module.css +0 -10
  3. package/layout/Sidebar/Sidebar.stories.js +1 -1
  4. package/layout/Sidebar/constants.js +228 -205
  5. package/molecules/ItemMenu/ItemMenu.js +35 -24
  6. package/molecules/ItemMenu/ItemMenu.module.css +13 -4
  7. package/molecules/ItemMenu/ItemMenu.stories.js +2 -0
  8. package/molecules/ItemMenu/constants.js +3 -0
  9. package/package.json +4 -2
package/layout/Sidebar/Sidebar.js CHANGED
@@ -2,7 +2,7 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import withStyles from '../../hocs/withStyles'
4
4
 
5
- import { options } from './constants'
5
+ // import { options } from './constants'
6
6
 
7
7
  import styles from './Sidebar.module.css'
8
8
 
@@ -11,7 +11,7 @@ import Icon from '../../atoms/Icon'
11
11
  import Divider from '../../atoms/Divider'
12
12
  import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
13
13
 
14
- export const Sidebar = ({ getStyles, menuCollapseView }) => {
14
+ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
15
15
 
16
16
 
17
17
  return (
@@ -57,16 +57,19 @@ export const Sidebar = ({ getStyles, menuCollapseView }) => {
57
57
 
58
58
  <ul>
59
59
 
60
- {options.itemsMenu.map((item, index) => (
60
+ {options.map((item, index) => (
61
61
  item.view ?
62
62
  <ItemMenu
63
63
  key={index}
64
64
  icon={item.icon}
65
65
  subMenu={item.viewSubMenu}
66
66
  itemSubmenu={item.submenu}
67
+ itemHref={item.href}
68
+ itemActive={item.active}
67
69
  >
68
70
  {item.text}
69
71
  </ItemMenu>
72
+
70
73
  : null
71
74
 
72
75
  ))}
package/layout/Sidebar/Sidebar.module.css CHANGED
@@ -177,16 +177,6 @@
177
177
  color: #adadad;
178
178
  }
179
179
 
180
- .pro-menu a:before {
181
- content: '';
182
- position: absolute;
183
- top: 0;
184
- right: 0;
185
- bottom: 0;
186
- left: 0;
187
- background-color: transparent;
188
- }
189
-
190
180
  .pro-menu a:hover {
191
181
  color: #d8d8d8;
192
182
  }
package/layout/Sidebar/Sidebar.stories.js CHANGED
@@ -9,7 +9,7 @@ export default {
9
9
  title: 'Layout/Sidebar',
10
10
  component: Sidebar,
11
11
  args: {
12
- options: options.itemsMenu,
12
+ options: options,
13
13
  menuCollapseView: false,
14
14
  },
15
15
  argTypes: {
package/layout/Sidebar/constants.js CHANGED
@@ -1,205 +1,228 @@
1
- export const options = {
2
- itemsMenu: [
3
- {
4
- text: "Home",
5
- icon: "home",
6
- href: "/home",
7
- view: true,
8
- viewSubMenu: false,
9
- },
10
- {
11
- text: "Activity",
12
- icon: "activity",
13
- href: "/home",
14
- view: true,
15
- viewSubMenu: true,
16
- submenu: [
17
- {
18
- text: "Taxi",
19
- href: "/taxi",
20
- view: true,
21
- },
22
- {
23
- text: "Parking",
24
- href: "/parking",
25
- view: true,
26
- },
27
- {
28
- text: "Sharing",
29
- href: "/sharing",
30
- view: true,
31
- },
32
- {
33
- text: "Public transport",
34
- href: "/publictransport ",
35
- view: true,
36
- },
37
- {
38
- text: "Kilometer sheet",
39
- href: "/kilometersheet",
40
- view: true,
41
- }
42
- ],
43
- },
44
- {
45
- text: "Staff",
46
- icon: "staff",
47
- href: "/home",
48
- view: true,
49
- viewSubMenu: true,
50
- submenu: [
51
- {
52
- text: "People Add",
53
- href: "/staff/taxi",
54
- view: true,
55
- },
56
- {
57
- text: "People View",
58
- href: "/staff/taxi",
59
- view: true,
60
- },
61
- {
62
- text: "People Group",
63
- href: "/staff/taxi",
64
- view: true,
65
- },
66
-
67
- ],
68
- },
69
- {
70
- text: "Services",
71
- icon: "travelPrograms",
72
- href: "/home",
73
- view: true,
74
- viewSubMenu: false,
75
- },
76
- {
77
- text: "Billing",
78
- icon: "billing",
79
- href: "/home",
80
- view: true,
81
- viewSubMenu: false,
82
- },
83
- {
84
- text: "Setting",
85
- icon: "setting",
86
- href: "/home",
87
- view: true,
88
- viewSubMenu: true,
89
- submenu: [
90
- {
91
- text: "Company",
92
- href: "/company/edit",
93
- view: true,
94
- },
95
- {
96
- text: "Wallet",
97
- href: "/company/wallet",
98
- view: true,
99
- },
100
-
101
- ],
102
-
103
- },
104
- {
105
- text: "Order Taxi",
106
- icon: "orderTaxi",
107
- href: "/home",
108
- view: true,
109
- viewSubMenu: false,
110
- },
111
- {
112
- text: "Dashboards",
113
- icon: "dashboardsUwa",
114
- href: "/home",
115
- view: true,
116
- viewSubMenu: false,
117
- },
118
- {
119
- text: "Projects",
120
- icon: "projectsUwa",
121
- href: "/home",
122
- view: true,
123
- viewSubMenu: false,
124
- },
125
- {
126
- text: "Permissions",
127
- icon: "permissions",
128
- href: "/home",
129
- view: true,
130
- viewSubMenu: true,
131
- submenu: [
132
- {
133
- text: "Permissions",
134
- href: "/permissions/managestaff",
135
- view: true,
136
- },
137
-
138
- ],
139
- },
140
- {
141
- text: "Analytics",
142
- icon: "analytics",
143
- href: "/home",
144
- view: true,
145
- viewSubMenu: true,
146
- submenu: [
147
- {
148
- text: "Dashboard",
149
- href: "/analytics/dashboard",
150
- view: true,
151
- },
152
- {
153
- text: "Taxi",
154
- href: "/analytics/taxi",
155
- view: true,
156
- },
157
- {
158
- text: "Parking",
159
- href: "/analytics/tollsparking",
160
- view: true,
161
- },
162
- ],
163
- },
164
- {
165
- text: "Legal",
166
- icon: "legal",
167
- href: "/home",
168
- view: true,
169
- viewSubMenu: true,
170
- submenu: [
171
- {
172
- text: "Privacy policy",
173
- href: "/legal/dashboard",
174
- view: true,
175
- },
176
- {
177
- text: "General terms",
178
- href: "/legal/taxi",
179
- view: true,
180
- },
181
- {
182
- text: "Particular terms",
183
- href: "/legal/tollsparking",
184
- view: true,
185
- },
186
- ],
187
-
188
- },
189
- {
190
- text: "User Guide",
191
- icon: "info",
192
- href: "/home",
193
- view: true,
194
- viewSubMenu: false,
195
- },
196
- {
197
- text: "My profile",
198
- icon: "profile",
199
- href: "/home",
200
- view: true,
201
- viewSubMenu: false,
202
- },
203
- ],
204
-
205
- }
1
+ export const options = [
2
+ {
3
+ active: false,
4
+ href: '/',
5
+ icon: 'home',
6
+ text: 'Home',
7
+ view: true,
8
+ viewSubMenu: false,
9
+ },
10
+ {
11
+ active: false,
12
+ href: '/activity/activity-taxi',
13
+ icon: 'activity',
14
+ submenu: [
15
+ {
16
+ active: false,
17
+ href: '/activity/activity-taxi',
18
+ text: 'Taxi',
19
+ view: true,
20
+ },
21
+ {
22
+ active: false,
23
+ href: '/activity/activity-parking',
24
+ text: 'Parking',
25
+ view: true,
26
+ },
27
+ {
28
+ active: false,
29
+ href: '/activity/activity-sharing',
30
+ text: 'Sharing',
31
+ view: true,
32
+ },
33
+ {
34
+ active: false,
35
+ href: '/activity/activity-public-transport',
36
+ text: 'Public transport',
37
+ view: true,
38
+ },
39
+ {
40
+ active: false,
41
+ href: '/activity/activity-kilometer-sheet',
42
+ text: 'Kilometer sheet',
43
+ view: true,
44
+ },
45
+ ],
46
+ text: 'Activity',
47
+ view: true,
48
+ viewSubMenu: true,
49
+ },
50
+ {
51
+ active: false,
52
+ href: '/staff/staff-add',
53
+ icon: 'staff',
54
+ submenu: [
55
+ {
56
+ active: false,
57
+ href: '/staff/staff-add',
58
+ text: 'Staff Add',
59
+ view: true,
60
+ },
61
+ {
62
+ active: false,
63
+ href: '/staff/staff-view',
64
+ text: 'Staff View',
65
+ view: true,
66
+ },
67
+ {
68
+ active: false,
69
+ href: '/staff/staff-group',
70
+ text: 'Staff Group',
71
+ view: true,
72
+ },
73
+ ],
74
+ text: 'Staff',
75
+ view: true,
76
+ viewSubMenu: true,
77
+ },
78
+ {
79
+ active: false,
80
+ href: '/services',
81
+ icon: 'travelPrograms',
82
+ text: 'Services',
83
+ view: true,
84
+ viewSubMenu: false,
85
+ },
86
+ {
87
+ active: false,
88
+ href: '/billing',
89
+ icon: 'billing',
90
+ text: 'Billing',
91
+ view: true,
92
+ viewSubMenu: false,
93
+ },
94
+ {
95
+ active: false,
96
+ href: '/setting/setting-company',
97
+ icon: 'setting',
98
+ submenu: [
99
+ {
100
+ active: false,
101
+ href: '/setting/setting-company',
102
+ text: 'Company',
103
+ view: true,
104
+ },
105
+ {
106
+ active: false,
107
+ href: '/setting/setting-wallet',
108
+ text: 'Wallet',
109
+ view: true,
110
+ },
111
+ ],
112
+ text: 'Setting',
113
+ view: true,
114
+ viewSubMenu: true,
115
+ },
116
+ {
117
+ active: false,
118
+ href: '/order-taxi',
119
+ icon: 'orderTaxi',
120
+ text: 'Order Taxi',
121
+ view: true,
122
+ viewSubMenu: false,
123
+ },
124
+ {
125
+ active: false,
126
+ href: '/dashboards',
127
+ icon: 'dashboardsUwa',
128
+ text: 'Dashboards',
129
+ view: true,
130
+ viewSubMenu: false,
131
+ },
132
+ {
133
+ active: false,
134
+ href: '/projects',
135
+ icon: 'projectsUwa',
136
+ text: 'Projects',
137
+ view: true,
138
+ viewSubMenu: false,
139
+ },
140
+ {
141
+ active: false,
142
+ href: '/permissions/permissions-manage-staff',
143
+ icon: 'permissions',
144
+ submenu: [
145
+ {
146
+ active: false,
147
+ href: '/permissions/permissions-manage-staff',
148
+ text: 'Permissions',
149
+ view: true,
150
+ },
151
+ ],
152
+ text: 'Permissions',
153
+ view: true,
154
+ viewSubMenu: true,
155
+ },
156
+ {
157
+ active: false,
158
+ href: '#',
159
+ icon: 'analytics',
160
+ submenu: [
161
+ {
162
+ active: false,
163
+ href: '/analytics/analytics-dashboard',
164
+ text: 'Dashboard',
165
+ view: true,
166
+ },
167
+ {
168
+ active: false,
169
+ href: '/analytics/analytics-taxi',
170
+ text: 'Taxi',
171
+ view: true,
172
+ },
173
+ {
174
+ active: false,
175
+ href: '/analytics/analytics-tollsparking',
176
+ text: 'Parking',
177
+ view: true,
178
+ },
179
+ ],
180
+ text: 'Analytics',
181
+ view: true,
182
+ viewSubMenu: true,
183
+ },
184
+ {
185
+ active: false,
186
+ href: '#',
187
+ icon: 'legal',
188
+ submenu: [
189
+ {
190
+ active: false,
191
+ href: '/legal/dashboard',
192
+ text: 'Privacy policy',
193
+ view: true,
194
+ },
195
+ {
196
+ active: false,
197
+ href: '/legal/taxi',
198
+ text: 'General terms',
199
+ view: true,
200
+ },
201
+ {
202
+ active: false,
203
+ href: '/legal/tollsparking',
204
+ text: 'Particular terms',
205
+ view: true,
206
+ },
207
+ ],
208
+ text: 'Legal',
209
+ view: true,
210
+ viewSubMenu: true,
211
+ },
212
+ {
213
+ active: false,
214
+ href: '/home',
215
+ icon: 'info',
216
+ text: 'User Guide',
217
+ view: true,
218
+ viewSubMenu: false,
219
+ },
220
+ {
221
+ active: false,
222
+ href: '/home',
223
+ icon: 'profile',
224
+ text: 'My profile',
225
+ view: true,
226
+ viewSubMenu: false,
227
+ },
228
+ ]
package/molecules/ItemMenu/ItemMenu.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import PropTypes from 'prop-types'
3
+ import Link from 'next/link'
3
4
 
4
5
  import styles from './ItemMenu.module.css'
5
6
  import { options } from './constants'
@@ -7,7 +8,7 @@ import withStyles from '../../hocs/withStyles'
7
8
 
8
9
  import Icon from '../../atoms/Icon'
9
10
 
10
- export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu }) => {
11
+ export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, itemHref, itemActive }) => {
11
12
 
12
13
  //create initial menuCollapse state using useState hook
13
14
  const [subMenuCollapse, setSubMenuCollapse] = useState(false)
@@ -22,45 +23,50 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
22
23
  if (!subMenu) {
23
24
  return (
24
25
  <>
25
- <li className={getStyles('pro-menu-item')}>
26
+ <Link href={itemHref} passHref>
27
+ <li className={getStyles('pro-menu-item', { 'active': itemActive })}>
26
28
 
27
- <div className={getStyles('pro-inner-item')}>
29
+ <div className={getStyles('pro-inner-item')}>
28
30
 
29
- <span className={getStyles('pro-icon-wrapper')}>
31
+ <span className={getStyles('pro-icon-wrapper')}>
30
32
 
31
- <span className={getStyles('pro-icon')}>
32
- <Icon
33
- size={size}
34
- name={icon}
35
- color={color}
36
- background={background}
37
- onClick={function noRefCheck() { }}
38
- />
39
- </span>
33
+ <span className={getStyles('pro-icon')}>
40
34
 
41
- </span>
35
+ <Icon
36
+ size={size}
37
+ name={icon}
38
+ color={ itemActive ? 'primary' : color}
39
+ background={background}
40
+ onClick={function noRefCheck() { }}
41
+ />
42
42
 
43
- <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
43
+ </span>
44
44
 
45
- </div>
45
+ </span>
46
46
 
47
- </li>
47
+ <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
48
+
49
+ </div>
50
+
51
+ </li>
52
+ </Link>
48
53
  </>
49
54
  )
50
55
  } else {
51
56
  return (
52
57
  <>
53
- <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse })} title="Home" href="/">
58
+ <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse }, { 'activesubtxt': itemActive })} title="Home" href="/">
54
59
 
55
60
  <div className={getStyles('pro-inner-item')} onClick={subMenuIconClick}>
56
61
 
57
62
  <span className={getStyles('pro-icon-wrapper')}>
58
63
 
59
64
  <span className={getStyles('pro-icon')}>
65
+
60
66
  <Icon
61
67
  size={size}
62
68
  name={icon}
63
- color={color}
69
+ color={ itemActive ? 'primary' : color}
64
70
  background={background}
65
71
  onClick={function noRefCheck() { }}
66
72
  />
@@ -68,7 +74,7 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
68
74
 
69
75
  </span>
70
76
 
71
- <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
77
+ <span className={getStyles('pro-item-content', 'title', { 'color': color })}>{children}</span>
72
78
 
73
79
  <span className={getStyles('pro-arrow-wrapper')}>
74
80
  <span className={getStyles('pro-arrow')}></span>
@@ -81,10 +87,12 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
81
87
  <ul>
82
88
 
83
89
  {itemSubmenu.map((item, index) => (
84
- <li key={index} className={getStyles('pro-menu-item')} href={item.href}>
85
- <div className={getStyles('pro-inner-item')} role="button">
86
- <span className={getStyles('pro-item-content')}>{item.text}</span></div>
87
- </li>
90
+ <Link key={index} href={item.href} passHref>
91
+ <li className={getStyles('pro-menu-item', { 'activesub': item.active })}>
92
+ <div className={getStyles('pro-inner-item')} role="button">
93
+ <span className={getStyles('pro-item-content')}>{item.text}</span></div>
94
+ </li>
95
+ </Link>
88
96
  ))}
89
97
  </ul>
90
98
  </div>
@@ -102,6 +110,7 @@ ItemMenu.propTypes = {
102
110
  children: PropTypes.node.isRequired,
103
111
  getStyles: PropTypes.func.isRequired,
104
112
  subMenu: PropTypes.bool.isRequired,
113
+ itemActive: PropTypes.bool,
105
114
  icon: PropTypes.oneOf(options.icons),
106
115
  size: PropTypes.oneOf(options.sizes),
107
116
  color: PropTypes.oneOf(options.colors),
@@ -110,10 +119,12 @@ ItemMenu.propTypes = {
110
119
 
111
120
  ItemMenu.defaultProps = {
112
121
  subMenu: false,
122
+ itemActive: false,
113
123
  icon: 'home',
114
124
  size: 'lg',
115
125
  color: 'highlight',
116
126
  background: 'transparent',
127
+ itemHref: '/',
117
128
  getStyles: () => { },
118
129
  }
119
130
 
package/molecules/ItemMenu/ItemMenu.module.css CHANGED
@@ -89,14 +89,23 @@
89
89
  color: var(--color-primary);
90
90
  }
91
91
 
92
-
93
92
  /* ////////////////////// */
94
93
 
94
+ .pro-menu-item.active .pro-item-content {
95
+ color: var(--color-primary);
96
+ }
95
97
 
96
- .pro-menu-item.active {
97
- color: #d8d8d8;
98
+ .pro-sub-menu .pro-menu-item.activesub .pro-item-content {
99
+ color: var(--color-primary);
98
100
  }
99
101
 
102
+ .pro-menu-item.pro-sub-menu.activesubtxt .pro-inner-item .pro-item-content.title {
103
+ color: var(--color-primary);
104
+ /* font-size: 32px; */
105
+ }
106
+
107
+ /* ////////////////////// */
108
+
100
109
  .pro-menu-item .suffix-wrapper {
101
110
  opacity: 1;
102
111
  transition: opacity 0.2s;
@@ -190,7 +199,7 @@
190
199
  }
191
200
 
192
201
  .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
193
- padding: 14px 30px 14px 15px;
202
+ padding: 10px 30px 10px 15px;
194
203
  margin: 0;
195
204
  }
196
205
 
package/molecules/ItemMenu/ItemMenu.stories.js CHANGED
@@ -16,6 +16,8 @@ export default {
16
16
  children: 'Home',
17
17
  subMenu: false,
18
18
  itemSubmenu: options.itemSubmenu,
19
+ itemActive: false,
20
+ itemHref: '/'
19
21
  },
20
22
  argTypes: {
21
23
  itemSubmenu: {
package/molecules/ItemMenu/constants.js CHANGED
@@ -18,16 +18,19 @@ export const options = {
18
18
  text: "Taxi",
19
19
  href: "/taxi",
20
20
  view: true,
21
+ active: false,
21
22
  },
22
23
  {
23
24
  text: "Parking",
24
25
  href: "/parking",
25
26
  view: true,
27
+ active: false,
26
28
  },
27
29
  {
28
30
  text: "Sharing",
29
31
  href: "/sharing",
30
32
  view: true,
33
+ active: false,
31
34
  },
32
35
  ],
33
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",
@@ -51,9 +51,11 @@
51
51
  "license": "MIT",
52
52
  "dependencies": {
53
53
  "classnames": "2.3.1",
54
+ "formik": "2.2.9",
54
55
  "react-icons": "4.3.1",
55
56
  "react-router": "6.3.0",
56
- "react-router-dom": "6.3.0"
57
+ "react-router-dom": "6.3.0",
58
+ "yup": "0.32.11"
57
59
  },
58
60
  "devDependencies": {
59
61
  "@babel/core": "7.11.6",