sbx-crm-menu-ui 1.0.0 → 2.0.0

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.
@@ -1,2 +1,9 @@
1
- import React from "react";
2
- export default function LanguageDropdown(): React.JSX.Element;
1
+ import React from 'react';
2
+ export interface Language {
3
+ code: string;
4
+ label: string;
5
+ flag: string;
6
+ }
7
+ export default function LanguageDropdown(props: {
8
+ languages: Language[];
9
+ }): React.JSX.Element;
@@ -1,2 +1,4 @@
1
1
  import React from 'react';
2
- export default function Dropdown(): React.JSX.Element;
2
+ export default function Dropdown(props: {
3
+ startNameWord: string;
4
+ }): React.JSX.Element;
@@ -1,2 +1,13 @@
1
1
  import React from 'react';
2
- export default function TopNavBarComponent(): React.JSX.Element;
2
+ import { Language } from '../../contentMenuComponent/LanguageDropdown';
3
+ interface Props {
4
+ languages: Language[];
5
+ onChooseLanguage?: (language: Language) => void;
6
+ user: {
7
+ name: string;
8
+ email: string;
9
+ };
10
+ logoSrc?: string;
11
+ }
12
+ export default function TopNavBarComponent(props: Props): React.JSX.Element;
13
+ export {};
@@ -1,3 +1,12 @@
1
+ import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
2
+ import { Route } from '../../../types/Common';
1
3
  import React from 'react';
2
- declare const SidebarComponent: () => React.JSX.Element;
4
+ interface RoutesData {
5
+ label: string;
6
+ icon: IconDefinition;
7
+ subRoutes: Route[];
8
+ }
9
+ declare const SidebarComponent: (props: {
10
+ routesData: RoutesData[];
11
+ }) => React.JSX.Element;
3
12
  export default SidebarComponent;
@@ -1,13 +1,12 @@
1
- import { Route } from "../../../../types/Common";
2
- export declare const generateSubMenuData: (labels: string[]) => Route[];
3
- declare const subMenuDataHome: Route[];
4
- declare const subMenuDataAnalytics: Route[];
5
- declare const subMenuDataProcess: Route[];
6
- declare const subMenuDataForm: Route[];
7
- declare const subMenuDataComunications: Route[];
8
- declare const subMenuDataDataProviders: Route[];
9
- declare const subMenuData: Route[];
10
- declare const subMenuDataReports: Route[];
11
- declare const subMenuDataConfig: Route[];
12
- declare const subMenuDataMarketing: Route[];
13
- export { subMenuDataHome, subMenuData, subMenuDataComunications, subMenuDataConfig, subMenuDataDataProviders, subMenuDataForm, subMenuDataReports, subMenuDataMarketing, subMenuDataAnalytics, subMenuDataProcess, };
1
+ import { Route } from '../../../../types/Common';
2
+ import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
3
+ interface View {
4
+ path: string;
5
+ name: string;
6
+ root: string;
7
+ permission: string;
8
+ views?: View[];
9
+ }
10
+ export declare const generateSubMenuData: (labels: View[]) => Route[];
11
+ export declare const icons: Record<string, IconDefinition>;
12
+ export {};
package/dist/index.css CHANGED
@@ -37,15 +37,17 @@
37
37
  color: #555;
38
38
  position: relative;
39
39
  }
