@axos-web-dev/shared-components 0.0.53 → 0.0.55

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.
@@ -0,0 +1,593 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import { Button } from "../../Button/Button.js";
4
+ import "../../Button/Button.css.js";
5
+ import { useState, useRef, useEffect } from "react";
6
+ import { useClickAway } from "react-use";
7
+ import clsx from "clsx";
8
+ import { NavItem } from "../NavItem/index.js";
9
+ import { Sign_in_btn, expand } from "./NavBar.css.js";
10
+ import styles from "./NavBar.module.js";
11
+ import { navItems } from "./NavData.js";
12
+ import SubNavBar from "./SubNavBar.js";
13
+ function NavBar() {
14
+ const [isOpenSignIn, setisOpenSignIn] = useState(false);
15
+ const [isOpenSignInToggle, setisOpenSignInToggle] = useState(false);
16
+ const [isOpenMobile, setisOpenMobile] = useState(false);
17
+ const [activeIndex, setActiveIndex] = useState();
18
+ const [lastNavItem, setLastNavItem] = useState();
19
+ const ref = useRef(null);
20
+ const toggle = () => setisOpenSignIn(!isOpenSignIn);
21
+ const signInToggle = () => setisOpenSignInToggle(!isOpenSignInToggle);
22
+ const mobileToggle = () => setisOpenMobile(!isOpenMobile);
23
+ const handleClick = (index) => setActiveIndex(index);
24
+ const [isOpenProducts, setisOpenProducts] = useState(false);
25
+ const toggleProducts = () => setisOpenProducts(!isOpenProducts);
26
+ const getActiveIndex = () => {
27
+ const pathname = "/" + location.pathname.split("/")[1];
28
+ const index = navItems.findIndex(
29
+ (path) => path.url === pathname
30
+ );
31
+ setActiveIndex(index);
32
+ };
33
+ useEffect(() => {
34
+ getActiveIndex();
35
+ }, [activeIndex]);
36
+ useEffect(() => {
37
+ setLastNavItem(navItems[navItems.length - 1]);
38
+ }, []);
39
+ useClickAway(ref, (e) => {
40
+ if (e?.target?.tagName !== "A") {
41
+ setisOpenSignIn(false);
42
+ }
43
+ });
44
+ return /* @__PURE__ */ jsxs("header", { id: "header", children: [
45
+ /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
46
+ /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
47
+ /* @__PURE__ */ jsx("div", { className: styles.logo_wrap, children: /* @__PURE__ */ jsx(
48
+ "a",
49
+ {
50
+ href: "/",
51
+ "aria-label": "return to axos advisor services homepage",
52
+ children: /* @__PURE__ */ jsx(
53
+ "img",
54
+ {
55
+ src: "https://images.ctfassets.net/i131f3ac17m5/3GxbMmLagse0K2WC0SiRjT/2ad88ba9d51e731363d44e17a2160642/aas-logo.svg",
56
+ alt: "",
57
+ width: 130,
58
+ height: 58
59
+ }
60
+ )
61
+ }
62
+ ) }),
63
+ /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
64
+ (item, i, arr) => arr.length - 1 !== i && /* @__PURE__ */ jsx(
65
+ NavItem,
66
+ {
67
+ className: styles.main_nav_link,
68
+ onClick: handleClick,
69
+ index: i,
70
+ name: item.name,
71
+ url: item.url,
72
+ isActive: activeIndex == i
73
+ },
74
+ i
75
+ )
76
+ ) }) })
77
+ ] }) }),
78
+ /* @__PURE__ */ jsx(
79
+ "button",
80
+ {
81
+ className: clsx(styles.mobile_only, styles.hamburger),
82
+ onClick: mobileToggle,
83
+ children: /* @__PURE__ */ jsx(
84
+ "svg",
85
+ {
86
+ width: "24",
87
+ height: "24",
88
+ viewBox: "0 0 24 24",
89
+ fill: "none",
90
+ xmlns: "http://www.w3.org/2000/svg",
91
+ children: /* @__PURE__ */ jsx(
92
+ "path",
93
+ {
94
+ fillRule: "evenodd",
95
+ clipRule: "evenodd",
96
+ d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
97
+ fill: "#4A5560"
98
+ }
99
+ )
100
+ }
101
+ )
102
+ }
103
+ ),
104
+ /* @__PURE__ */ jsx("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: /* @__PURE__ */ jsx(
105
+ "a",
106
+ {
107
+ href: "/",
108
+ "aria-label": "return to axos advisor services homepage",
109
+ children: /* @__PURE__ */ jsx(
110
+ "img",
111
+ {
112
+ src: "https://images.ctfassets.net/i131f3ac17m5/3GxbMmLagse0K2WC0SiRjT/2ad88ba9d51e731363d44e17a2160642/aas-logo.svg",
113
+ alt: "",
114
+ width: 130,
115
+ height: 58
116
+ }
117
+ )
118
+ }
119
+ ) }),
120
+ /* @__PURE__ */ jsx("div", { className: styles.signin_wrap, children: /* @__PURE__ */ jsxs(
121
+ "div",
122
+ {
123
+ className: `${styles.desktop_only} flex_row middle relative`,
124
+ ref,
125
+ children: [
126
+ lastNavItem && /* @__PURE__ */ jsx(
127
+ NavItem,
128
+ {
129
+ url: lastNavItem.url,
130
+ name: lastNavItem.name,
131
+ className: `link list_unstyled ${styles.main_nav_link} ${styles.highlight}`,
132
+ isActive: activeIndex == navItems.length,
133
+ onClick: handleClick,
134
+ index: navItems.length
135
+ },
136
+ navItems.length + 1
137
+ ),
138
+ /* @__PURE__ */ jsxs(
139
+ Button,
140
+ {
141
+ className: clsx(
142
+ styles.signin_btn,
143
+ "flex_row",
144
+ "center",
145
+ "middle",
146
+ isOpenSignIn ? styles.open : "",
147
+ Sign_in_btn
148
+ ),
149
+ as: "button",
150
+ type: "button",
151
+ color: "primary",
152
+ id: "signIn",
153
+ action: toggle,
154
+ size: "small",
155
+ "aria-controls": "signin-drop-menu",
156
+ children: [
157
+ /* @__PURE__ */ jsx("span", { children: "Sign In" }),
158
+ /* @__PURE__ */ jsx(
159
+ "svg",
160
+ {
161
+ width: "20",
162
+ height: "12",
163
+ viewBox: "0 0 20 12",
164
+ fill: "none",
165
+ xmlns: "http://www.w3.org/2000/svg",
166
+ children: /* @__PURE__ */ jsx(
167
+ "path",
168
+ {
169
+ d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
170
+ fill: "white"
171
+ }
172
+ )
173
+ }
174
+ )
175
+ ]
176
+ }
177
+ ),
178
+ /* @__PURE__ */ jsx(
179
+ "div",
180
+ {
181
+ className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
182
+ children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsx(
183
+ "ul",
184
+ {
185
+ className: "list_unstyled",
186
+ role: "menu",
187
+ "aria-expanded": isOpenSignIn,
188
+ id: "signin-drop-menu",
189
+ children: /* @__PURE__ */ jsx("li", { role: "heading", children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
190
+ "a",
191
+ {
192
+ href: `https://app.axosadvisorservices.com/liberty`,
193
+ role: "menuitem",
194
+ children: "Liberty Login"
195
+ }
196
+ ) }) }) })
197
+ }
198
+ ) })
199
+ }
200
+ )
201
+ ]
202
+ }
203
+ ) })
204
+ ] }) }) }),
205
+ /* @__PURE__ */ jsx(SubNavBar, {}),
206
+ /* @__PURE__ */ jsx(
207
+ "div",
208
+ {
209
+ className: clsx(
210
+ styles.mobile_nav,
211
+ styles.mobile_only,
212
+ "relative",
213
+ "bg_white",
214
+ isOpenMobile ? styles.mobile_opened : ""
215
+ ),
216
+ "aria-expanded": isOpenMobile,
217
+ role: "menu",
218
+ children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.inner_wrapper, "bg_white"), children: [
219
+ /* @__PURE__ */ jsxs("div", { className: `${styles.mobile_header} relative text_center`, children: [
220
+ /* @__PURE__ */ jsx("p", { role: "heading", children: "Welcome" }),
221
+ /* @__PURE__ */ jsx("button", { onClick: mobileToggle, "aria-label": "close navigation menu", children: /* @__PURE__ */ jsx(
222
+ "svg",
223
+ {
224
+ xmlns: "http://www.w3.org/2000/svg",
225
+ width: "24",
226
+ height: "24",
227
+ viewBox: "0 0 24 24",
228
+ fill: "none",
229
+ children: /* @__PURE__ */ jsx(
230
+ "path",
231
+ {
232
+ d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
233
+ fill: "#4A5560"
234
+ }
235
+ )
236
+ }
237
+ ) })
238
+ ] }),
239
+ /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", "aria-expanded": isOpenProducts, children: [
240
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx(
241
+ "a",
242
+ {
243
+ href: "/about-us",
244
+ role: "button",
245
+ className: `flex_row between ${styles.btn}`,
246
+ children: "About Us"
247
+ }
248
+ ) }),
249
+ /* @__PURE__ */ jsxs(
250
+ "li",
251
+ {
252
+ className: `${styles.mobile_nav_item} ${styles.has_dropdown}`,
253
+ id: "dd_1",
254
+ children: [
255
+ /* @__PURE__ */ jsxs(
256
+ "a",
257
+ {
258
+ href: "#",
259
+ onClick: toggleProducts,
260
+ role: "button",
261
+ className: clsx("flex_row", "between"),
262
+ children: [
263
+ "Personalized Support",
264
+ /* @__PURE__ */ jsx(
265
+ "span",
266
+ {
267
+ className: clsx(
268
+ styles.icon_wrap,
269
+ isOpenProducts && styles.open
270
+ ),
271
+ children: /* @__PURE__ */ jsx(
272
+ "svg",
273
+ {
274
+ xmlns: "http://www.w3.org/2000/svg",
275
+ width: "24",
276
+ height: "24",
277
+ viewBox: "0 0 24 24",
278
+ fill: "none",
279
+ children: /* @__PURE__ */ jsx(
280
+ "path",
281
+ {
282
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
283
+ fill: "#4A5560"
284
+ }
285
+ )
286
+ }
287
+ )
288
+ }
289
+ )
290
+ ]
291
+ }
292
+ ),
293
+ /* @__PURE__ */ jsxs(
294
+ "div",
295
+ {
296
+ className: clsx(styles.sub_menu, isOpenProducts && expand),
297
+ children: [
298
+ /* @__PURE__ */ jsx(
299
+ "a",
300
+ {
301
+ href: "/personalized-support",
302
+ className: styles.main,
303
+ role: "heading",
304
+ children: "Personalized Support Home"
305
+ }
306
+ ),
307
+ /* @__PURE__ */ jsx(
308
+ "a",
309
+ {
310
+ href: "/personalized-support/going-independent",
311
+ role: "menuitem",
312
+ children: "Going Independent"
313
+ }
314
+ ),
315
+ /* @__PURE__ */ jsx(
316
+ "a",
317
+ {
318
+ href: "/personalized-support/client-service-team",
319
+ role: "menuitem",
320
+ children: "Client Service Team"
321
+ }
322
+ ),
323
+ /* @__PURE__ */ jsx("a", { href: "/sales-team", role: "menuitem", children: "Sales Team" })
324
+ ]
325
+ }
326
+ )
327
+ ]
328
+ }
329
+ ),
330
+ /* @__PURE__ */ jsxs(
331
+ "li",
332
+ {
333
+ className: `${styles.mobile_nav_item} ${styles.has_dropdown}`,
334
+ id: "dd_2",
335
+ children: [
336
+ /* @__PURE__ */ jsxs(
337
+ "a",
338
+ {
339
+ href: "#",
340
+ onClick: toggleProducts,
341
+ role: "button",
342
+ className: clsx("flex_row", "between"),
343
+ children: [
344
+ "Intuitive Technology",
345
+ /* @__PURE__ */ jsx(
346
+ "span",
347
+ {
348
+ className: clsx(
349
+ styles.icon_wrap,
350
+ isOpenProducts && styles.open
351
+ ),
352
+ children: /* @__PURE__ */ jsx(
353
+ "svg",
354
+ {
355
+ xmlns: "http://www.w3.org/2000/svg",
356
+ width: "24",
357
+ height: "24",
358
+ viewBox: "0 0 24 24",
359
+ fill: "none",
360
+ children: /* @__PURE__ */ jsx(
361
+ "path",
362
+ {
363
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
364
+ fill: "#4A5560"
365
+ }
366
+ )
367
+ }
368
+ )
369
+ }
370
+ )
371
+ ]
372
+ }
373
+ ),
374
+ /* @__PURE__ */ jsxs(
375
+ "div",
376
+ {
377
+ className: clsx(styles.sub_menu, isOpenProducts && expand),
378
+ children: [
379
+ /* @__PURE__ */ jsx(
380
+ "a",
381
+ {
382
+ href: "/intuitive-technology",
383
+ className: styles.main,
384
+ role: "heading",
385
+ children: "Intuitive Technology Home"
386
+ }
387
+ ),
388
+ /* @__PURE__ */ jsx(
389
+ "a",
390
+ {
391
+ href: "/intuitive-technology/technology-providers",
392
+ role: "menuitem",
393
+ children: "Technology Providers"
394
+ }
395
+ )
396
+ ]
397
+ }
398
+ )
399
+ ]
400
+ }
401
+ ),
402
+ /* @__PURE__ */ jsxs(
403
+ "li",
404
+ {
405
+ className: `${styles.mobile_nav_item} ${styles.has_dropdown}`,
406
+ id: "dd_3",
407
+ children: [
408
+ /* @__PURE__ */ jsxs(
409
+ "a",
410
+ {
411
+ href: "#",
412
+ onClick: toggleProducts,
413
+ role: "button",
414
+ className: clsx("flex_row", "between"),
415
+ children: [
416
+ "Growth Solutions",
417
+ /* @__PURE__ */ jsx(
418
+ "span",
419
+ {
420
+ className: clsx(
421
+ styles.icon_wrap,
422
+ isOpenProducts && styles.open
423
+ ),
424
+ children: /* @__PURE__ */ jsx(
425
+ "svg",
426
+ {
427
+ xmlns: "http://www.w3.org/2000/svg",
428
+ width: "24",
429
+ height: "24",
430
+ viewBox: "0 0 24 24",
431
+ fill: "none",
432
+ children: /* @__PURE__ */ jsx(
433
+ "path",
434
+ {
435
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
436
+ fill: "#4A5560"
437
+ }
438
+ )
439
+ }
440
+ )
441
+ }
442
+ )
443
+ ]
444
+ }
445
+ ),
446
+ /* @__PURE__ */ jsxs(
447
+ "div",
448
+ {
449
+ className: clsx(styles.sub_menu, isOpenProducts && expand),
450
+ children: [
451
+ /* @__PURE__ */ jsx(
452
+ "a",
453
+ {
454
+ href: "/growth-solutions",
455
+ className: styles.main,
456
+ role: "heading",
457
+ children: "Growth Solutions Home"
458
+ }
459
+ ),
460
+ /* @__PURE__ */ jsx(
461
+ "a",
462
+ {
463
+ href: "/growth-solutions/money-manager-x-change",
464
+ role: "menuitem",
465
+ children: "Money Manager X-Change"
466
+ }
467
+ ),
468
+ /* @__PURE__ */ jsx(
469
+ "a",
470
+ {
471
+ href: "/growth-solutions/retirement-solutions",
472
+ role: "menuitem",
473
+ children: "Retirement Solutions"
474
+ }
475
+ ),
476
+ /* @__PURE__ */ jsx(
477
+ "a",
478
+ {
479
+ href: "/growth-solutions/advisor-partner-program",
480
+ role: "menuitem",
481
+ children: "Banking and Lending Solutions"
482
+ }
483
+ )
484
+ ]
485
+ }
486
+ )
487
+ ]
488
+ }
489
+ ),
490
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx(
491
+ "a",
492
+ {
493
+ href: "/resources",
494
+ role: "button",
495
+ className: "flex_row between",
496
+ children: "Resources"
497
+ }
498
+ ) }),
499
+ /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx(
500
+ "a",
501
+ {
502
+ href: "/knowledge",
503
+ role: "button",
504
+ className: "flex_row between",
505
+ children: "Knowledge"
506
+ }
507
+ ) }),
508
+ /* @__PURE__ */ jsxs(
509
+ "li",
510
+ {
511
+ className: `${styles.mobile_nav_item} ${styles.has_dropdown}`,
512
+ id: "dd_4",
513
+ children: [
514
+ /* @__PURE__ */ jsxs(
515
+ "a",
516
+ {
517
+ href: "#",
518
+ role: "button",
519
+ className: `flex_row between ${styles.btn}`,
520
+ onClick: signInToggle,
521
+ children: [
522
+ "Sign In",
523
+ /* @__PURE__ */ jsx(
524
+ "span",
525
+ {
526
+ className: clsx(
527
+ styles.icon_wrap,
528
+ isOpenSignInToggle && styles.open
529
+ ),
530
+ children: /* @__PURE__ */ jsx(
531
+ "svg",
532
+ {
533
+ xmlns: "http://www.w3.org/2000/svg",
534
+ width: "24",
535
+ height: "24",
536
+ viewBox: "0 0 24 24",
537
+ fill: "none",
538
+ children: /* @__PURE__ */ jsx(
539
+ "path",
540
+ {
541
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
542
+ fill: "#4A5560"
543
+ }
544
+ )
545
+ }
546
+ )
547
+ }
548
+ )
549
+ ]
550
+ }
551
+ ),
552
+ /* @__PURE__ */ jsx(
553
+ "div",
554
+ {
555
+ className: clsx(
556
+ styles.sub_menu,
557
+ isOpenSignInToggle && expand
558
+ ),
559
+ children: /* @__PURE__ */ jsx(
560
+ "a",
561
+ {
562
+ href: `https://app.axosadvisorservices.com/liberty`,
563
+ role: "menuitem",
564
+ children: "Liberty Login"
565
+ }
566
+ )
567
+ }
568
+ )
569
+ ]
570
+ }
571
+ )
572
+ ] }) }),
573
+ /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
574
+ /* @__PURE__ */ jsxs(
575
+ "div",
576
+ {
577
+ className: `${styles.mobile_footer_content} flex_col between`,
578
+ children: [
579
+ /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Get personalized support" }) }),
580
+ /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx(Button, { color: "primary", targetUrl: "/contact-us", children: "Contact Us" }) })
581
+ ]
582
+ }
583
+ ),
584
+ /* @__PURE__ */ jsx("div", { className: styles.mobile_footer_media, children: " " })
585
+ ] }) })
586
+ ] })
587
+ }
588
+ )
589
+ ] });
590
+ }
591
+ export {
592
+ NavBar as default
593
+ };
@@ -0,0 +1,9 @@
1
+ ._413mfo0:hover {
2
+ color: var(--_1073cm85);
3
+ opacity: 0.9;
4
+ background-color: var(--_1073cm86);
5
+ }
6
+ ._413mfo1 {
7
+ max-height: 20rem !important;
8
+ color: var(--_1073cm82);
9
+ }