-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
591 lines (580 loc) · 52.9 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
import React from 'react';
// import './style.scss';
import './Style/App.scss';
function App() {
const handleEvent = (event: any) => {
console.log(event.target);
const anchors = document.getElementsByClassName('JC-nav-item');
for (const anchor of anchors) {
anchor.className = anchor.className.replace('selected', '');
}
const otherAnchors = document.getElementsByClassName('JC-nav');
for (const anchor of otherAnchors) {
anchor.className = anchor.className.replace('opened', '');
}
(event.target as any).className = `${
(event.target as any).className
} selected`;
const titles = document.getElementsByClassName('JC-page-header__title');
for (const title of titles) {
title.innerHTML = event.target.textContent;
}
};
const handleToggle = (event: any) => {
event.target.parentElement.parentElement.className =
event.target.parentElement.parentElement.className.includes('closed')
? event.target.parentElement.parentElement.className.replace(
'closed',
''
)
: `${event.target.parentElement.parentElement.className} closed`;
};
const handleToggleMobile = (event: any) => {
event.target.parentElement.parentElement.className =
event.target.parentElement.parentElement.className.includes('opened')
? event.target.parentElement.parentElement.className.replace(
'opened',
''
)
: `${event.target.parentElement.parentElement.className} opened`;
};
return (
<div className="JC-wrapper">
<nav className="JC-nav ">
<div className="JC-nav__header">
<div className="JC-nav__header__logo-box">
<svg
width="120"
height="20"
viewBox="0 0 120 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1_5968)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.9791 15.6551C34.8776 14.7627 35.3823 13.5522 35.3823 12.29C35.3821 10.8093 34.6883 9.41294 33.5051 8.51239C32.3219 7.61181 30.7842 7.30963 29.3449 7.69483C29.2859 6.12873 28.4987 4.67851 27.2139 3.76893C25.9292 2.85935 24.2924 2.59336 22.7831 3.04888C21.4513 0.844507 18.8881 -0.314454 16.3403 0.135738C13.7924 0.585954 11.7887 2.55187 11.3039 5.07717C11.1891 5.06901 11.0735 5.06337 10.9563 5.06337C9.07025 5.06339 7.35967 6.163 6.58682 7.87223C4.79443 7.15893 2.7462 7.58433 1.39156 8.9512C0.0369569 10.3181 -0.359235 12.3592 0.386685 14.1285C1.1326 15.8977 2.87479 17.049 4.80564 17.049C4.81682 17.049 4.82791 17.0485 4.83902 17.0483H4.83919C4.84785 17.0478 4.85654 17.0476 4.86528 17.0476L4.86477 17.049H6.12446C6.40766 15.8291 7.74665 14.8076 9.58329 14.3142C8.56109 13.3104 8.25031 11.7927 8.79653 10.4719C9.34277 9.1511 10.6379 8.28878 12.0752 8.28878C13.5126 8.28878 14.8076 9.1511 15.3539 10.4719C15.9001 11.7927 15.5893 13.3104 14.5671 14.3142C15.1777 14.4729 15.7645 14.7117 16.3117 15.0244C17.1779 14.2848 18.2082 13.7593 19.3182 13.491C18.1194 12.3138 17.7551 10.534 18.3956 8.98516C19.0362 7.4363 20.5547 6.42508 22.2404 6.42508C23.9259 6.42508 25.4447 7.4363 26.0852 8.98516C26.7255 10.534 26.3612 12.3138 25.1624 13.491C27.4902 14.1165 29.1351 15.465 29.2729 17.049H30.5327L30.5322 17.0476C30.5355 17.0476 30.5389 17.0476 30.5423 17.0478C30.5475 17.0478 30.5528 17.0481 30.5579 17.0483H30.5581C30.5694 17.0485 30.5804 17.049 30.5917 17.049C31.8623 17.049 33.0807 16.5477 33.9791 15.6551ZM42.0157 8.4532V16.5585C42.0157 18.6484 41.1745 19.9749 38.8875 19.9749C38.618 19.9696 38.349 19.9453 38.0828 19.9024L38.1925 17.776C38.3855 17.8122 38.5815 17.8305 38.7781 17.8305C39.3452 17.8305 39.5281 17.4486 39.5281 16.8856V8.4532H42.0157ZM49.4065 17.049H51.8396V8.43503H49.3335V13.2326C49.3335 14.3231 48.6747 15.0681 47.6139 15.0681C46.6993 15.0681 46.2968 14.4685 46.2968 13.5779V8.43503H43.8087V14.2685C43.8087 16.1404 44.6504 17.3034 46.2968 17.3034C47.6687 17.3034 48.7299 16.4313 49.2234 14.7591H49.4065V17.049ZM57.8219 10.434C56.7611 10.434 56.084 11.1793 56.084 12.2514V17.049H53.5959V8.43506H56.0291V10.743H56.2119C56.7061 9.07099 57.7489 8.1988 59.1207 8.1988C60.6574 8.1988 61.4072 9.1619 61.5171 10.7793H61.7182C62.1939 9.08937 63.1815 8.1988 64.609 8.1988C66.3099 8.1988 67.1696 9.34375 67.1696 11.2155V17.049H64.6635V11.9061C64.6635 11.0337 64.2613 10.434 63.3466 10.434C62.2854 10.434 61.6268 11.1793 61.6268 12.2514V17.049H59.1392V11.9061C59.1392 11.0337 58.718 10.434 57.8219 10.434ZM77.3053 12.7602C77.3053 9.79809 76.2255 8.1988 74.3231 8.1988C72.9327 8.1988 71.9816 9.10749 71.5244 10.6159H71.36V8.43506H68.8719V19.8114H71.36V14.7957H71.5059C71.9451 16.3041 72.8783 17.3034 74.3231 17.3034C76.1891 17.3034 77.3053 15.7225 77.3053 12.7602ZM71.36 13.1236C71.36 14.3232 72.0551 15.1225 73.1159 15.1225C74.3233 15.1225 74.8537 14.3413 74.8537 12.7602C74.8537 11.1793 74.3233 10.434 73.1343 10.434C72.0366 10.434 71.36 11.2155 71.36 12.4511V13.1236ZM84.3483 11.9424L86.6535 11.5062C86.3425 9.4163 85.2452 8.1988 82.6654 8.1988C79.9033 8.1988 78.2204 9.92527 78.2204 12.8511C78.2204 15.795 79.94 17.3034 82.6839 17.3034C85.1535 17.3034 86.3794 16.0494 86.672 14.0504L84.3853 13.5054C84.2024 14.3957 83.7812 15.141 82.6654 15.141C81.3853 15.141 80.7632 14.2504 80.7632 12.7239C80.7632 11.0883 81.4767 10.3615 82.629 10.3615C83.7267 10.3615 84.129 11.0156 84.3483 11.9424ZM88.0993 5.38209H90.5874V17.049H88.0993V5.38209ZM96.4412 17.3034C99.2034 17.3034 100.886 15.5769 100.886 12.742C100.886 9.87064 99.1484 8.1988 96.4412 8.1988C93.679 8.1988 91.9592 9.87064 91.9592 12.742C91.9592 15.5769 93.6241 17.3034 96.4412 17.3034ZM98.3987 12.7239C98.3987 11.1609 97.795 10.2706 96.4227 10.2706C95.0509 10.2706 94.4473 11.1609 94.4473 12.7239C94.4473 14.2867 95.0144 15.1953 96.4227 15.1953C97.813 15.1953 98.3987 14.2867 98.3987 12.7239ZM107.783 17.049H110.216V8.43503H107.71V13.2326C107.71 14.3231 107.052 15.0681 105.991 15.0681C105.076 15.0681 104.673 14.4685 104.673 13.5779V8.43503H102.185V14.2685C102.185 16.1404 103.027 17.3034 104.673 17.3034C106.045 17.3034 107.107 16.4313 107.6 14.7591H107.783V17.049ZM119.986 17.049H117.498V14.7957H117.351C116.912 16.3041 115.961 17.3034 114.516 17.3034C112.65 17.3034 111.553 15.7225 111.553 12.8148C111.553 9.81626 112.65 8.19883 114.553 8.19883C115.943 8.19883 116.876 9.10751 117.333 10.6159H117.498V5.38209H119.986V17.049ZM115.742 15.1225C114.516 15.1225 113.986 14.3594 113.986 12.8148C113.986 11.1974 114.534 10.434 115.724 10.434C116.821 10.434 117.498 11.2336 117.498 12.4876V13.1601C117.498 14.3594 116.784 15.1225 115.742 15.1225ZM39.4307 6.02666C39.4307 6.76257 40.0311 7.35916 40.772 7.35916C41.5129 7.35916 42.1134 6.76257 42.1134 6.02666C42.1134 5.67326 41.972 5.33433 41.7205 5.08444C41.469 4.83455 41.1277 4.69415 40.772 4.69415C40.0311 4.69415 39.4307 5.29075 39.4307 6.02666Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1_5968">
<rect
width="120"
height="19.92"
fill="white"
transform="translate(0 0.039978)"
/>
</clipPath>
</defs>
</svg>
</div>
<a
className="JC-nav__header__menu-button"
onClick={handleToggleMobile}
>
<div className="menu-button-line first" />
<div className="menu-button-line second" />
<div className="menu-button-line third" />
</a>
</div>
<div className="JC-nav__body">
<div className="JC-nav__body__menu-box">
<div className="JC-nav__body__menu-box__inner">
<a className="JC-nav-item" onClick={handleEvent}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.99517 6.35226C8.02171 4.65854 9.87295 3.6548 11.8391 3.6993C12.4889 5.55543 12.1064 7.62626 10.8128 9.12593L8.86882 11.3797L8.39995 11.7666L5.22941 9.46302L5.45249 8.89757L6.99517 6.35226ZM4.32479 8.17467L5.8504 5.65751C5.86215 5.63812 5.87398 5.6188 5.88591 5.59955C5.14182 5.89214 4.19179 6.49303 3.16498 7.71478L4.32479 8.17467ZM7.26711 3.99374C8.64528 2.8219 10.4601 2.22217 12.3254 2.38949C12.5943 2.41361 12.8285 2.58377 12.9345 2.83203C13.67 4.5543 13.6605 6.46567 12.9718 8.13845C13.0745 8.43667 13.1714 8.83453 13.2048 9.32531C13.2817 10.456 13.0178 12.0243 11.806 13.9476C11.314 14.7284 10.239 14.725 9.6907 14.0628L8.99919 13.2278C8.72993 13.3995 8.37343 13.3966 8.10207 13.1995L8.19713 13.2685L7.80498 13.8083C7.37178 14.4045 6.53556 14.5354 5.93725 14.1007L3.7705 12.5265C3.17216 12.0918 3.03828 11.256 3.47147 10.6598L3.86362 10.1201L3.95864 10.1891C3.68728 9.99193 3.57438 9.65373 3.65455 9.34465L2.64669 8.94501C1.84744 8.62811 1.51209 7.60688 2.10262 6.89771C3.55723 5.15086 4.96734 4.41522 6.06639 4.13897C6.54344 4.01906 6.95183 3.98831 7.26711 3.99374ZM10.7006 13.1897C11.5452 11.8356 11.8231 10.7464 11.8714 9.9483C11.8568 9.96559 11.8421 9.98278 11.8273 9.99998L9.90476 12.2287L10.7006 13.1897ZM7.11376 12.4814L4.947 10.9072L4.55485 11.4469L6.72161 13.0212L7.11376 12.4814Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Discover</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item selected" onClick={handleEvent}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.60934 3.05995C8.25012 2.7832 7.75021 2.7832 7.39099 3.05995L3.24044 6.25758C2.99413 6.44734 2.84976 6.74112 2.84976 7.05258V12.7752C2.84976 12.9809 3.0161 13.1477 3.22129 13.1477H5.2361C5.44129 13.1477 5.60763 12.9809 5.60763 12.7752L5.60763 9.54991C5.60763 8.78138 6.22897 8.15836 6.99542 8.15836H9.01741C9.78387 8.15836 10.4052 8.78138 10.4052 9.54991V12.7752C10.4052 12.9809 10.5715 13.1477 10.7767 13.1477H12.779C12.9842 13.1477 13.1506 12.9809 13.1506 12.7752V7.05258C13.1506 6.74112 13.0062 6.44734 12.7599 6.25758L8.60934 3.05995ZM6.77182 2.2519C7.49616 1.69386 8.50417 1.69386 9.22851 2.2519L13.3791 5.44953C13.8757 5.83218 14.1668 6.42454 14.1668 7.05258V12.7752C14.1668 13.5437 13.5455 14.1667 12.779 14.1667H10.7767C10.0103 14.1667 9.38894 13.5437 9.38894 12.7752V9.54991C9.38894 9.34416 9.2226 9.17737 9.01741 9.17737H6.99542C6.79023 9.17737 6.6239 9.34416 6.6239 9.54991V12.7752C6.6239 13.5437 6.00256 14.1667 5.2361 14.1667H3.22129C2.45483 14.1667 1.8335 13.5437 1.8335 12.7752V7.05258C1.8335 6.42454 2.1246 5.83218 2.62127 5.44953L6.77182 2.2519Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Home</p>
<span className="JC-nav-item__active-box" />
</a>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.28275 2.84778C5.31197 2.84778 4.525 3.63421 4.525 4.60432C4.525 5.57443 5.31197 6.36086 6.28275 6.36086C7.25353 6.36086 8.0405 5.57443 8.0405 4.60432C8.0405 3.63421 7.25353 2.84778 6.28275 2.84778ZM3.50984 4.60432C3.50984 3.07393 4.75132 1.83331 6.28275 1.83331C7.81419 1.83331 9.05567 3.07393 9.05567 4.60432C9.05567 6.1347 7.81419 7.37533 6.28275 7.37533C4.75132 7.37533 3.50984 6.1347 3.50984 4.60432ZM11.8025 4.69355C11.3503 4.69355 10.9837 5.0599 10.9837 5.51182C10.9837 5.96373 11.3503 6.33008 11.8025 6.33008C12.2547 6.33008 12.6213 5.96373 12.6213 5.51182C12.6213 5.0599 12.2547 4.69355 11.8025 4.69355ZM9.96852 5.51182C9.96852 4.49963 10.7896 3.67909 11.8025 3.67909C12.8154 3.67909 13.6365 4.49963 13.6365 5.51182C13.6365 6.52401 12.8154 7.34455 11.8025 7.34455C10.7896 7.34455 9.96852 6.52401 9.96852 5.51182ZM12.0241 9.31914C11.8695 9.34113 11.6701 9.36948 11.4805 9.37817C11.2004 9.39102 10.963 9.17458 10.9501 8.89474C10.9373 8.61489 11.1539 8.37762 11.4339 8.36478C11.5735 8.35837 11.6905 8.34159 11.8241 8.32242C11.8937 8.31243 11.9678 8.30179 12.052 8.29163C12.2635 8.26612 12.5464 8.24394 12.8282 8.34104C13.1954 8.46756 13.5205 8.72696 13.7528 9.02116C13.9826 9.31207 14.1668 9.6953 14.1668 10.1002V10.9922C14.1668 11.1664 14.0773 11.3284 13.9298 11.4213C13.8686 11.4598 13.8098 11.4971 13.753 11.5331C13.2949 11.8234 12.9594 12.036 12.4597 12.2237C12.1973 12.3222 11.9046 12.1895 11.806 11.9273C11.7074 11.665 11.8402 11.3726 12.1026 11.274C12.4814 11.1318 12.724 10.9829 13.1517 10.7127V10.1002C13.1517 9.99412 13.0955 9.82637 12.9559 9.64964C12.819 9.47619 12.6458 9.35127 12.4973 9.30009C12.4486 9.28331 12.3645 9.27577 12.1737 9.29878C12.1317 9.30385 12.0809 9.31107 12.0241 9.31914ZM4.9985 9.5151C4.62326 9.46607 4.38963 9.46222 4.20847 9.52464C3.8774 9.63871 3.52789 9.89965 3.26018 10.2386C2.98989 10.5809 2.84866 10.9436 2.84866 11.2306V12.4299C3.90256 12.8942 5.0683 13.1522 6.29555 13.1522C7.5228 13.1522 8.68855 12.8942 9.74245 12.4299V11.2306C9.74245 10.9436 9.60122 10.5809 9.33092 10.2386C9.06322 9.89965 8.71371 9.63871 8.38263 9.52464C8.20148 9.46222 7.96785 9.46607 7.59261 9.5151C7.5245 9.524 7.45161 9.53443 7.37471 9.54543C7.06365 9.58994 6.687 9.64384 6.29555 9.64384C5.90411 9.64384 5.52746 9.58994 5.2164 9.54543C5.1395 9.53443 5.06661 9.524 4.9985 9.5151ZM5.39516 8.54581C5.69854 8.5889 5.9836 8.62938 6.29555 8.62938C6.60751 8.62938 6.89256 8.5889 7.19595 8.54581C7.28245 8.53352 7.37045 8.52103 7.46099 8.5092C7.83744 8.46001 8.28551 8.4181 8.71354 8.56558C9.26328 8.755 9.76474 9.15043 10.1278 9.61014C10.4883 10.0666 10.7576 10.6448 10.7576 11.2306V12.7539C10.7576 12.9481 10.6466 13.1253 10.4718 13.2101C9.20924 13.8231 7.79183 14.1666 6.29555 14.1666C4.79928 14.1666 3.38187 13.8231 2.11928 13.2101C1.94447 13.1253 1.8335 12.9481 1.8335 12.7539V11.2306C1.8335 10.6448 2.10283 10.0666 2.4633 9.61014C2.82636 9.15043 3.32783 8.755 3.87757 8.56558C4.30559 8.4181 4.75367 8.46001 5.13012 8.5092C5.22066 8.52103 5.30865 8.53353 5.39516 8.54581Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">User Management</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
<div
className="FC-menu-section__body"
style={{ height: '76px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Users</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">User Groups</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<div className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.92368 2.60498C9.04996 2.24976 7.85149 2.15315 6.73703 2.77627C5.68358 3.36528 5.26868 4.11483 5.13233 4.90159C4.98912 5.72787 5.1471 6.62505 5.33116 7.50573C5.38707 7.77325 5.21623 8.03559 4.94957 8.09168C4.68292 8.14777 4.42143 7.97638 4.36552 7.70886C4.18397 6.8402 3.98061 5.76862 4.16027 4.73202C4.34677 3.6559 4.93894 2.64845 6.25671 1.91165C7.68704 1.11192 9.20752 1.2458 10.2942 1.68762C10.5467 1.79028 10.6685 2.07886 10.5662 2.33218C10.4638 2.5855 10.1762 2.70764 9.92368 2.60498ZM11.6463 3.10013C11.8828 2.96451 12.1842 3.04696 12.3194 3.28428C12.7976 4.12385 13.2348 5.13444 13.317 7.16231C13.4158 9.60026 13.0576 11.7085 12.3531 13.5981C12.2577 13.8541 11.9734 13.984 11.7182 13.8883C11.463 13.7925 11.3335 13.5073 11.429 13.2513C12.0853 11.4911 12.4249 9.51494 12.3312 7.20253C12.2557 5.34181 11.8669 4.48493 11.4627 3.77539C11.3275 3.53807 11.4097 3.23574 11.6463 3.10013ZM9.13776 4.38449C8.90332 4.25563 8.58151 4.18841 8.11737 4.2859C7.6065 4.39321 7.37104 4.58705 7.24711 4.78232C7.11194 4.9953 7.05357 5.29657 7.06664 5.71851C7.07819 6.09131 7.14173 6.49669 7.21191 6.94444C7.2214 7.00499 7.23102 7.06631 7.24064 7.12843C7.31834 7.6301 7.39593 8.18138 7.37173 8.70201C7.25966 11.1138 6.06862 12.7987 5.30037 13.596C5.11101 13.7926 4.7987 13.7979 4.60281 13.6079C4.40692 13.4179 4.40162 13.1046 4.59098 12.9081C5.24892 12.2252 6.28855 10.7566 6.38616 8.65592C6.40513 8.24756 6.34433 7.78813 6.26569 7.28041C6.25652 7.22119 6.24708 7.16116 6.23753 7.10049C6.16843 6.66138 6.09409 6.18894 6.08047 5.74925C6.06494 5.24753 6.12365 4.70953 6.41484 4.2507C6.71728 3.77415 7.21748 3.46362 7.91518 3.31707C8.57359 3.17878 9.1411 3.25766 9.61184 3.51641C10.0742 3.77056 10.3943 4.17124 10.6167 4.59214C11.0539 5.41955 11.1737 6.44121 11.2161 7.02417C11.3055 8.25437 11.3443 11.2468 9.61448 14.4098C9.48342 14.6495 9.18355 14.7371 8.94468 14.6057C8.70582 14.4742 8.61842 14.1733 8.74947 13.9337C10.3498 11.0073 10.3148 8.23417 10.2321 7.09616C10.1911 6.53237 10.0796 5.68891 9.74498 5.05577C9.5815 4.74639 9.38056 4.51795 9.13776 4.38449ZM8.37727 5.28866C8.63952 5.21457 8.91199 5.3678 8.98583 5.63091C9.34802 6.92132 9.35504 7.83404 9.25255 9.40042C9.23471 9.67317 8.99985 9.87976 8.72798 9.86186C8.45611 9.84396 8.25018 9.60834 8.26803 9.33559C8.36772 7.81185 8.35354 7.03009 8.03612 5.89919C7.96227 5.63609 8.11501 5.36274 8.37727 5.28866ZM4.95113 9.06335C5.21761 9.1203 5.3876 9.38319 5.33083 9.65053C5.00754 11.1729 4.04347 12.1166 3.44159 12.5366C3.21793 12.6927 2.91049 12.6374 2.7549 12.413C2.59931 12.1886 2.65449 11.8802 2.87815 11.7241C3.34277 11.3998 4.1099 10.6495 4.36585 9.44428C4.42262 9.17694 4.68466 9.00639 4.95113 9.06335ZM8.4797 10.8094C8.73801 10.8964 8.87718 11.1769 8.79055 11.4361C8.48617 12.3465 8.23368 12.9051 7.99938 13.3243C7.88269 13.5331 7.77346 13.7021 7.67173 13.8549C7.64797 13.8906 7.62506 13.9248 7.60275 13.9581C7.52761 14.0702 7.45939 14.172 7.38898 14.2865C7.2459 14.5191 6.94196 14.5913 6.71009 14.4477C6.47823 14.3042 6.40626 13.9993 6.54933 13.7667C6.63087 13.6341 6.71306 13.5115 6.78999 13.3968C6.81082 13.3657 6.83126 13.3352 6.8512 13.3052C6.94687 13.1615 7.04014 13.0168 7.13877 12.8403C7.3351 12.4889 7.56453 11.9905 7.85511 11.1213C7.94175 10.8621 8.22139 10.7225 8.4797 10.8094Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">User Authentication</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</div>
</div>
<div
className="FC-menu-section__body"
style={{ height: '148px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">LDAP</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Radius</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">SSO Applications</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">Password Manager</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.734 2.98459C3.58203 2.98459 3.45883 3.10726 3.45883 3.25857V7.56476L7.80549 7.56476C8.07851 7.56476 8.29984 7.78514 8.29984 8.05699C8.29984 8.32885 8.07851 8.54923 7.80549 8.54923L4.17729 8.54923C4.177 8.54923 4.1767 8.54923 4.1764 8.54923H3.24998L2.41299 9.99355C2.15913 10.4316 2.47664 10.9791 2.98458 10.9791H7.80549C8.07851 10.9791 8.29984 11.1994 8.29984 11.4713C8.29984 11.7431 8.07851 11.9635 7.80549 11.9635H2.98458C1.71564 11.9635 0.922424 10.5959 1.55663 9.50153L2.47013 7.92517V3.25857C2.47013 2.56355 3.03598 2.00012 3.734 2.00012H10.8319C11.5299 2.00012 12.0957 2.56355 12.0957 3.25857V3.5307C12.0957 3.80255 11.8744 4.02293 11.6014 4.02293C11.3284 4.02293 11.107 3.80255 11.107 3.5307V3.25857C11.107 3.10725 10.9838 2.98459 10.8319 2.98459H3.734ZM10.4962 5.01786L13.4868 5.01786C14.1782 5.01786 14.6668 5.61311 14.6668 6.2551V12.7629C14.6668 13.4049 14.1782 14.0001 13.4868 14.0001L10.4962 14.0001C9.80476 14.0001 9.31616 13.4049 9.31616 12.7629L9.31616 6.2551C9.31616 5.61311 9.80476 5.01786 10.4962 5.01786ZM13.4868 6.00232L10.4962 6.00232C10.4303 6.00232 10.3049 6.07418 10.3049 6.2551L10.3049 12.7629C10.3049 12.9438 10.4303 13.0157 10.4962 13.0157L13.4868 13.0157C13.5527 13.0157 13.6781 12.9438 13.6781 12.7629V6.2551C13.6781 6.07418 13.5527 6.00232 13.4868 6.00232ZM11.0192 7.19624C11.0192 6.92439 11.2405 6.70401 11.5135 6.70401H12.4788C12.7518 6.70401 12.9731 6.92439 12.9731 7.19624C12.9731 7.4681 12.7518 7.68848 12.4788 7.68848H11.5135C11.2405 7.68848 11.0192 7.4681 11.0192 7.19624Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Device Management</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
<div
className="FC-menu-section__body"
style={{ height: '256px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Devices</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Device Groups</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Policy Management</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">Policy Groups</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Commands</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">MDM</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">Software Management</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.33848 3.80405C2.35314 3.78296 2.38591 3.7454 2.45651 3.69296C2.60491 3.58274 2.85136 3.46246 3.20065 3.35273C3.89338 3.13511 4.88111 2.9927 5.99413 2.9927C7.10715 2.9927 8.09488 3.13511 8.78761 3.35273C9.1369 3.46246 9.38335 3.58274 9.53175 3.69296C9.60235 3.7454 9.63512 3.78296 9.64978 3.80405C9.63512 3.82515 9.60235 3.86271 9.53175 3.91514C9.38335 4.02537 9.1369 4.14565 8.78761 4.25538C8.09488 4.473 7.10715 4.61541 5.99413 4.61541C4.88111 4.61541 3.89338 4.473 3.20065 4.25538C2.85136 4.14565 2.60491 4.02537 2.45651 3.91514C2.38591 3.86271 2.35314 3.82515 2.33848 3.80405ZM10.6535 3.84795C10.6541 3.83346 10.6545 3.81883 10.6545 3.80405C10.6545 3.39409 10.3907 3.09306 10.127 2.89718C9.85414 2.69452 9.49104 2.53304 9.08709 2.40614C8.27335 2.1505 7.17991 2.00018 5.99413 2.00018C4.80835 2.00018 3.71491 2.1505 2.90117 2.40614C2.49722 2.53304 2.13412 2.69452 1.86127 2.89718C1.59754 3.09306 1.33378 3.39409 1.33378 3.80405C1.33378 3.81695 1.33404 3.82974 1.33456 3.84243C1.33385 3.85321 1.3335 3.8641 1.3335 3.87506V10.2551C1.3335 10.7334 1.68803 11.0628 2.01169 11.2643C2.24496 11.4095 2.55219 11.3388 2.69792 11.1064C2.84365 10.8739 2.77269 10.5678 2.53942 10.4226C2.42961 10.3542 2.37062 10.2974 2.3428 10.2611C2.33594 10.2522 2.33184 10.2457 2.32951 10.2416V8.13408C2.5055 8.21608 2.69805 8.28853 2.90089 8.35225C3.71463 8.60789 4.80806 8.7582 5.99385 8.7582C6.26889 8.7582 6.49186 8.53602 6.49186 8.26194C6.49186 7.98787 6.26889 7.76568 5.99385 7.76568C4.88083 7.76568 3.8931 7.62328 3.20036 7.40566C2.85108 7.29593 2.60462 7.17565 2.45622 7.06542C2.36515 6.99778 2.33703 6.95488 2.32951 6.94017V4.98367C2.50558 5.06573 2.69822 5.13821 2.90117 5.20197C3.71491 5.45761 4.80835 5.60793 5.99413 5.60793C7.17991 5.60793 8.27335 5.45761 9.08709 5.20197C9.28982 5.13828 9.48227 5.06588 9.65818 4.98394V6.96239C9.65818 7.23647 9.88114 7.45865 10.1562 7.45865C10.4312 7.45865 10.6542 7.23647 10.6542 6.96239V3.87506C10.6542 3.86597 10.6539 3.85693 10.6535 3.84795ZM2.32679 10.236L2.32719 10.237ZM10.7828 9.05746C10.2687 8.46367 9.4676 8.1715 8.67275 8.29804C7.89042 8.42258 7.20781 8.95364 6.91353 9.69007C6.44641 9.76011 6.01087 10.0027 5.71317 10.3766C5.13346 10.2906 4.53386 10.4748 4.10699 10.8948C3.57589 11.4173 3.41704 12.2035 3.71241 12.8866C4.01451 13.5853 4.71803 14.0002 5.44483 14.0002C7.07624 14.0001 8.70764 14.0001 10.3391 14.0002C11.1594 14.0002 11.9797 14.0002 12.8 14.0002C13.2906 14.0002 13.7639 13.8115 14.115 13.4714C14.4599 13.1374 14.6591 12.6837 14.6666 12.2061C14.6758 11.6246 14.3992 11.0759 13.9299 10.7276C13.6133 10.4927 13.233 10.3658 12.8455 10.3565C12.7182 9.97827 12.4713 9.64546 12.1365 9.40874C11.742 9.12982 11.2582 9.00776 10.7828 9.05746ZM10.1452 9.86424C9.87721 9.43176 9.35706 9.1942 8.82988 9.27813C8.30667 9.36142 7.87636 9.76329 7.77774 10.2641C7.72939 10.5098 7.50505 10.681 7.25447 10.6637C6.89051 10.6384 6.53916 10.8411 6.39336 11.1555C6.28298 11.3935 6.00579 11.5049 5.76058 11.4097C5.42899 11.2811 5.05218 11.3596 4.80678 11.601C4.5638 11.8401 4.49625 12.1912 4.62713 12.4939C4.7599 12.801 5.08464 13.0077 5.44478 13.0077C7.07622 13.0076 8.70767 13.0076 10.3391 13.0076C11.1594 13.0077 11.9797 13.0077 12.8 13.0077C13.0355 13.0077 13.2585 12.9169 13.4207 12.7598C13.5794 12.6061 13.6674 12.4015 13.6707 12.1905C13.6747 11.9348 13.5529 11.6854 13.335 11.5237C13.1195 11.3637 12.8363 11.3085 12.57 11.3779C12.4239 11.4161 12.2684 11.3861 12.1471 11.2965C12.0259 11.2069 11.952 11.0673 11.9461 10.917C11.9356 10.6434 11.796 10.385 11.5601 10.2182C11.3176 10.0467 11.0012 9.99378 10.71 10.0795C10.4945 10.1429 10.2632 10.0547 10.1452 9.86424Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Directory Integrations</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
<div
className="FC-menu-section__body"
style={{ height: '148px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Active Directory</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Cloud Directories</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">HR Directories</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">Identity Providers</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.82864 2.69434C7.93432 2.65779 8.04932 2.65779 8.155 2.69434L12.7076 4.26892C12.9096 4.33878 13.0439 4.52937 13.0408 4.74192C13.0363 5.06287 13.0091 5.56695 12.9117 6.17528L14.3335 6.66704C14.5355 6.73691 14.6698 6.92749 14.6668 7.14004C14.6519 8.18024 14.3297 11.7718 10.8962 13.2909C10.7676 13.3478 10.6208 13.3478 10.4923 13.2909C9.87777 13.019 9.35974 12.6776 8.92442 12.2933C8.69393 12.4238 8.45061 12.5465 8.19374 12.6602C8.06521 12.7171 7.91843 12.7171 7.7899 12.6602C7.53715 12.5484 7.29752 12.4277 7.07031 12.2994C6.6362 12.6809 6.12001 13.0202 5.50802 13.2909C5.37949 13.3478 5.23271 13.3478 5.10418 13.2909C1.67038 11.7717 1.34841 8.16515 1.33355 7.14016C1.33047 6.92757 1.46475 6.73692 1.6668 6.66704L3.07402 6.18033C2.9749 5.56716 2.94741 5.0606 2.9428 4.74204C2.93971 4.52945 3.074 4.3388 3.27605 4.26892L7.82864 2.69434ZM3.27851 7.15451L2.3421 7.47838C2.42731 8.65872 2.9156 11.118 5.30619 12.2951C5.64369 12.1292 5.94187 11.9391 6.20564 11.732C4.48391 10.4275 3.66473 8.64049 3.27851 7.15451ZM9.78762 11.7256C10.0531 11.9353 10.3536 12.1276 10.6942 12.2951C13.0873 11.1174 13.574 8.66506 13.6585 7.47847L12.7085 7.14991C12.3244 8.63535 11.5078 10.4201 9.78762 11.7256ZM3.94895 5.08109C4.03911 6.60659 4.64603 10.0622 7.99184 11.6656C11.3406 10.0613 11.9456 6.61639 12.0349 5.08117L7.99182 3.68281L3.94895 5.08109Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Security Management</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
<div
className="FC-menu-section__body"
style={{ height: '184px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Conditional Policies</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Device Trust</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Conditional Lists</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">MFA Configurations</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item " onClick={handleEvent}>
<p className="JC-nav-item__label">SaaS Management</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
<div className="FC-menu-section closed">
<div className="FC-menu-section__header">
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.99988 2.9843C6.49012 2.9843 5.26622 4.20892 5.26622 5.71956C5.26622 6.37738 5.4977 6.97985 5.88409 7.45171C6.61786 8.19772 6.82239 9.1715 6.9198 9.89651C6.94448 10.0803 6.961 10.2331 6.97556 10.3678C6.99326 10.5315 7.00806 10.6685 7.03114 10.8019C7.04123 10.8602 7.0509 10.9032 7.05925 10.9339C7.31936 11.0192 7.62134 11.0394 7.99988 11.0394C8.37841 11.0394 8.68039 11.0192 8.9405 10.9339C8.94885 10.9032 8.95852 10.8602 8.96862 10.8019C8.99169 10.6685 9.0065 10.5315 9.02419 10.3678C9.03875 10.2331 9.05527 10.0803 9.07996 9.89651C9.17736 9.1715 9.3819 8.19772 10.1157 7.45171C10.5021 6.97985 10.7335 6.37738 10.7335 5.71956C10.7335 4.20892 9.50963 2.9843 7.99988 2.9843ZM8.91985 10.9939C8.91984 10.9939 8.92006 10.9935 8.92051 10.9926C8.92008 10.9935 8.91985 10.9939 8.91985 10.9939ZM7.07991 10.9939C7.0799 10.9939 7.07967 10.9935 7.07924 10.9926C7.0797 10.9935 7.07991 10.9939 7.07991 10.9939ZM4.28287 5.71956C4.28287 3.6655 5.94703 2.00037 7.99988 2.00037C10.0527 2.00037 11.7169 3.6655 11.7169 5.71956C11.7169 6.62309 11.3943 7.45252 10.8585 8.09688C10.8489 8.10842 10.8388 8.11951 10.8282 8.13012C10.3221 8.63649 10.1473 9.33731 10.0545 10.0276C10.0381 10.1497 10.023 10.2857 10.0079 10.4208C9.98552 10.6217 9.96332 10.8208 9.93757 10.9697C9.91413 11.1052 9.87979 11.2582 9.81788 11.3952C9.75609 11.5319 9.63824 11.7149 9.41382 11.8073C8.93965 12.0026 8.44098 12.0233 7.99988 12.0233C7.55878 12.0233 7.06011 12.0026 6.58594 11.8073C6.36152 11.7149 6.24367 11.5319 6.18188 11.3952C6.11997 11.2582 6.08563 11.1052 6.06218 10.9697C6.03643 10.8208 6.01424 10.6217 5.99184 10.4208C5.97677 10.2857 5.96161 10.1497 5.94521 10.0276C5.85247 9.33731 5.67764 8.63649 5.17156 8.13012C5.16096 8.11951 5.15085 8.10842 5.14126 8.09688C4.6055 7.45252 4.28287 6.62309 4.28287 5.71956ZM2.66327 2.23104C2.82705 2.01432 3.1354 1.97147 3.352 2.13534L4.07202 2.68007C4.28862 2.84394 4.33144 3.15248 4.16767 3.36921C4.00389 3.58593 3.69554 3.62878 3.47894 3.46491L2.75892 2.92018C2.54232 2.7563 2.4995 2.44777 2.66327 2.23104ZM13.3367 2.23104C13.5005 2.44777 13.4577 2.75631 13.2411 2.92018L12.5211 3.46491C12.3045 3.62878 11.9961 3.58593 11.8323 3.36921C11.6686 3.15248 11.7114 2.84394 11.928 2.68007L12.648 2.13534C12.8646 1.97147 13.173 2.01432 13.3367 2.23104ZM2 5.67434C2 5.40263 2.22013 5.18237 2.49168 5.18237H3.11827C3.38982 5.18237 3.60995 5.40263 3.60995 5.67434C3.60995 5.94604 3.38982 6.16631 3.11827 6.16631H2.49168C2.22013 6.16631 2 5.94604 2 5.67434ZM12.39 5.67434C12.39 5.40263 12.6102 5.18237 12.8817 5.18237H13.5083C13.7799 5.18237 14 5.40263 14 5.67434C14 5.94604 13.7799 6.16631 13.5083 6.16631H12.8817C12.6102 6.16631 12.39 5.94604 12.39 5.67434ZM4.16767 7.97947C4.33144 8.1962 4.28862 8.50473 4.07202 8.6686L3.352 9.21334C3.1354 9.37721 2.82705 9.33436 2.66327 9.11763C2.4995 8.90091 2.54232 8.59237 2.75892 8.4285L3.47894 7.88377C3.69554 7.7199 4.00389 7.76274 4.16767 7.97947ZM11.8323 7.97947C11.9961 7.76274 12.3045 7.7199 12.5211 7.88377L13.2411 8.4285C13.4577 8.59237 13.5005 8.90091 13.3367 9.11763C13.173 9.33436 12.8646 9.37721 12.648 9.21334L11.928 8.6686C11.7114 8.50473 11.6686 8.1962 11.8323 7.97947ZM6.12766 13.1421C6.23102 12.8909 6.51837 12.771 6.76948 12.8744C6.89254 12.9251 7.08231 12.9641 7.31895 12.9878C7.54836 13.0107 7.78977 13.0164 7.99988 13.0164C8.44447 13.0164 8.90715 12.988 9.18283 12.8744C9.43394 12.771 9.72128 12.8909 9.82464 13.1421C9.92799 13.3934 9.80822 13.6809 9.55711 13.7843C9.07642 13.9823 8.42395 14.0004 7.99988 14.0004C7.77565 14.0004 7.49738 13.9945 7.22115 13.9668C6.95215 13.9399 6.65032 13.8894 6.3952 13.7843C6.14409 13.6809 6.02431 13.3934 6.12766 13.1421Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Insights</p>
<span className="JC-nav-item__chevron">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.16272 3.15988C0.94576 3.37288 0.94576 3.71828 1.16272 3.93128L5.60714 8.84036C5.82409 9.05338 6.17589 9.05338 6.39284 8.84036L10.8373 3.93128C11.0542 3.71828 11.0542 3.37288 10.8373 3.15988C10.6203 2.94688 10.2685 2.94688 10.0516 3.15988L6 7.68328L1.94839 3.15988C1.73143 2.94688 1.37967 2.94688 1.16272 3.15988Z"
fill="currentColor"
/>
</svg>
</span>
</a>
</div>
<div
className="FC-menu-section__body"
style={{ height: '76px' }}
>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Directory</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<p className="JC-nav-item__label">Reports</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
</div>
</div>
<div className="JC-nav__body__footer">
<span className="JC-nav__body__footer__border" />
<a className="JC-nav-item" onClick={handleToggle}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.95886 4.26617C5.34916 2.84701 6.64901 1.5 8.79998 1.5H10.5333C13.1487 1.5 14.5 3.48618 14.5 5.17778C14.5 6.16426 14.2008 6.92453 13.7419 7.49097C13.3808 7.93669 12.9358 8.24438 12.4987 8.45233C12.4642 10.0371 11.7416 11.0616 10.862 11.678C10.0549 12.2436 9.13422 12.4556 8.53071 12.4935L6.44222 14.35C5.81881 14.9041 4.83333 14.4616 4.83333 13.6275V12.4723C4.17123 12.3986 3.4155 12.1652 2.78409 11.6236C2.01503 10.9639 1.5 9.90696 1.5 8.33333C1.5 6.65747 2.67247 4.72165 4.95886 4.26617ZM6 5.16667C3.6376 5.16667 2.5 6.91382 2.5 8.33333C2.5 9.67351 2.92833 10.4298 3.43515 10.8645C3.95855 11.3135 4.63792 11.4813 5.2313 11.4985C5.55748 11.508 5.83333 11.7732 5.83333 12.1167V13.5532L7.968 11.6558C8.07812 11.5579 8.21898 11.5024 8.3674 11.4997C8.80556 11.4917 9.609 11.335 10.2881 10.8591C10.9405 10.4019 11.5 9.63844 11.5 8.33333C11.5 8.28147 11.4985 8.22917 11.4954 8.17653L11.4941 8.15669C11.4595 7.62797 11.2722 7.06716 10.9279 6.57582C10.37 5.78036 9.40011 5.16667 8 5.16667H6ZM12.378 7.37897C11.962 5.74394 10.4849 4.16667 8 4.16667H6.05153C6.43777 3.28022 7.34061 2.5 8.79998 2.5H10.5333C12.5402 2.5 13.5 3.98049 13.5 5.17778C13.5 5.9481 13.2716 6.48299 12.9649 6.86149C12.7948 7.07146 12.5934 7.24203 12.378 7.37897Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Chat</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.64702 2.23619C7.14371 1.03244 8.85629 1.03243 9.35298 2.23619L10.0446 3.9124C10.1245 4.10597 10.3255 4.22151 10.5339 4.19358L12.3379 3.95173C13.6335 3.77804 14.4898 5.25444 13.6909 6.28451L12.5785 7.71886C12.45 7.8845 12.45 8.11558 12.5785 8.28122L13.6909 9.71558C14.4898 10.7456 13.6335 12.222 12.3379 12.0484L10.5339 11.8065C10.3255 11.7786 10.1245 11.8941 10.0446 12.0877L9.35298 13.7639C8.85629 14.9676 7.14371 14.9676 6.64702 13.7639L5.95538 12.0877C5.87551 11.8941 5.67448 11.7786 5.46614 11.8065L3.66206 12.0484C2.36647 12.222 1.51017 10.7456 2.30907 9.71558L3.42152 8.28122C3.54999 8.11558 3.54999 7.8845 3.42152 7.71886L2.30907 6.28451C1.51017 5.25444 2.36646 3.77804 3.66205 3.95172L5.46614 4.19358C5.67448 4.22151 5.87551 4.10597 5.95538 3.9124L6.64702 2.23619ZM8.42756 2.61457C8.2706 2.23418 7.7294 2.23417 7.57244 2.61458L6.88081 4.29078C6.62806 4.90334 5.9919 5.26895 5.33261 5.18057L3.52853 4.93872C3.11911 4.88383 2.84851 5.35039 3.10097 5.6759L4.21342 7.11025C4.61996 7.63442 4.61996 8.36566 4.21342 8.88983L3.10097 10.3242C2.84851 10.6497 3.11911 11.1163 3.52853 11.0614L5.33261 10.8195C5.9919 10.7311 6.62806 11.0967 6.88081 11.7093L7.57244 13.3855C7.7294 13.7659 8.2706 13.7659 8.42756 13.3855L9.11919 11.7093C9.37194 11.0967 10.0081 10.7311 10.6674 10.8195L12.4715 11.0614C12.8809 11.1163 13.1515 10.6497 12.899 10.3242L11.7866 8.88983C11.38 8.36566 11.38 7.63442 11.7866 7.11025L12.899 5.6759C13.1515 5.35039 12.8809 4.88383 12.4715 4.93872L10.6674 5.18057C10.0081 5.26895 9.37194 4.90333 9.11919 4.29078L8.42756 2.61457ZM8.0004 6.79291C7.33067 6.79291 6.78775 7.33336 6.78775 8.00004C6.78775 8.66672 7.33067 9.20717 8.0004 9.20717C8.67012 9.20717 9.21304 8.66672 9.21304 8.00004C9.21304 7.33336 8.67012 6.79291 8.0004 6.79291ZM5.7873 8.00004C5.7873 6.78334 6.77814 5.79701 8.0004 5.79701C9.22265 5.79701 10.2135 6.78334 10.2135 8.00004C10.2135 9.21674 9.22265 10.2031 8.0004 10.2031C6.77814 10.2031 5.7873 9.21674 5.7873 8.00004Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Settings</p>
<span className="JC-nav-item__active-box" />
</a>
<a className="JC-nav-item" onClick={handleEvent}>
<div className="JC-nav-item__icon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.98582 2.32532C6.83787 2.32532 5.90726 3.25592 5.90726 4.40388C5.90726 5.55183 6.83787 6.48244 7.98582 6.48244C9.13378 6.48244 10.0644 5.55183 10.0644 4.40388C10.0644 3.25592 9.13378 2.32532 7.98582 2.32532ZM4.9152 4.40388C4.9152 2.70802 6.28997 1.33325 7.98582 1.33325C9.68168 1.33325 11.0564 2.70802 11.0564 4.40388C11.0564 6.09973 9.68168 7.4745 7.98582 7.4745C6.28997 7.4745 4.9152 6.09973 4.9152 4.40388ZM6.5925 9.37927C6.18314 9.32574 5.91614 9.31938 5.70454 9.39234C5.33101 9.52113 4.94116 9.81358 4.64375 10.1904C4.34381 10.5705 4.18249 10.9787 4.18249 11.3089V12.8661C5.34821 13.3856 6.63965 13.6745 7.99979 13.6745C9.35993 13.6745 10.6514 13.3856 11.8171 12.8661V11.3089C11.8171 10.9787 11.6558 10.5705 11.3558 10.1904C11.0584 9.81358 10.6686 9.52113 10.295 9.39234C10.0834 9.31938 9.81644 9.32574 9.40708 9.37927C9.33163 9.38914 9.25129 9.40063 9.16685 9.41272C8.8277 9.46126 8.42218 9.51931 7.99979 9.51931C7.5774 9.51931 7.17188 9.46126 6.83273 9.41272C6.74828 9.40063 6.66795 9.38914 6.5925 9.37927ZM7.00741 8.43517C7.33907 8.48232 7.65507 8.52724 7.99979 8.52724C8.3445 8.52724 8.66051 8.48232 8.99217 8.43517C9.08601 8.42183 9.1811 8.40831 9.27845 8.39558C9.689 8.3419 10.1656 8.29832 10.6184 8.45446C11.2056 8.65693 11.744 9.0809 12.1346 9.57582C12.5226 10.0675 12.8092 10.6864 12.8092 11.3089V13.1822C12.8092 13.3721 12.7007 13.5454 12.5299 13.6284C11.1604 14.2937 9.62293 14.6666 7.99979 14.6666C6.37665 14.6666 4.8392 14.2937 3.46971 13.6284C3.29888 13.5454 3.19043 13.3721 3.19043 13.1822L3.19043 11.3089C3.19043 10.6864 3.47694 10.0675 3.865 9.57582C4.2556 9.0809 4.79395 8.65693 5.38116 8.45446C5.83402 8.29832 6.31058 8.3419 6.72113 8.39558C6.81848 8.40831 6.91357 8.42183 7.00741 8.43517Z"
fill="currentColor"
/>
</svg>
</div>
<p className="JC-nav-item__label">Account</p>
<span className="JC-nav-item__active-box" />
</a>
</div>
</div>
</nav>
<div className="JC-content">
<div className="JC-page-header">
<h1 className="JC-page-header__title">Home</h1>
<div className="JC-page-header__right-box">
<span></span>
<span></span>
<span></span>
<circle></circle>
</div>
</div>
<div className="JC-content__body">
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
<div className="JC-content__box" />
</div>
</div>
</div>
);
}
export default App;