@axos-web-dev/shared-components 1.0.100-dev.68 → 1.0.100-dev.69-mobileLogin
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.
- package/dist/Forms/ConstructionLendingDynamic.d.ts +12 -0
- package/dist/Forms/ConstructionLendingDynamic.js +301 -0
- package/dist/Forms/index.d.ts +1 -0
- package/dist/Forms/index.js +2 -0
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js +334 -165
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +37 -16
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +9 -3
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +24 -3
- package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css +131 -29
- package/dist/main.js +2 -0
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useRef, useEffect } from "react";
|
|
3
|
+
import { useState, useRef, useMemo, useEffect } from "react";
|
|
4
4
|
import { AnimatePresence, motion } from "framer-motion";
|
|
5
5
|
import { usePathname } from "next/navigation.js";
|
|
6
6
|
import Link from "next/link.js";
|
|
7
|
-
import { menuData, getQuickLinks } from "./MobileNavData.js";
|
|
7
|
+
import { menuData, getLoginGroups, getQuickLinks } from "./MobileNavData.js";
|
|
8
8
|
import styles from "./MobileMenu.module.js";
|
|
9
9
|
const slideVariants = {
|
|
10
10
|
enter: (direction) => ({
|
|
@@ -24,6 +24,18 @@ const slideVariants = {
|
|
|
24
24
|
position: "absolute"
|
|
25
25
|
})
|
|
26
26
|
};
|
|
27
|
+
const loginAccordionTransition = {
|
|
28
|
+
duration: 0.35,
|
|
29
|
+
ease: [0.4, 0, 0.2, 1]
|
|
30
|
+
};
|
|
31
|
+
const loginLinksContainerVariants = {
|
|
32
|
+
hidden: {},
|
|
33
|
+
visible: {}
|
|
34
|
+
};
|
|
35
|
+
const loginLinkItemVariants = {
|
|
36
|
+
hidden: { opacity: 0, y: -8 },
|
|
37
|
+
visible: { opacity: 1, y: 0 }
|
|
38
|
+
};
|
|
27
39
|
const MobileDrawerMenu = () => {
|
|
28
40
|
const pathname = usePathname();
|
|
29
41
|
const [queryString, setQueryString] = useState("");
|
|
@@ -34,7 +46,9 @@ const MobileDrawerMenu = () => {
|
|
|
34
46
|
const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
|
|
35
47
|
const [direction, setDirection] = useState("forward");
|
|
36
48
|
const [quickLinks, setQuickLinks] = useState([]);
|
|
49
|
+
const [loginAccordionOpen, setLoginAccordionOpen] = useState(false);
|
|
37
50
|
const drawerRef = useRef(null);
|
|
51
|
+
const loginGroups = useMemo(() => getLoginGroups(), []);
|
|
38
52
|
const currentLevel = stack[stack.length - 1];
|
|
39
53
|
const prevLevel = stack[stack.length - 2];
|
|
40
54
|
useEffect(() => {
|
|
@@ -52,6 +66,10 @@ const MobileDrawerMenu = () => {
|
|
|
52
66
|
}
|
|
53
67
|
}, []);
|
|
54
68
|
const handleClick = (key) => {
|
|
69
|
+
if (stack.length === 1 && key === "Log in") {
|
|
70
|
+
setLoginAccordionOpen((prev) => !prev);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
55
73
|
const item = currentLevel.items[key];
|
|
56
74
|
if (typeof item === "object") {
|
|
57
75
|
setDirection("forward");
|
|
@@ -71,6 +89,7 @@ const MobileDrawerMenu = () => {
|
|
|
71
89
|
setHasOpenedOnce(true);
|
|
72
90
|
setStack([{ title: "Menu", items: menuData }]);
|
|
73
91
|
}
|
|
92
|
+
if (!isOpening) setLoginAccordionOpen(false);
|
|
74
93
|
return isOpening;
|
|
75
94
|
});
|
|
76
95
|
};
|
|
@@ -147,192 +166,342 @@ const MobileDrawerMenu = () => {
|
|
|
147
166
|
"aria-describedby": "menu-description",
|
|
148
167
|
children: [
|
|
149
168
|
/* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
|
|
150
|
-
/* @__PURE__ */ jsxs(
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
166
|
-
style: { marginRight: 8, transform: "rotate(90deg)" },
|
|
167
|
-
children: /* @__PURE__ */ jsx(
|
|
168
|
-
"path",
|
|
169
|
+
/* @__PURE__ */ jsxs(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
className: styles.header,
|
|
173
|
+
style: loginAccordionOpen ? { background: "#e9f8ff" } : void 0,
|
|
174
|
+
children: [
|
|
175
|
+
stack.length > 1 ? /* @__PURE__ */ jsxs(
|
|
176
|
+
"button",
|
|
177
|
+
{
|
|
178
|
+
onClick: handleBack,
|
|
179
|
+
className: styles.back,
|
|
180
|
+
"aria-label": "return to previous menu",
|
|
181
|
+
children: [
|
|
182
|
+
/* @__PURE__ */ jsx(
|
|
183
|
+
"svg",
|
|
169
184
|
{
|
|
170
|
-
|
|
171
|
-
|
|
185
|
+
width: 15,
|
|
186
|
+
height: 12,
|
|
187
|
+
viewBox: "0 0 20 12",
|
|
188
|
+
fill: "none",
|
|
189
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
190
|
+
style: { marginRight: 8, transform: "rotate(90deg)" },
|
|
191
|
+
children: /* @__PURE__ */ jsx(
|
|
192
|
+
"path",
|
|
193
|
+
{
|
|
194
|
+
d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
|
|
195
|
+
fill: "#2F5B88"
|
|
196
|
+
}
|
|
197
|
+
)
|
|
172
198
|
}
|
|
173
|
-
)
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
) : /* @__PURE__ */ jsx(
|
|
180
|
-
"a",
|
|
181
|
-
{
|
|
182
|
-
href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
|
|
183
|
-
"aria-label": "return to home page",
|
|
184
|
-
children: /* @__PURE__ */ jsx(
|
|
185
|
-
"img",
|
|
199
|
+
),
|
|
200
|
+
/* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
|
|
201
|
+
]
|
|
202
|
+
}
|
|
203
|
+
) : /* @__PURE__ */ jsx(
|
|
204
|
+
"a",
|
|
186
205
|
{
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
206
|
+
href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
|
|
207
|
+
"aria-label": "return to home page",
|
|
208
|
+
children: /* @__PURE__ */ jsx(
|
|
209
|
+
"img",
|
|
210
|
+
{
|
|
211
|
+
src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
|
|
212
|
+
alt: "",
|
|
213
|
+
width: 86,
|
|
214
|
+
height: 19
|
|
215
|
+
}
|
|
216
|
+
)
|
|
191
217
|
}
|
|
192
|
-
)
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
/* @__PURE__ */ jsx(
|
|
196
|
-
"button",
|
|
197
|
-
{
|
|
198
|
-
className: `${styles.close} flex_col`,
|
|
199
|
-
"aria-label": "close navigation menu",
|
|
200
|
-
onClick: handleToggle,
|
|
201
|
-
children: /* @__PURE__ */ jsx(
|
|
202
|
-
"svg",
|
|
218
|
+
),
|
|
219
|
+
/* @__PURE__ */ jsx(
|
|
220
|
+
"button",
|
|
203
221
|
{
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
viewBox: "0 0 24 24",
|
|
208
|
-
fill: "none",
|
|
209
|
-
"aria-hidden": "true",
|
|
222
|
+
className: `${styles.close} flex_col`,
|
|
223
|
+
"aria-label": "close navigation menu",
|
|
224
|
+
onClick: handleToggle,
|
|
210
225
|
children: /* @__PURE__ */ jsx(
|
|
211
|
-
"
|
|
226
|
+
"svg",
|
|
212
227
|
{
|
|
213
|
-
|
|
214
|
-
|
|
228
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
229
|
+
width: "24",
|
|
230
|
+
height: "24",
|
|
231
|
+
viewBox: "0 0 24 24",
|
|
232
|
+
fill: "none",
|
|
233
|
+
"aria-hidden": "true",
|
|
234
|
+
children: /* @__PURE__ */ jsx(
|
|
235
|
+
"path",
|
|
236
|
+
{
|
|
237
|
+
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",
|
|
238
|
+
fill: "#14263D"
|
|
239
|
+
}
|
|
240
|
+
)
|
|
215
241
|
}
|
|
216
242
|
)
|
|
217
243
|
}
|
|
218
244
|
)
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
/* @__PURE__ */
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
|
|
245
|
+
]
|
|
246
|
+
}
|
|
247
|
+
),
|
|
248
|
+
/* @__PURE__ */ jsxs("div", { className: styles.levelContainer, children: [
|
|
249
|
+
stack.length === 1 && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: loginAccordionOpen && /* @__PURE__ */ jsx(
|
|
250
|
+
motion.div,
|
|
225
251
|
{
|
|
226
|
-
className:
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
252
|
+
className: styles.loginAccordionOverlay,
|
|
253
|
+
initial: { opacity: 0, y: -12 },
|
|
254
|
+
animate: {
|
|
255
|
+
opacity: 1,
|
|
256
|
+
y: 0,
|
|
257
|
+
transition: loginAccordionTransition
|
|
258
|
+
},
|
|
259
|
+
exit: {
|
|
260
|
+
opacity: 0,
|
|
261
|
+
y: -12,
|
|
262
|
+
transition: loginAccordionTransition
|
|
263
|
+
},
|
|
264
|
+
"aria-expanded": loginAccordionOpen,
|
|
265
|
+
"aria-label": "Login options",
|
|
266
|
+
children: /* @__PURE__ */ jsxs("div", { className: styles.loginAccordion, children: [
|
|
267
|
+
/* @__PURE__ */ jsxs(
|
|
268
|
+
"button",
|
|
269
|
+
{
|
|
270
|
+
type: "button",
|
|
271
|
+
className: styles.menuItem,
|
|
272
|
+
onClick: () => setLoginAccordionOpen(false),
|
|
273
|
+
"aria-label": "Close login options",
|
|
274
|
+
children: [
|
|
275
|
+
/* @__PURE__ */ jsxs("span", { className: styles.loginHeading, children: [
|
|
276
|
+
"Log in",
|
|
277
|
+
/* @__PURE__ */ jsx(
|
|
278
|
+
"img",
|
|
279
|
+
{
|
|
280
|
+
src: "https://www.axos.com/images/1Nb30NbckAMdQNJv7IldNW/user-interface.png",
|
|
281
|
+
alt: "",
|
|
282
|
+
width: 18,
|
|
283
|
+
height: 18,
|
|
284
|
+
"aria-hidden": "true"
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] }),
|
|
288
|
+
/* @__PURE__ */ jsx(
|
|
289
|
+
"span",
|
|
290
|
+
{
|
|
291
|
+
className: styles.chevron,
|
|
292
|
+
"aria-hidden": "true",
|
|
293
|
+
style: { transform: "rotate(180deg)" },
|
|
294
|
+
children: /* @__PURE__ */ jsx(
|
|
295
|
+
"svg",
|
|
296
|
+
{
|
|
297
|
+
className: styles.chevronIcon,
|
|
298
|
+
width: 12,
|
|
299
|
+
height: 20,
|
|
300
|
+
viewBox: "0 0 12 20",
|
|
301
|
+
fill: "none",
|
|
302
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
303
|
+
style: {
|
|
304
|
+
maxWidth: "none",
|
|
305
|
+
verticalAlign: "middle",
|
|
306
|
+
marginLeft: 11
|
|
307
|
+
},
|
|
308
|
+
children: /* @__PURE__ */ jsx(
|
|
309
|
+
"path",
|
|
310
|
+
{
|
|
311
|
+
d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
|
|
312
|
+
fill: "#98DDFF"
|
|
313
|
+
}
|
|
314
|
+
)
|
|
315
|
+
}
|
|
316
|
+
)
|
|
317
|
+
}
|
|
318
|
+
)
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
),
|
|
230
322
|
/* @__PURE__ */ jsx(
|
|
231
|
-
|
|
323
|
+
motion.ul,
|
|
232
324
|
{
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
325
|
+
className: styles.loginAccordionList,
|
|
326
|
+
"aria-label": "Login options",
|
|
327
|
+
variants: loginLinksContainerVariants,
|
|
328
|
+
initial: "hidden",
|
|
329
|
+
animate: "visible",
|
|
330
|
+
transition: {
|
|
331
|
+
staggerChildren: 0.06,
|
|
332
|
+
delayChildren: 0.12
|
|
333
|
+
},
|
|
334
|
+
children: loginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
|
|
335
|
+
motion.li,
|
|
241
336
|
{
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
337
|
+
className: styles.loginAccordionGroup,
|
|
338
|
+
variants: loginLinkItemVariants,
|
|
339
|
+
transition: {
|
|
340
|
+
duration: 0.25,
|
|
341
|
+
ease: "easeOut",
|
|
342
|
+
delay: 0.12 + groupIndex * 0.05
|
|
343
|
+
},
|
|
344
|
+
children: [
|
|
345
|
+
/* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.heading }),
|
|
346
|
+
/* @__PURE__ */ jsx(
|
|
347
|
+
motion.ul,
|
|
348
|
+
{
|
|
349
|
+
className: styles.loginAccordionGroupList,
|
|
350
|
+
variants: loginLinksContainerVariants,
|
|
351
|
+
initial: "hidden",
|
|
352
|
+
animate: "visible",
|
|
353
|
+
transition: {
|
|
354
|
+
staggerChildren: 0.04,
|
|
355
|
+
delayChildren: 0.18 + groupIndex * 0.1
|
|
356
|
+
},
|
|
357
|
+
children: group.items.map((item) => /* @__PURE__ */ jsx(
|
|
358
|
+
motion.li,
|
|
359
|
+
{
|
|
360
|
+
variants: loginLinkItemVariants,
|
|
361
|
+
transition: {
|
|
362
|
+
duration: 0.25,
|
|
363
|
+
ease: "easeOut"
|
|
364
|
+
},
|
|
365
|
+
children: /* @__PURE__ */ jsx(
|
|
366
|
+
Link,
|
|
367
|
+
{
|
|
368
|
+
href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
|
|
369
|
+
className: styles.menuItem,
|
|
370
|
+
children: /* @__PURE__ */ jsx("span", { children: item.title })
|
|
371
|
+
}
|
|
372
|
+
)
|
|
373
|
+
},
|
|
374
|
+
item.title
|
|
375
|
+
))
|
|
376
|
+
}
|
|
377
|
+
)
|
|
378
|
+
]
|
|
379
|
+
},
|
|
380
|
+
group.heading
|
|
381
|
+
))
|
|
246
382
|
}
|
|
247
383
|
)
|
|
248
|
-
]
|
|
384
|
+
] })
|
|
249
385
|
}
|
|
250
|
-
),
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
|
|
271
|
-
"button",
|
|
272
|
-
{
|
|
273
|
-
className: styles.menuItem,
|
|
274
|
-
onClick: () => handleClick(key),
|
|
275
|
-
"aria-label": `open submenu for ${key}`,
|
|
276
|
-
children: [
|
|
277
|
-
/* @__PURE__ */ jsx("span", { children: key }),
|
|
278
|
-
/* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
|
|
279
|
-
"svg",
|
|
280
|
-
{
|
|
281
|
-
className: styles.chevronIcon,
|
|
282
|
-
width: 12,
|
|
283
|
-
height: 20,
|
|
284
|
-
viewBox: "0 0 12 20",
|
|
285
|
-
fill: "none",
|
|
286
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
287
|
-
children: /* @__PURE__ */ jsx(
|
|
288
|
-
"path",
|
|
289
|
-
{
|
|
290
|
-
d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
|
|
291
|
-
fill: "#4A5560"
|
|
292
|
-
}
|
|
293
|
-
)
|
|
294
|
-
}
|
|
295
|
-
) })
|
|
296
|
-
]
|
|
297
|
-
}
|
|
298
|
-
) : /* @__PURE__ */ jsx(
|
|
299
|
-
Link,
|
|
386
|
+
) }),
|
|
387
|
+
/* @__PURE__ */ jsxs("div", { className: "bg_white", children: [
|
|
388
|
+
/* @__PURE__ */ jsxs(
|
|
389
|
+
"span",
|
|
390
|
+
{
|
|
391
|
+
className: `${styles.level} flex middle`,
|
|
392
|
+
"aria-label": "current menu level",
|
|
393
|
+
children: [
|
|
394
|
+
/* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
|
|
395
|
+
/* @__PURE__ */ jsx(
|
|
396
|
+
"svg",
|
|
397
|
+
{
|
|
398
|
+
width: 15,
|
|
399
|
+
height: 12,
|
|
400
|
+
viewBox: "0 0 20 12",
|
|
401
|
+
fill: "none",
|
|
402
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
403
|
+
style: { marginLeft: 12 },
|
|
404
|
+
children: /* @__PURE__ */ jsx(
|
|
405
|
+
"path",
|
|
300
406
|
{
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
children: /* @__PURE__ */ jsx("span", { children: key })
|
|
407
|
+
d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
|
|
408
|
+
fill: "white"
|
|
304
409
|
}
|
|
305
|
-
)
|
|
410
|
+
)
|
|
306
411
|
}
|
|
307
412
|
)
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
children: [
|
|
320
|
-
/* @__PURE__ */ jsx(
|
|
321
|
-
"img",
|
|
413
|
+
]
|
|
414
|
+
}
|
|
415
|
+
),
|
|
416
|
+
/* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
|
|
417
|
+
AnimatePresence,
|
|
418
|
+
{
|
|
419
|
+
custom: direction,
|
|
420
|
+
mode: "sync",
|
|
421
|
+
initial: false,
|
|
422
|
+
children: /* @__PURE__ */ jsx(
|
|
423
|
+
motion.ul,
|
|
322
424
|
{
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
425
|
+
className: styles.menu,
|
|
426
|
+
custom: direction,
|
|
427
|
+
variants: slideVariants,
|
|
428
|
+
initial: "enter",
|
|
429
|
+
animate: "center",
|
|
430
|
+
exit: "exit",
|
|
431
|
+
transition: { duration: 0.3, ease: "linear" },
|
|
432
|
+
children: Object.entries(currentLevel.items).map(
|
|
433
|
+
([key, value]) => {
|
|
434
|
+
const hasChildren = typeof value === "object";
|
|
435
|
+
const isLogin = key === "Log in";
|
|
436
|
+
return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
|
|
437
|
+
"button",
|
|
438
|
+
{
|
|
439
|
+
className: styles.menuItem,
|
|
440
|
+
onClick: () => handleClick(key),
|
|
441
|
+
"aria-label": isLogin ? "Open login options" : `open submenu for ${key}`,
|
|
442
|
+
"aria-expanded": isLogin ? loginAccordionOpen : void 0,
|
|
443
|
+
children: [
|
|
444
|
+
/* @__PURE__ */ jsx("span", { children: key }),
|
|
445
|
+
/* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
|
|
446
|
+
"svg",
|
|
447
|
+
{
|
|
448
|
+
className: styles.chevronIcon,
|
|
449
|
+
width: 12,
|
|
450
|
+
height: 20,
|
|
451
|
+
viewBox: "0 0 12 20",
|
|
452
|
+
fill: "none",
|
|
453
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
454
|
+
style: isLogin && loginAccordionOpen ? { transform: "rotate(180deg)" } : void 0,
|
|
455
|
+
children: /* @__PURE__ */ jsx(
|
|
456
|
+
"path",
|
|
457
|
+
{
|
|
458
|
+
d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
|
|
459
|
+
fill: "#4A5560"
|
|
460
|
+
}
|
|
461
|
+
)
|
|
462
|
+
}
|
|
463
|
+
) })
|
|
464
|
+
]
|
|
465
|
+
}
|
|
466
|
+
) : /* @__PURE__ */ jsx(
|
|
467
|
+
Link,
|
|
468
|
+
{
|
|
469
|
+
href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
|
|
470
|
+
className: styles.menuItem,
|
|
471
|
+
children: /* @__PURE__ */ jsx("span", { children: key })
|
|
472
|
+
}
|
|
473
|
+
) }, key);
|
|
474
|
+
}
|
|
475
|
+
)
|
|
476
|
+
},
|
|
477
|
+
currentLevel.title
|
|
478
|
+
)
|
|
479
|
+
}
|
|
480
|
+
) }),
|
|
481
|
+
/* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
|
|
482
|
+
"a",
|
|
483
|
+
{
|
|
484
|
+
href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
|
|
485
|
+
className: `${styles.quickLink} flex_col middle`,
|
|
486
|
+
"aria-label": `Visit ${link.title} page`,
|
|
487
|
+
children: [
|
|
488
|
+
/* @__PURE__ */ jsx(
|
|
489
|
+
"img",
|
|
490
|
+
{
|
|
491
|
+
src: link.icon,
|
|
492
|
+
alt: "",
|
|
493
|
+
height: 20,
|
|
494
|
+
width: 20,
|
|
495
|
+
loading: "lazy"
|
|
496
|
+
}
|
|
497
|
+
),
|
|
498
|
+
/* @__PURE__ */ jsx("span", { children: link.title })
|
|
499
|
+
]
|
|
500
|
+
},
|
|
501
|
+
link.title
|
|
502
|
+
)) })
|
|
503
|
+
] })
|
|
504
|
+
] })
|
|
336
505
|
]
|
|
337
506
|
}
|
|
338
507
|
)
|
|
@@ -1,19 +1,26 @@
|
|
|
1
|
-
import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "
|
|
2
|
-
const drawer = "
|
|
3
|
-
const hamburger = "
|
|
4
|
-
const header = "
|
|
5
|
-
const back = "
|
|
6
|
-
const close = "
|
|
7
|
-
const levelContainer = "
|
|
8
|
-
const level = "
|
|
9
|
-
const levelTitle = "
|
|
10
|
-
const menu = "
|
|
11
|
-
const menuItem = "
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
1
|
+
import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_ph78c_1";
|
|
2
|
+
const drawer = "_drawer_ph78c_9";
|
|
3
|
+
const hamburger = "_hamburger_ph78c_29";
|
|
4
|
+
const header = "_header_ph78c_40";
|
|
5
|
+
const back = "_back_ph78c_51";
|
|
6
|
+
const close = "_close_ph78c_59";
|
|
7
|
+
const levelContainer = "_levelContainer_ph78c_70";
|
|
8
|
+
const level = "_level_ph78c_70";
|
|
9
|
+
const levelTitle = "_levelTitle_ph78c_86";
|
|
10
|
+
const menu = "_menu_ph78c_91";
|
|
11
|
+
const menuItem = "_menuItem_ph78c_107";
|
|
12
|
+
const loginAccordionOverlay = "_loginAccordionOverlay_ph78c_123";
|
|
13
|
+
const loginAccordion = "_loginAccordion_ph78c_123";
|
|
14
|
+
const loginAccordionList = "_loginAccordionList_ph78c_151";
|
|
15
|
+
const loginAccordionGroup = "_loginAccordionGroup_ph78c_157";
|
|
16
|
+
const loginAccordionHeading = "_loginAccordionHeading_ph78c_162";
|
|
17
|
+
const loginAccordionGroupList = "_loginAccordionGroupList_ph78c_173";
|
|
18
|
+
const loginHeading = "_loginHeading_ph78c_216";
|
|
19
|
+
const chevron = "_chevron_ph78c_226";
|
|
20
|
+
const chevronIcon = "_chevronIcon_ph78c_231";
|
|
21
|
+
const quickLinks = "_quickLinks_ph78c_242";
|
|
22
|
+
const quickLink = "_quickLink_ph78c_242";
|
|
23
|
+
const sr_only = "_sr_only_ph78c_266";
|
|
17
24
|
const styles = {
|
|
18
25
|
overlay,
|
|
19
26
|
drawer,
|
|
@@ -26,6 +33,13 @@ const styles = {
|
|
|
26
33
|
levelTitle,
|
|
27
34
|
menu,
|
|
28
35
|
menuItem,
|
|
36
|
+
loginAccordionOverlay,
|
|
37
|
+
loginAccordion,
|
|
38
|
+
loginAccordionList,
|
|
39
|
+
loginAccordionGroup,
|
|
40
|
+
loginAccordionHeading,
|
|
41
|
+
loginAccordionGroupList,
|
|
42
|
+
loginHeading,
|
|
29
43
|
chevron,
|
|
30
44
|
chevronIcon,
|
|
31
45
|
quickLinks,
|
|
@@ -44,6 +58,13 @@ export {
|
|
|
44
58
|
level,
|
|
45
59
|
levelContainer,
|
|
46
60
|
levelTitle,
|
|
61
|
+
loginAccordion,
|
|
62
|
+
loginAccordionGroup,
|
|
63
|
+
loginAccordionGroupList,
|
|
64
|
+
loginAccordionHeading,
|
|
65
|
+
loginAccordionList,
|
|
66
|
+
loginAccordionOverlay,
|
|
67
|
+
loginHeading,
|
|
47
68
|
menu,
|
|
48
69
|
menuItem,
|
|
49
70
|
overlay,
|