imbric-theme 0.2.6 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/index.js +0 -2
  2. package/layout/Sidebar/Sidebar.css +5 -666
  3. package/layout/Sidebar/Sidebar.js +106 -250
  4. package/layout/Sidebar/Sidebar.module.css +355 -2
  5. package/layout/Sidebar/Sidebar.stories.js +2 -58
  6. package/layout/Sidebar/constants.js +182 -50
  7. package/layout/Sidebar/index.js +1 -1
  8. package/molecules/ItemMenu/ItemMenu.js +121 -0
  9. package/molecules/ItemMenu/ItemMenu.module.css +378 -0
  10. package/molecules/ItemMenu/ItemMenu.stories.js +40 -0
  11. package/molecules/ItemMenu/constants.js +33 -0
  12. package/molecules/ItemMenu/index.js +3 -0
  13. package/package.json +2 -3
package/layout/Sidebar/Sidebar.js CHANGED
@@ -2,28 +2,72 @@ 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 { subItems } from './constants'
5
+ import { subItems, options } from './constants'
6
6
 
7
7
  //import react pro sidebar components
8
- import {
9
- ProSidebar,
10
- Menu,
11
- MenuItem,
12
- SubMenu,
13
- SidebarHeader,
14
- SidebarFooter,
15
- SidebarContent,
16
- } from "react-pro-sidebar"
17
-
18
- // import styles from './Sidebar.module.css'
8
+ // import {
9
+ // ProSidebar,
10
+ // Menu,
11
+ // MenuItem,
12
+ // SubMenu,
13
+ // SidebarHeader,
14
+ // SidebarFooter,
15
+ // SidebarContent,
16
+ // } from "react-pro-sidebar"
17
+
18
+ import styles from './Sidebar.module.css'
19
19
  //import sidebar css from react-pro-sidebar module and our custom css
20
20
  // import "react-pro-sidebar/dist/css/styles.css"
21
21
 
22
22
  import Picture from '../../atoms/Picture'
23
23
  import Icon from '../../atoms/Icon'
24
24
  import Divider from '../../atoms/Divider'
