imbric-theme 0.2.6 → 0.2.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,7 +1,360 @@
1
+ .divider {
2
+ height: auto;
3
+ }
4
+
1
5
  .is-home {
2
6
  display: none;
3
7
  }
4
8
 
5
- .divider {
6
- height: auto;
9
+ @keyframes swing {
10
+
11
+ 0%,
12
+ 30%,
13
+ 50%,
14
+ 70%,
15
+ 100% {
16
+ transform: rotate(0deg);
17
+ }
18
+
19
+ 10% {
20
+ transform: rotate(10deg);
21
+ }
22
+
23
+ 40% {
24
+ transform: rotate(-10deg);
25
+ }
26
+
27
+ 60% {
28
+ transform: rotate(5deg);
29
+ }
30
+
31
+ 80% {
32
+ transform: rotate(-5deg);
33
+ }
34
+ }
35
+
36
+ .header {
37
+ position: absolute;
38
+ width: 220px;
39
+ }
40
+
41
+ .pro-sidebar {
42
+ width: 100%;
43
+ min-width: 100%;
44
+ color: #adadad;
45
+ height: 100vh;
46
+ text-align: left;
47
+ transition: width, left, right, 0.3s;
48
+ position: relative;
49
+ z-index: 1009;
50
+ }
51
+
52
+ .pro-sidebar-inner {
53
+ background-color: var(--color-base-white);
54
+ box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
55
+ height: 100%;
56
+ position: relative;
57
+ z-index: 101;
58
+ }
59
+
60
+ .pro-sidebar-layout::-webkit-scrollbar {
61
+ display: none;
62
+ }
63
+
64
+ .collapsed {
65
+ width: 80px;
66
+ min-width: 80px;
67
+ }
68
+
69
+ .logotext {
70
+ padding: 8px 20px;
71
+ }
72
+
73
+ .closemenu {
74
+ color: var(--color-primary);
75
+ position: absolute;
76
+ right: -7px;
77
+ z-index: 9999;
78
+ line-height: 20px;
79
+ border-radius: 50%;
80
+ font-weight: bold;
81
+ font-size: 22px;
82
+ top: 8px;
83
+ cursor: pointer;
84
+ }
85
+
86
+ .pro-sub-menu>.pro-inner-list-item {
87
+ position: relative;
88
+ background-color: var(--color-brand-hint-of-red);
89
+ padding-left: 44px;
90
+ padding-bottom: 4px;
91
+ padding-top: 4px;
92
+ }
93
+
94
+ .pro-sidebar-content {
95
+ flex-grow: 1;
96
+ }
97
+
98
+ .pro-sidebar-inner .pro-sidebar-layout ul {
99
+ padding: 0 5px;
100
+ }
101
+
102
+ .pro-sidebar-inner .pro-sidebar-layout .active {
103
+ background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
104
+ }
105
+
106
+ .logo {
107
+ padding: 20px;
108
+ }
109
+
110
+ @media only screen and (max-width: 720px) {
111
+ html {
112
+ overflow: hidden;
113
+ }
114
+ }
115
+
116
+ /* /////////// */
117
+
118
+ .pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout {
119
+ height: 100%;
120
+ overflow-y: auto;
121
+ overflow-x: hidden;
122
+ position: relative;
123
+ display: flex;
124
+ flex-direction: column;
125
+ z-index: 101;
126
+ }
127
+
128
+ .pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout .pro-sidebar-header {
129
+ border-bottom: 1px solid rgba(173, 173, 173, 0.2);
130
+ }
131
+
132
+ .pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout .pro-sidebar-footer {
133
+ border-top: 1px solid rgba(173, 173, 173, 0.2);
134
+ }
135
+
136
+ .pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout ul {
137
+ list-style-type: none;
138
+ padding: 0;
139
+ margin: 0;
140
+ }
141
+
142
+ .pro-sidebar .overlay {
143
+ position: fixed;
144
+ top: 0;
145
+ right: 0;
146
+ bottom: 0;
147
+ left: 0;
148
+ background-color: rgba(0, 0, 0, 0.3);
149
+ z-index: 100;
150
+ display: none;
151
+ }
152
+
153
+ .pro-sidebar.collapsed {
154
+ width: 80px;
155
+ min-width: 80px;
156
+ }
157
+
158
+ @media (max-width: 480px) {
159
+ .pro-sidebar.xs {
160
+ position: fixed;
161
+ left: -270px;
162
+ }
163
+
164
+ .pro-sidebar.xs.collapsed {
165
+ left: -80px;
166
+ }
167
+
168
+ .pro-sidebar.xs.toggled {
169
+ left: 0;
170
+ }
171
+
172
+ .pro-sidebar.xs.toggled .overlay {
173
+ display: block;
174
+ }
175
+
176
+ .pro-sidebar.xs.rtl {
177
+ left: auto;
178
+ right: -270px;
179
+ }
180
+
181
+ .pro-sidebar.xs.rtl.collapsed {
182
+ left: auto;
183
+ right: -80px;
184
+ }
185
+
186
+ .pro-sidebar.xs.rtl.toggled {
187
+ left: auto;
188
+ right: 0;
189
+ }
190
+ }
191
+
192
+ @media (max-width: 576px) {
193
+ .pro-sidebar.sm {
194
+ position: fixed;
195
+ left: -270px;
196
+ }
197
+
198
+ .pro-sidebar.sm.collapsed {
199
+ left: -80px;
200
+ }
201
+
202
+ .pro-sidebar.sm.toggled {
203
+ left: 0;
204
+ }
205
+
206
+ .pro-sidebar.sm.toggled .overlay {
207
+ display: block;
208
+ }
209
+
210
+ .pro-sidebar.sm.rtl {
211
+ left: auto;
212
+ right: -270px;
213
+ }
214
+
215
+ .pro-sidebar.sm.rtl.collapsed {
216
+ left: auto;
217
+ right: -80px;
218
+ }
219
+
220
+ .pro-sidebar.sm.rtl.toggled {
221
+ left: auto;
222
+ right: 0;
223
+ }
224
+ }
225
+
226
+ @media (max-width: 768px) {
227
+ .pro-sidebar.md {
228
+ position: fixed;
229
+ left: -270px;
230
+ }
231
+
232
+ .pro-sidebar.md.collapsed {
233
+ left: -80px;
234
+ }
235
+
236
+ .pro-sidebar.md.toggled {
237
+ left: 0;
238
+ }
239
+
240
+ .pro-sidebar.md.toggled .overlay {
241
+ display: block;
242
+ }
243
+
244
+ .pro-sidebar.md.rtl {
245
+ left: auto;
246
+ right: -270px;
247
+ }
248
+
249
+ .pro-sidebar.md.rtl.collapsed {
250
+ left: auto;
251
+ right: -80px;
252
+ }
253
+
254
+ .pro-sidebar.md.rtl.toggled {
255
+ left: auto;
256
+ right: 0;
257
+ }
258
+ }
259
+
260
+ @media (max-width: 992px) {
261
+ .pro-sidebar.lg {
262
+ position: fixed;
263
+ left: -270px;
264
+ }
265
+
266
+ .pro-sidebar.lg.collapsed {
267
+ left: -80px;
268
+ }
269
+
270
+ .pro-sidebar.lg.toggled {
271
+ left: 0;
272
+ }
273
+
274
+ .pro-sidebar.lg.toggled .overlay {
275
+ display: block;
276
+ }
277
+
278
+ .pro-sidebar.lg.rtl {
279
+ left: auto;
280
+ right: -270px;
281
+ }
282
+
283
+ .pro-sidebar.lg.rtl.collapsed {
284
+ left: auto;
285
+ right: -80px;
286
+ }
287
+
288
+ .pro-sidebar.lg.rtl.toggled {
289
+ left: auto;
290
+ right: 0;
291
+ }
292
+ }
293
+
294
+ @media (max-width: 1200px) {
295
+ .pro-sidebar.xl {
296
+ position: fixed;
297
+ left: -270px;
298
+ }
299
+
300
+ .pro-sidebar.xl.collapsed {
301
+ left: -80px;
302
+ }
303
+
304
+ .pro-sidebar.xl.toggled {
305
+ left: 0;
306
+ }
307
+
308
+ .pro-sidebar.xl.toggled .overlay {
309
+ display: block;
310
+ }
311
+
312
+ .pro-sidebar.xl.rtl {
313
+ left: auto;
314
+ right: -270px;
315
+ }
316
+
317
+ .pro-sidebar.xl.rtl.collapsed {
318
+ left: auto;
319
+ right: -80px;
320
+ }
321
+
322
+ .pro-sidebar.xl.rtl.toggled {
323
+ left: auto;
324
+ right: 0;
325
+ }
326
+ }
327
+
328
+ @media (max-width: 1600px) {
329
+ .pro-sidebar.xxl {
330
+ position: fixed;
331
+ left: -270px;
332
+ }
333
+
334
+ .pro-sidebar.xxl.collapsed {
335
+ left: -80px;
336
+ }
337
+
338
+ .pro-sidebar.xxl.toggled {
339
+ left: 0;
340
+ }
341
+
342
+ .pro-sidebar.xxl.toggled .overlay {
343
+ display: block;
344
+ }
345
+
346
+ .pro-sidebar.xxl.rtl {
347
+ left: auto;
348
+ right: -270px;
349
+ }
350
+
351
+ .pro-sidebar.xxl.rtl.collapsed {
352
+ left: auto;
353
+ right: -80px;
354
+ }
355
+
356
+ .pro-sidebar.xxl.rtl.toggled {
357
+ left: auto;
358
+ right: 0;
359
+ }
7
360
  }
@@ -1,4 +1,5 @@
1
1
  import { Sidebar, styles } from '.'
2
+ import { options } from './constants'
2
3
 
3
4
  import { getTemplate } from '../../helpers/storybook'
4
5
 
@@ -8,64 +9,7 @@ export default {
8
9
  title: 'Layout/Sidebar',
9
10
  component: Sidebar,
10
11
  args: {
11
- options: {
12
- isHome: {
13
- text: "Home",
14
- view: true
15
- },
16
- isActivity: {
17
- text: "Activity",
18
- view: true
19
- },
20
- isStaff: {
21
- text: "Staff",
22
- view: true
23
- },
24
- isServices: {
25
- text: "Services",
26
- view: true
27
- },
28
- isBilling: {
29
- text: "Billing",
30
- view: true
31
- },
32
- isSetting: {
33
- text: "Setting",
34
- view: true
35
- },
36
- isOrderTaxi: {
37
- text: "Order Taxi",
38
- view: true
39
- },
40
- isDashboards: {
41
- text: "Dashboards",
42
- view: true
43
- },
44
- isProjects: {
45
- text: "Projects",
46
- view: true
47
- },
48
- isPermissions: {
49
- text: "Permissions",
50
- view: true
51
- },
52
- isAnalytics: {
53
- text: "Analytics",
54
- view: true
55
- },
56
- isLegal: {
57
- text: "Legal",
58
- view: true
59
- },
60
- isUserGuide: {
61
- text: "User Guide",
62
- view: true
63
- },
64
- isMyProfile: {
65
- text: "My profile",
66
- view: true
67
- },
68
- },
12
+ options: options.itemsMenu
69
13
  },
70
14
  argTypes: {
71
15
  options: {
@@ -1,84 +1,216 @@
1
1
  export const subItems = {
2
2
 
3
- subItemsActivity: [
3
+ subItemsLegal: [
4
4
  {
5
- href: '/activity/taxi',
6
- title: 'Taxi',
5
+ href: 'https://www.imbric.com/privacypolicy/',
6
+ title: 'Privacy policy',
7
7
  },
8
8
  {
9
- href: '/activity/parking',
10
- title: 'Parking',
9
+ href: 'https://www.imbric.com/general-terms/',
10
+ title: 'General terms',
11
11
  },
12
12
  {
13
- href: '/activity/sharing',
14
- title: 'Sharing',
13
+ href: 'https://www.imbric.com/particular-terms/',
14
+ title: 'Particular terms',
15
15
  },
16
16
  ],
17
17
 
18
- subItemsStaff: [
19
- {
20
- href: '/staff/taxi',
21
- title: 'People Add',
18
+ }
19
+
20
+ export const options = {
21
+ itemsMenu: [
22
+ {
23
+ text: "Home",
24
+ icon: "home",
25
+ href: "/home",
26
+ view: true,
27
+ },
28
+ {
29
+ text: "Activity",
30
+ icon: "activity",
31
+ href: "/home",
32
+ view: true,
33
+ submenu: [
34
+ {
35
+ text: "Taxi",
36
+ href: "/taxi",
37
+ view: true,
38
+ },
39
+ {
40
+ text: "Parking",
41
+ href: "/parking",
42
+ view: true,
43
+ },
44
+ {
45
+ text: "Sharing",
46
+ href: "/sharing",
47
+ view: true,
48
+ },
49
+ {
50
+ text: "Public transport",
51
+ href: "/publictransport ",
52
+ view: true,
53
+ },
54
+ {
55
+ text: "Kilometer sheet",
56
+ href: "/kilometersheet",
57
+ view: true,
58
+ }
59
+ ],
60
+ },
61
+ {
62
+ text: "Staff",
63
+ icon: "staff",
64
+ href: "/home",
65
+ view: true,
66
+ submenu: [
67
+ {
68
+ text: "People Add",
69
+ href: "/staff/taxi",
70
+ view: true,
71
+ },
72
+ {
73
+ text: "People View",
74
+ href: "/staff/taxi",
75
+ view: true,
76
+ },
77
+ {
78
+ text: "People Group",
79
+ href: "/staff/taxi",
80
+ view: true,
81
+ },
82
+
83
+ ],
22
84
  },
23
85
  {
24
- href: '/staff/parking',
25
- title: 'People View',
86
+ text: "Services",
87
+ icon: "travelPrograms",
88
+ href: "/home",
89
+ view: true,
90
+
26
91
  },
27
92
  {
28
- href: '/staff/sharing',
29
- title: 'People Group',
30
- },
31
- ],
93
+ text: "Billing",
94
+ icon: "billing",
95
+ href: "/home",
96
+ view: true,
32
97
 
33
- subItemsSetting: [
34
- {
35
- href: '/staff/taxi',
36
- title: 'People Add',
37
98
  },
38
99
  {
39
- href: '/staff/parking',
40
- title: 'People View',
100
+ text: "Setting",
101
+ icon: "setting",
102
+ href: "/home",
103
+ view: true,
104
+ submenu: [
105
+ {
106
+ text: "Company",
107
+ href: "/company/edit",
108
+ view: true,
109
+ },
110
+ {
111
+ text: "Wallet",
112
+ href: "/company/wallet",
113
+ view: true,
114
+ },
115
+
116
+ ],
117
+
41
118
  },
42
119
  {
43
- href: '/staff/sharing',
44
- title: 'People Group',
45
- },
46
- ],
120
+ text: "Order Taxi",
121
+ icon: "orderTaxi",
122
+ href: "/home",
123
+ view: true,
47
124
 
48
- subItemsPermissions: [
49
- {
50
- href: '/permissions/managestaff',
51
- title: 'Permissions',
52
125
  },
53
- ],
54
-
55
- subItemsAnalytics: [
56
126
  {
57
- href: '/analytics/dashboard',
58
- title: 'Dashboard',
127
+ text: "Dashboards",
128
+ icon: "dashboardsUwa",
129
+ href: "/home",
130
+ view: true,
131
+
59
132
  },
60
133
  {
61
- href: '/analytics/taxi',
62
- title: 'Taxi',
134
+ text: "Projects",
135
+ icon: "projectsUwa",
136
+ href: "/home",
137
+ view: true,
138
+
63
139
  },
64
140
  {
65
- href: '/analytics/tollsparking',
66
- title: 'Parking',
67
- },
68
- ],
141
+ text: "Permissions",
142
+ icon: "permissions",
143
+ href: "/home",
144
+ view: true,
145
+ submenu: [
146
+ {
147
+ text: "Permissions",
148
+ href: "/permissions/managestaff",
149
+ view: true,
150
+ },
151
+
152
+ ],
153
+ },
154
+ {
155
+ text: "Analytics",
156
+ icon: "analytics",
157
+ href: "/home",
158
+ view: true,
159
+ submenu: [
160
+ {
161
+ text: "Dashboard",
162
+ href: "/analytics/dashboard",
163
+ view: true,
164
+ },
165
+ {
166
+ text: "Taxi",
167
+ href: "/analytics/taxi",
168
+ view: true,
169
+ },
170
+ {
171
+ text: "Parking",
172
+ href: "/analytics/tollsparking",
173
+ view: true,
174
+ },
175
+ ],
176
+ },
177
+ {
178
+ text: "Legal",
179
+ icon: "legal",
180
+ href: "/home",
181
+ view: true,
182
+ submenu: [
183
+ {
184
+ text: "Privacy policy",
185
+ href: "/legal/dashboard",
186
+ view: true,
187
+ },
188
+ {
189
+ text: "General terms",
190
+ href: "/legal/taxi",
191
+ view: true,
192
+ },
193
+ {
194
+ text: "Particular terms",
195
+ href: "/legal/tollsparking",
196
+ view: true,
197
+ },
198
+ ],
69
199
 
70
- subItemsLegal: [
71
- {
72
- href: 'https://www.imbric.com/privacypolicy/',
73
- title: 'Privacy policy',
74
200
  },
75
201
  {
76
- href: 'https://www.imbric.com/general-terms/',
77
- title: 'General terms',
202
+ text: "User Guide",
203
+ icon: "info",
204
+ href: "/home",
205
+ view: true,
206
+
78
207
  },
79
208
  {
80
- href: 'https://www.imbric.com/particular-terms/',
81
- title: 'Particular terms',
209
+ text: "My profile",
210
+ icon: "profile",
211
+ href: "/home",
212
+ view: true,
213
+
82
214
  },
83
215
  ],
84
216
 
@@ -1,4 +1,4 @@
1
1
  export { default, Sidebar } from './Sidebar'
2
- export { subItems } from './constants'
2
+ export { subItems, options } from './constants'
3
3
  export { default as styles } from './Sidebar.module.css'
4
4
  export { default as SidebarCss } from './Sidebar.css'