40
- .crm-class-sidebar-list .cmr-class-tittle {
40
+ .crm-class-sidebar-list .crm-class-title {
41
+ text-align: left;
41
42
  font-weight: bold;
42
43
  margin-bottom: 10px;
43
44
  display: block;
44
45
  color: #3f6ad8;
46
+ font-size: 10.8px;
45
47
  }
46
48
  .crm-class-sidebar-list .crm-class-sidebar-li {
47
49
  padding: 10px 15px;
48
- font-size: 16px;
50
+ font-size: 13px;
49
51
  transition: 0.3s;
50
52
  cursor: pointer;
51
53
  display: flex;
@@ -59,14 +61,11 @@
59
61
  -o-border-radius: 4px;
60
62
  }
61
63
 
62
- .cmr-class-content-sub-menu-items {
63
- padding-top: 0.5rem;
64
- padding-bottom: 0.5rem;
65
- padding-left: 0.6rem;
66
- padding-right: 0.4rem;
64
+ .crm-class-content-sub-menu-items {
65
+ padding: 0.5rem 0.4rem 0.5rem 0.6rem;
67
66
  cursor: pointer;
68
67
  }
69
- .cmr-class-content-sub-menu-items:hover {
68
+ .crm-class-content-sub-menu-items:hover {
70
69
  background-color: #e0f3ff;
71
70
  border-radius: 4px;
72
71
  -webkit-border-radius: 4px;
@@ -95,7 +94,7 @@
95
94
  border-radius: 15px;
96
95
  }
97
96
 
98
- .cmr-class-top-nav-bar {
97
+ .crm-class-top-nav-bar {
99
98
  background-color: white;
100
99
  display: flex;
101
100
  align-items: center;
@@ -108,14 +107,14 @@
108
107
  z-index: 20;
109
108
  }
110
109
 
111
- .cmr-class-flex-container {
110
+ .crm-class-flex-container {
112
111
  display: flex;
113
112
  align-items: center;
114
113
  }
115
114
 
116
- .cmr-class-icon-container {
117
- width: 60px;
118
- height: 60px;
115
+ .crm-class-icon-container {
116
+ width: 40px;
117
+ height: 40px;
119
118
  border: none;
120
119
  padding: 0;
121
120
  outline: none;
@@ -129,7 +128,7 @@
129
128
  justify-content: center;
130
129
  }
131
130
 
132
- .cmr-class-top-nav-bar-avatar {
131
+ .crm-class-top-nav-bar-avatar {
133
132
  width: 40px;
134
133
  height: 40px;
135
134
  border: none;
@@ -146,78 +145,78 @@
146
145
  color: white;
147
146
  }
148
147
 
149
- .cmr-class-top-nav-bar-options {
148
+ .crm-class-top-nav-bar-options {
150
149
  display: flex;
151
150
  margin-left: auto;
152
151
  }
153
152
 
154
- .cmr-class-dropdown {
153
+ .crm-class-dropdown {
155
154
  position: relative;
156
155
  display: inline-flex;
157
156
  align-items: center;
158
157
  }
159
158
 
160
- .cmr-class-top-nav-bar-info-user {
159
+ .crm-class-top-nav-bar-info-user {
161
160
  display: flex;
162
161
  flex-direction: column;
163
162
  }
164
163
 
165
- .cmr-class-dropdown-content {
164
+ .crm-class-dropdown-content {
166
165
  display: none;
167
166
  position: absolute;
168
167
  background-color: #f9f9f9;
169
168
  min-width: 160px;
170
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
169
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
171
170
  padding: 12px 16px;
172
171
  z-index: 1;
173
172
  }
174
173
 
175
- .cmr-class-cursor-pointer {
174
+ .crm-class-cursor-pointer {
176
175
  cursor: pointer;
177
176
  }
178
177
 
179
- .cmr-class-font-10 {
178
+ .crm-class-font-10 {
180
179
  font-size: 10px;
181
180
  }
182
181
 
183
- .cmr-class-slate-gray {
182
+ .crm-class-slate-gray {
184
183
  color: #495057;
185
184
  }
186
185
 
187
- .cmr-class-ml-20 {
186
+ .crm-class-ml-20 {
188
187
  margin-left: 20px;
189
188
  }
190
189
 
191
- .cmr-class-mr-10 {
190
+ .crm-class-mr-10 {
192
191
  margin-right: 10px;
193
192
  }
194
193
 
195
- .cmr-class-color-icon {
194
+ .crm-class-color-icon {
196
195
  color: #495057;
197
196
  }
198
197
 
199
- .cmr-class-ml-auto {
198
+ .crm-class-ml-auto {
200
199
  margin-left: auto;
201
200
  }
202
201
 
203
- .cmr-class-list-none {
202
+ .crm-class-list-none {
204
203
  list-style-type: none;
205
204
  }
206
205
 
207
- .cmr-class-font-bold {
206
+ .crm-class-font-bold {
208
207
  font-weight: 900;
209
208
  }
210
209
 
211
- .cmr-class-mt-70 {
210
+ .crm-class-mt-70 {
212
211
  margin-top: 70px;
213
212
  }
214
213
 
215
- .cmr-class-mr-20 {
214
+ .crm-class-mr-20 {
216
215
  margin-right: 20px;
217
216
  }
218
217
 
219
218
  /*/*/
220
- .cmr-class-content-flag {
219
+ .crm-class-content-flag {
221
220
  width: 55px;
222
221
  height: 55px;
223
222
  border: none;
@@ -233,35 +232,35 @@
233
232
  justify-content: center;
234
233
  }
235
234
 
236
- .cmr-class-flag {
235
+ .crm-class-flag {
237
236
  display: inline-block;
238
237
  width: 20px;
239
238
  height: 15px;
240
239
  background-size: cover;
241
240
  }
242
241
 
243
- .cmr-class-flag.large {
242
+ .crm-class-flag.large {
244
243
  width: 30px;
245
244
  height: 20px;
246
245
  }
247
246
 
248
- .cmr-class-flag.US {
247
+ .crm-class-flag.US {
249
248
  background-image: url("https://flagcdn.com/w20/us.png");
250
249
  }
251
250
 
252
- .cmr-class-flag.ES {
251
+ .crm-class-flag.ES {
253
252
  background-image: url("https://flagcdn.com/w20/es.png");
254
253
  }
255
254
 
256
- .cmr-class-flag.NL {
255
+ .crm-class-flag.NL {
257
256
  background-image: url("https://flagcdn.com/w20/nl.png");
258
257
  }
259
258
 
260
- .cmr-class-dropdown-flag {
259
+ .crm-class-dropdown-flag {
261
260
  position: relative;
262
261
  }
263
262
 
264
- .cmr-class-dropdown-toggle {
263
+ .crm-class-dropdown-toggle {
265
264
  background: none;
266
265
  border: none;
267
266
  cursor: pointer;
@@ -269,7 +268,7 @@
269
268
  padding: 10px;
270
269
  }
271
270
 
272
- .cmr-class-dropdown-menu {
271
+ .crm-class-dropdown-menu {
273
272
  display: none;
274
273
  position: absolute;
275
274
  background-color: white;
@@ -279,16 +278,16 @@
279
278
  min-width: 200px;
280
279
  }
281
280
 
282
- .cmr-class-dropdown-menu .cmr-class-dropdown-header {
281
+ .crm-class-dropdown-menu .crm-class-dropdown-header {
283
282
  font-weight: bold;
284
283
  margin-bottom: 8px;
285
284
  }
286
285
 
287
- .cmr-class-dropdown-flag:hover .cmr-class-dropdown-menu {
286
+ .crm-class-dropdown-flag:hover .crm-class-dropdown-menu {
288
287
  display: block;
289
288
  }
290
289
 
291
- .cmr-class-dropdown-item {
290
+ .crm-class-dropdown-item {
292
291
  background: none;
293
292
  border: none;
294
293
  cursor: pointer;
@@ -299,7 +298,7 @@
299
298
  text-align: left;
300
299
  }
301
300
 
302
- .cmr-class-selected-language {
301
+ .crm-class-selected-language {
303
302
  display: flex;
304
303
  align-items: center;
305
304
  justify-items: center;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import TopNavBarComponent from './components/menu/TopNavBarComponent/TopNavBarComponent';
2
2
  import SidebarComponent from './components/menu/sidebar/Sidebar';
3
3
  import './styles.module.scss';
4
- export { TopNavBarComponent, SidebarComponent };
4
+ import { generateSubMenuData, icons } from './components/menu/sidebar/subMenuComponent/SubMenuComponent';
5
+ export { TopNavBarComponent, SidebarComponent, generateSubMenuData, icons };