25
-
26
- export const Sidebar = ({ getStyles, options }) => {
25
+ import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
26
+
27
+ const items = [
28
+ {
29
+ href: '/',
30
+ icon: 'home',
31
+ title: 'Dashboard'
32
+ },
33
+ {
34
+ href: '/customers',
35
+ icon: 'home',
36
+ title: 'Customers'
37
+ },
38
+ {
39
+ href: '/products',
40
+ icon: 'home',
41
+ title: 'Products'
42
+ },
43
+ {
44
+ href: '/account',
45
+ icon: 'home',
46
+ title: 'Account'
47
+ },
48
+ {
49
+ href: '/settings',
50
+ icon: 'home',
51
+ title: 'Settings'
52
+ },
53
+ {
54
+ href: '/login',
55
+ icon: 'home',
56
+ title: 'Login'
57
+ },
58
+ {
59
+ href: '/register',
60
+ icon: 'home',
61
+ title: 'Register'
62
+ },
63
+ {
64
+ href: '/404',
65
+ icon: 'home',
66
+ title: 'Error'
67
+ }
68
+ ];
69
+
70
+ export const Sidebar = ({ getStyles }) => {
27
71
 
28
72
  //create initial menuCollapse state using useState hook
29
73
  const [menuCollapse, setMenuCollapse] = useState(false)
@@ -36,260 +80,72 @@ export const Sidebar = ({ getStyles, options }) => {
36
80
 
37
81
  return (
38
82
  <>
39
- <div id="header">
40
- {/* collapsed props to change menu size using menucollapse state */}
41
- <ProSidebar collapsed={menuCollapse}>
42
- <SidebarHeader>
43
- <div className="logotext">
44
- {/* small and big change using menucollapse state */}
45
- {/* <p>{menuCollapse ? "Logo" : "Big Logo"}</p> */}
46
- {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
47
- </div>
48
- <div className="closemenu" onClick={menuIconClick}>
49
- {/* changing menu collapse icon on click */}
50
- {menuCollapse ? (
51
-
52
- <Icon
53
- name="angleRight"
54
- onClick={function noRefCheck() { }}
55
- />
56
-
57
- ) : (
58
- <Icon
59
- name="angleLeft"
60
- onClick={function noRefCheck() { }}
61
- />
62
- )}
63
- </div>
64
- </SidebarHeader>
65
- <SidebarContent>
66
- <Menu iconShape="circle">
83
+ <div className={getStyles('header', {
84
+ 'collapsed': menuCollapse,
85
+ })}>
67
86
 
68
- {/* {options.forEach(itemMenu => {
69
- console.log(itemMenu); //This does ifre
87
+ <div className={getStyles('pro-sidebar')}>
70
88
 
71
- })} */}
89
+ <div className={getStyles('pro-sidebar-inner')}>
72
90
 
73
- {options.isHome.view ?
74
- <MenuItem
75
- title={'Home'}
76
- icon={(<Icon color="inverted" name="home" onClick={function noRefCheck() { }} size="md" />)}
77
- href={'/'}
78
- >
79
- Home
80
- </MenuItem>
81
- : null
82
- }
91
+ <div className={getStyles('pro-sidebar-layout')}>
83
92
 
84
- <Divider color="highlight" />
93
+ <div className={getStyles('pro-sidebar-header')}>
85
94
 
86
- {options.isActivity.view ?
87
- <SubMenu
88
- title={'Activity'}
89
- icon={(<Icon color="inverted" name="activity" onClick={function noRefCheck() { }} size="md" />)}
90
- onOpenChange={(open) => {
95
+ <div className={getStyles('logotext')}>
96
+ {/* small and big change using menucollapse state */}
97
+ {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
98
+ </div>
99
+ <div className={getStyles('closemenu')} onClick={menuIconClick}>
100
+ {/* changing menu collapse icon on click */}
101
+ {menuCollapse ? (
91
102
 
92
- }}
103
+ <Icon
104
+ name="angleRight"
105
+ onClick={function noRefCheck() { }}
106
+ />
93
107
 
94
- >
95
- {subItems.subItemsActivity.map((item) => (
96
- <MenuItem
97
- key={item.title}
98
- href={item.href}
99
- title={item.title}
100
- >
101
- {item.title}
102
- </MenuItem>
103
- ))}
104
- </SubMenu>
105
- : null
106
- }
108
+ ) : (
109
+ <Icon
110
+ name="angleLeft"
111
+ onClick={function noRefCheck() { }}
112
+ />
113
+ )}
114
+ </div>
107
115
 
108
- {options.isStaff.view ?
109
- <SubMenu
110
- title={'Staff'}
111
- icon={(<Icon color="inverted" name="staff" onClick={function noRefCheck() { }} size="md" />)}
112
- onOpenChange={(open) => {
116
+ </div>
113
117
 
114
- }}
115
- >
116
- {subItems.subItemsStaff.map((item) => (
117
- <MenuItem
118
- key={item.title}
119
- href={item.href}
120
- title={item.title}
121
- >
122
- {item.title}
123
- </MenuItem>
124
- ))}
125
- </SubMenu>
126
- : null
127
- }
118
+ <div className={getStyles('pro-sidebar-content')}>
128
119
 
129
- {options.isServices.view ?
130
- <MenuItem
131
- title={'Services'}
132
- icon={(<Icon color="inverted" name="travelPrograms" onClick={function noRefCheck() { }} size="lg" />)}
133
- href={'/services'}
134
- >
135
- Services
136
- </MenuItem>
137
- : null
138
- }
139
- {options.isBilling.view ?
140
- <MenuItem
141
- title={'Billing'}
142
- icon={(<Icon color="inverted" name="billing" onClick={function noRefCheck() { }} size="md" />)}
143
- href={'/billing'}
144
- >
145
- Billing
146
- </MenuItem>
147
- : null
148
- }
120
+ <nav className={getStyles('pro-menu', 'inner-submenu-arrows')}>
149
121
 
150
- {options.isSetting.view ?
151
- <SubMenu
152
- title={'Setting'}
153
- icon={(<Icon color="inverted" name="setting" onClick={function noRefCheck() { }} size="md" />)}
154
- >
155
- {subItems.subItemsSetting.map((item) => (
156
- <MenuItem
157
- key={item.title}
158
- href={item.href}
159
- title={item.title}
160
- >
161
- {item.title}
162
- </MenuItem>
163
- ))}
164
- </SubMenu>
165
- : null
166
- }
122
+ <ul>
167
123
 
168
- <Divider color="highlight" />
124
+ {options.itemsMenu.map((item) => (
125
+ item.view ?
126
+ <ItemMenu
127
+ icon={item.icon}
128
+ subMenu={item.submenu}
129
+ itemSubmenu={item.submenu}
130
+ >
131
+ {item.text}
132
+ </ItemMenu>
133
+ : null
134
+
135
+ ))}
169
136
 
170
- {options.isOrderTaxi.view ?
171
- <MenuItem
172
- title={'orderTaxi'}
173
- icon={(<Icon color="inverted" name="orderTaxi" onClick={function noRefCheck() { }} size="lg" />)}
174
- href={'/orderTaxi'}
175
- >
176
- Order Taxi
177
- </MenuItem>
178
- : null
179
- }
137
+ </ul>
180
138
 
181
- <Divider color="highlight" />
139
+ </nav>
182
140
 
183
- {options.isDashboards.view ?
184
- <MenuItem
185
- title={'dashboards'}
186
- icon={(<Icon color="inverted" name="dashboardsUwa" onClick={function noRefCheck() { }} size="md" />)}
187
- href={'/dashboards'}
188
- >
189
- Dashboards
190
- </MenuItem>
191
- : null
192
- }
141
+ </div>
193
142
 
194
- {options.isProjects.view ?
195
- <MenuItem
196
- title={'projects'}
197
- icon={(<Icon color="inverted" name="projectsUwa" onClick={function noRefCheck() { }} size="md" />)}
198
- href={'/projects'}
199
- >
200
- Projects
201
- </MenuItem>
202
- : null
203
- }
204
-
205
- {options.isPermissions.view ?
206
- <SubMenu
207
- title={'Permissions'}
208
- icon={(<Icon color="inverted" name="permissions" onClick={function noRefCheck() { }} size="md" />)}
209
- >
210
- {subItems.subItemsPermissions.map((item) => (
211
- <MenuItem
212
- key={item.title}
213
- href={item.href}
214
- title={item.title}
215
- >
216
- {item.title}
217
- </MenuItem>
218
- ))}
219
- </SubMenu>
220
- : null
221
- }
222
-
223
- {options.isAnalytics.view ?
224
- <SubMenu
225
- title={'Analytics'}
226
- icon={(<Icon color="inverted" name="analytics" onClick={function noRefCheck() { }} size="md" />)}
227
- >
228
- {subItems.subItemsAnalytics.map((item) => (
229
- <MenuItem
230
- key={item.title}
231
- href={item.href}
232
- title={item.title}
233
- >
234
- {item.title}
235
- </MenuItem>
236
- ))}
237
- </SubMenu>
238
- : null
239
- }
240
-
241
- <Divider color="highlight" />
242
-
243
- {options.isLegal.view ?
244
- <SubMenu
245
- title={'Legal'}
246
- icon={(<Icon color="inverted" name="legal" onClick={function noRefCheck() { }} size="md" />)}
247
- >
248
- {subItems.subItemsLegal.map((item) => (
249
- <MenuItem
250
- key={item.title}
251
- href={item.href}
252
- title={item.title}
253
- >
254
- {item.title}
255
- </MenuItem>
256
- ))}
257
- </SubMenu>
258
- : null
259
- }
260
-
261
- {options.isUserGuide.view ?
262
- <MenuItem
263
- title={'UserGuide'}
264
- icon={(<Icon color="inverted" name="info" onClick={function noRefCheck() { }} size="md" />)}
265
- href={'/userGuide'}
266
- >
267
- User Guide
268
- </MenuItem>
269
- : null
270
- }
143
+ </div>
271
144
 
272
- <Divider color="highlight" />
145
+ </div>
273
146
 
274
- {options.isMyProfile.view ?
275
- <MenuItem
276
- title={'my-profile'}
277
- icon={(<Icon color="inverted" name="profile" onClick={function noRefCheck() { }} size="md" />)}
278
- href={'/my-profile'}
279
- >
280
- My profile
281
- </MenuItem>
282
- : null
283
- }
147
+ </div>
284
148
 
285
- </Menu>
286
- </SidebarContent>
287
- <SidebarFooter>
288
- <Menu iconShape="circle">
289
- <MenuItem icon={(<Icon color="inverted" name="logout" onClick={function noRefCheck() { }} size="md" />)}>Logout</MenuItem>
290
- </Menu>
291
- </SidebarFooter>
292
- </ProSidebar>
293
149
  </div>
294
150
  </>
295
151
  )
@@ -309,4 +165,4 @@ Sidebar.defaultProps = {
309
165
  getStyles: () => { },
310
166
  }
311
167
 
312
- export default withStyles(subItems)(Sidebar)
168
+ export default withStyles(styles)(Sidebar)