@axos-web-dev/shared-components 1.0.44 → 1.0.45
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/README.md +111 -111
- package/dist/ATMLocator/ATMLocator.js +1 -0
- package/dist/Avatar/Avatar.module.js +7 -7
- package/dist/Blockquote/Blockquote.module.js +3 -3
- package/dist/Button/Button.js +1 -0
- package/dist/Calculators/BuyDownCalculator/index.js +1 -1
- package/dist/Calculators/Calculator.js +1 -0
- package/dist/Carousel/index.js +1 -0
- package/dist/Chevron/index.js +1 -0
- package/dist/Comparison/Comparison.js +1 -0
- package/dist/ExecutiveBio/ExecutiveBio.js +1 -0
- package/dist/FaqAccordion/index.js +1 -0
- package/dist/FdicCallout/FdicCallout.module.js +2 -2
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -0
- package/dist/Forms/ApplyNow.js +1 -0
- package/dist/Forms/ContactUsBusiness.js +1 -0
- package/dist/Forms/ContactUsNMLSId.js +1 -0
- package/dist/Forms/CraPublicFile.js +1 -0
- package/dist/Forms/EmailOnly.js +1 -0
- package/dist/Forms/MortgageRate/MortgageRateForm.js +1 -0
- package/dist/Forms/MortgageRate/MortgageRateWatch.js +1 -0
- package/dist/Forms/SuccesForm.js +1 -0
- package/dist/Hyperlink/index.js +1 -0
- package/dist/ImageLink/ImageLink.js +1 -0
- package/dist/ImageLink/ImageLinkSet.js +1 -0
- package/dist/ImageLink/index.js +1 -0
- package/dist/Insight/Featured/CategorySelector.js +1 -0
- package/dist/Insight/Featured/Featured.js +1 -0
- package/dist/Insight/Featured/Header.js +1 -0
- package/dist/Interstitial/Interstitial.module.js +10 -10
- package/dist/Modal/Modal.js +1 -0
- package/dist/NavigationMenu/AxosALTS/NavBar.module.js +23 -23
- package/dist/NavigationMenu/AxosALTS/NavData.js +1 -0
- package/dist/NavigationMenu/AxosALTS/index.js +1 -0
- package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js +52 -52
- package/dist/NavigationMenu/AxosAdvisorServices/NavBar.module.js +53 -53
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.d.ts +2 -0
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js +345 -0
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +53 -0
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +250 -0
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +627 -0
- package/dist/NavigationMenu/AxosBank/NavBar.module.js +39 -81
- package/dist/NavigationMenu/AxosBank/NavData.js +1 -0
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +4 -8
- package/dist/NavigationMenu/AxosBank/index.js +81 -522
- package/dist/NavigationMenu/AxosClearing/NavBar.module.js +37 -37
- package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js +41 -41
- package/dist/NavigationMenu/LaVictoire/NavBar.module.js +37 -37
- package/dist/NavigationMenu/LaVictoire/NavData.js +1 -0
- package/dist/NavigationMenu/LaVictoire/index.js +1 -0
- package/dist/SetContainer/SetContainer.js +1 -0
- package/dist/SocialMediaBar/iconsRepository.js +1 -0
- package/dist/VideoWrapper/index.js +1 -0
- package/dist/WalnutIframe/wrapper.module.js +2 -2
- package/dist/assets/Avatar/Avatar.css.css +59 -59
- package/dist/assets/Blockquote/Blockquote.css.css +68 -68
- package/dist/assets/FdicCallout/FdicCallout.css.css +48 -48
- package/dist/assets/Interstitial/Interstitial.css.css +142 -142
- package/dist/assets/NavigationMenu/AxosALTS/NavBar.css.css +264 -264
- package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css.css +597 -597
- package/dist/assets/NavigationMenu/AxosAdvisorServices/NavBar.css.css +618 -618
- package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css +178 -0
- package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +93 -297
- package/dist/assets/NavigationMenu/AxosClearing/NavBar.css.css +458 -458
- package/dist/assets/NavigationMenu/AxosFiduciary/NavBar.css.css +426 -426
- package/dist/assets/NavigationMenu/LaVictoire/NavBar.css.css +429 -429
- package/dist/assets/WalnutIframe/wrapper.css.css +51 -51
- package/dist/assets/utils/optimizeImage/optimizeImage.css.css +48 -48
- package/dist/utils/optimizeImage/optimizeImage.module.js +3 -3
- package/package.json +131 -131
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import '../../assets/NavigationMenu/AxosAdvisor/NavBar.css.css';const header = "
|
|
2
|
-
const wrapper = "
|
|
3
|
-
const header_main_row = "
|
|
4
|
-
const mobile_header = "
|
|
5
|
-
const logo_wrap = "
|
|
6
|
-
const primary_links = "
|
|
7
|
-
const main_nav_link = "
|
|
8
|
-
const sub_nav_link = "
|
|
9
|
-
const signin_wrap = "
|
|
10
|
-
const signin_btn = "
|
|
11
|
-
const header_sub_row = "
|
|
12
|
-
const signin_dropdown = "
|
|
13
|
-
const shadow = "
|
|
14
|
-
const signin_header = "
|
|
15
|
-
const signin_subheader = "
|
|
16
|
-
const opacity = "
|
|
17
|
-
const fadeInDown = "
|
|
18
|
-
const footer = "
|
|
19
|
-
const open = "
|
|
20
|
-
const dd_wrapper = "
|
|
21
|
-
const dd_media = "
|
|
22
|
-
const dd_media_img = "
|
|
23
|
-
const dd_site_navs = "
|
|
24
|
-
const dd_media_header = "
|
|
25
|
-
const mt_8 = "
|
|
26
|
-
const mt_16 = "
|
|
27
|
-
const ml_8 = "
|
|
28
|
-
const dd_media_cta = "
|
|
29
|
-
const reversed_row = "
|
|
30
|
-
const headline = "
|
|
31
|
-
const nav_anchor = "
|
|
32
|
-
const headline_cta = "
|
|
33
|
-
const site_lists = "
|
|
34
|
-
const hamburger = "
|
|
35
|
-
const mobile_only = "
|
|
36
|
-
const mobile_logo = "
|
|
37
|
-
const highlight = "
|
|
38
|
-
const mobile_nav = "
|
|
39
|
-
const mobile_opened = "
|
|
40
|
-
const mobile_nav_item = "
|
|
41
|
-
const has_dropdown = "
|
|
42
|
-
const icon_wrap = "
|
|
43
|
-
const mobile_footer = "
|
|
44
|
-
const mobile_footer_content = "
|
|
45
|
-
const mobile_footer_media = "
|
|
46
|
-
const footer_cta = "
|
|
47
|
-
const inner_wrapper = "
|
|
48
|
-
const btn = "
|
|
49
|
-
const sub_menu = "
|
|
50
|
-
const main = "
|
|
51
|
-
const dd_footer = "
|
|
52
|
-
const desktop_only = "
|
|
1
|
+
import '../../assets/NavigationMenu/AxosAdvisor/NavBar.css.css';const header = "_header_6da2u_1";
|
|
2
|
+
const wrapper = "_wrapper_6da2u_5";
|
|
3
|
+
const header_main_row = "_header_main_row_6da2u_10";
|
|
4
|
+
const mobile_header = "_mobile_header_6da2u_11";
|
|
5
|
+
const logo_wrap = "_logo_wrap_6da2u_17";
|
|
6
|
+
const primary_links = "_primary_links_6da2u_21";
|
|
7
|
+
const main_nav_link = "_main_nav_link_6da2u_25";
|
|
8
|
+
const sub_nav_link = "_sub_nav_link_6da2u_47";
|
|
9
|
+
const signin_wrap = "_signin_wrap_6da2u_49";
|
|
10
|
+
const signin_btn = "_signin_btn_6da2u_50";
|
|
11
|
+
const header_sub_row = "_header_sub_row_6da2u_88";
|
|
12
|
+
const signin_dropdown = "_signin_dropdown_6da2u_107";
|
|
13
|
+
const shadow = "_shadow_6da2u_117";
|
|
14
|
+
const signin_header = "_signin_header_6da2u_125";
|
|
15
|
+
const signin_subheader = "_signin_subheader_6da2u_132";
|
|
16
|
+
const opacity = "_opacity_6da2u_154";
|
|
17
|
+
const fadeInDown = "_fadeInDown_6da2u_1";
|
|
18
|
+
const footer = "_footer_6da2u_160";
|
|
19
|
+
const open = "_open_6da2u_176";
|
|
20
|
+
const dd_wrapper = "_dd_wrapper_6da2u_188";
|
|
21
|
+
const dd_media = "_dd_media_6da2u_193";
|
|
22
|
+
const dd_media_img = "_dd_media_img_6da2u_198";
|
|
23
|
+
const dd_site_navs = "_dd_site_navs_6da2u_202";
|
|
24
|
+
const dd_media_header = "_dd_media_header_6da2u_209";
|
|
25
|
+
const mt_8 = "_mt_8_6da2u_218";
|
|
26
|
+
const mt_16 = "_mt_16_6da2u_222";
|
|
27
|
+
const ml_8 = "_ml_8_6da2u_226";
|
|
28
|
+
const dd_media_cta = "_dd_media_cta_6da2u_230";
|
|
29
|
+
const reversed_row = "_reversed_row_6da2u_244";
|
|
30
|
+
const headline = "_headline_6da2u_260";
|
|
31
|
+
const nav_anchor = "_nav_anchor_6da2u_266";
|
|
32
|
+
const headline_cta = "_headline_cta_6da2u_274";
|
|
33
|
+
const site_lists = "_site_lists_6da2u_289";
|
|
34
|
+
const hamburger = "_hamburger_6da2u_324";
|
|
35
|
+
const mobile_only = "_mobile_only_6da2u_338";
|
|
36
|
+
const mobile_logo = "_mobile_logo_6da2u_344";
|
|
37
|
+
const highlight = "_highlight_6da2u_349";
|
|
38
|
+
const mobile_nav = "_mobile_nav_6da2u_385";
|
|
39
|
+
const mobile_opened = "_mobile_opened_6da2u_396";
|
|
40
|
+
const mobile_nav_item = "_mobile_nav_item_6da2u_404";
|
|
41
|
+
const has_dropdown = "_has_dropdown_6da2u_419";
|
|
42
|
+
const icon_wrap = "_icon_wrap_6da2u_440";
|
|
43
|
+
const mobile_footer = "_mobile_footer_6da2u_445";
|
|
44
|
+
const mobile_footer_content = "_mobile_footer_content_6da2u_450";
|
|
45
|
+
const mobile_footer_media = "_mobile_footer_media_6da2u_464";
|
|
46
|
+
const footer_cta = "_footer_cta_6da2u_470";
|
|
47
|
+
const inner_wrapper = "_inner_wrapper_6da2u_498";
|
|
48
|
+
const btn = "_btn_6da2u_503";
|
|
49
|
+
const sub_menu = "_sub_menu_6da2u_508";
|
|
50
|
+
const main = "_main_6da2u_25";
|
|
51
|
+
const dd_footer = "_dd_footer_6da2u_533";
|
|
52
|
+
const desktop_only = "_desktop_only_6da2u_552";
|
|
53
53
|
const styles = {
|
|
54
54
|
header,
|
|
55
55
|
wrapper,
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import '../../assets/NavigationMenu/AxosAdvisorServices/NavBar.css.css';const header = "
|
|
2
|
-
const wrapper = "
|
|
3
|
-
const main_nav = "
|
|
4
|
-
const header_main_row = "
|
|
5
|
-
const mobile_header = "
|
|
6
|
-
const logo_wrap = "
|
|
7
|
-
const primary_links = "
|
|
8
|
-
const main_nav_link = "
|
|
9
|
-
const sub_nav_link = "
|
|
10
|
-
const signin_wrap = "
|
|
11
|
-
const signin_btn = "
|
|
12
|
-
const header_sub_row = "
|
|
13
|
-
const signin_dropdown = "
|
|
14
|
-
const shadow = "
|
|
15
|
-
const signin_header = "
|
|
16
|
-
const signin_subheader = "
|
|
17
|
-
const opacity = "
|
|
18
|
-
const fadeInDown = "
|
|
19
|
-
const footer = "
|
|
20
|
-
const open = "
|
|
21
|
-
const dd_wrapper = "
|
|
22
|
-
const dd_media = "
|
|
23
|
-
const dd_media_img = "
|
|
24
|
-
const dd_site_navs = "
|
|
25
|
-
const dd_media_header = "
|
|
26
|
-
const mt_8 = "
|
|
27
|
-
const mt_16 = "
|
|
28
|
-
const ml_8 = "
|
|
29
|
-
const dd_media_cta = "
|
|
30
|
-
const reversed_row = "
|
|
31
|
-
const headline = "
|
|
32
|
-
const nav_anchor = "
|
|
33
|
-
const headline_cta = "
|
|
34
|
-
const site_lists = "
|
|
35
|
-
const hamburger = "
|
|
36
|
-
const mobile_only = "
|
|
37
|
-
const mobile_logo = "
|
|
38
|
-
const highlight = "
|
|
39
|
-
const mobile_nav = "
|
|
40
|
-
const mobile_opened = "
|
|
41
|
-
const mobile_nav_item = "
|
|
42
|
-
const has_dropdown = "
|
|
43
|
-
const icon_wrap = "
|
|
44
|
-
const mobile_footer = "
|
|
45
|
-
const mobile_footer_content = "
|
|
46
|
-
const mobile_footer_media = "
|
|
47
|
-
const footer_cta = "
|
|
48
|
-
const inner_wrapper = "
|
|
49
|
-
const btn = "
|
|
50
|
-
const sub_menu = "
|
|
51
|
-
const main = "
|
|
52
|
-
const dd_footer = "
|
|
53
|
-
const desktop_only = "
|
|
1
|
+
import '../../assets/NavigationMenu/AxosAdvisorServices/NavBar.css.css';const header = "_header_ztj5i_1";
|
|
2
|
+
const wrapper = "_wrapper_ztj5i_5";
|
|
3
|
+
const main_nav = "_main_nav_ztj5i_10";
|
|
4
|
+
const header_main_row = "_header_main_row_ztj5i_17";
|
|
5
|
+
const mobile_header = "_mobile_header_ztj5i_18";
|
|
6
|
+
const logo_wrap = "_logo_wrap_ztj5i_30";
|
|
7
|
+
const primary_links = "_primary_links_ztj5i_34";
|
|
8
|
+
const main_nav_link = "_main_nav_link_ztj5i_38";
|
|
9
|
+
const sub_nav_link = "_sub_nav_link_ztj5i_60";
|
|
10
|
+
const signin_wrap = "_signin_wrap_ztj5i_62";
|
|
11
|
+
const signin_btn = "_signin_btn_ztj5i_63";
|
|
12
|
+
const header_sub_row = "_header_sub_row_ztj5i_100";
|
|
13
|
+
const signin_dropdown = "_signin_dropdown_ztj5i_119";
|
|
14
|
+
const shadow = "_shadow_ztj5i_129";
|
|
15
|
+
const signin_header = "_signin_header_ztj5i_137";
|
|
16
|
+
const signin_subheader = "_signin_subheader_ztj5i_144";
|
|
17
|
+
const opacity = "_opacity_ztj5i_166";
|
|
18
|
+
const fadeInDown = "_fadeInDown_ztj5i_1";
|
|
19
|
+
const footer = "_footer_ztj5i_172";
|
|
20
|
+
const open = "_open_ztj5i_188";
|
|
21
|
+
const dd_wrapper = "_dd_wrapper_ztj5i_200";
|
|
22
|
+
const dd_media = "_dd_media_ztj5i_205";
|
|
23
|
+
const dd_media_img = "_dd_media_img_ztj5i_210";
|
|
24
|
+
const dd_site_navs = "_dd_site_navs_ztj5i_214";
|
|
25
|
+
const dd_media_header = "_dd_media_header_ztj5i_221";
|
|
26
|
+
const mt_8 = "_mt_8_ztj5i_230";
|
|
27
|
+
const mt_16 = "_mt_16_ztj5i_234";
|
|
28
|
+
const ml_8 = "_ml_8_ztj5i_238";
|
|
29
|
+
const dd_media_cta = "_dd_media_cta_ztj5i_242";
|
|
30
|
+
const reversed_row = "_reversed_row_ztj5i_256";
|
|
31
|
+
const headline = "_headline_ztj5i_272";
|
|
32
|
+
const nav_anchor = "_nav_anchor_ztj5i_278";
|
|
33
|
+
const headline_cta = "_headline_cta_ztj5i_286";
|
|
34
|
+
const site_lists = "_site_lists_ztj5i_301";
|
|
35
|
+
const hamburger = "_hamburger_ztj5i_336";
|
|
36
|
+
const mobile_only = "_mobile_only_ztj5i_350";
|
|
37
|
+
const mobile_logo = "_mobile_logo_ztj5i_356";
|
|
38
|
+
const highlight = "_highlight_ztj5i_361";
|
|
39
|
+
const mobile_nav = "_mobile_nav_ztj5i_397";
|
|
40
|
+
const mobile_opened = "_mobile_opened_ztj5i_408";
|
|
41
|
+
const mobile_nav_item = "_mobile_nav_item_ztj5i_416";
|
|
42
|
+
const has_dropdown = "_has_dropdown_ztj5i_431";
|
|
43
|
+
const icon_wrap = "_icon_wrap_ztj5i_452";
|
|
44
|
+
const mobile_footer = "_mobile_footer_ztj5i_457";
|
|
45
|
+
const mobile_footer_content = "_mobile_footer_content_ztj5i_462";
|
|
46
|
+
const mobile_footer_media = "_mobile_footer_media_ztj5i_477";
|
|
47
|
+
const footer_cta = "_footer_cta_ztj5i_483";
|
|
48
|
+
const inner_wrapper = "_inner_wrapper_ztj5i_511";
|
|
49
|
+
const btn = "_btn_ztj5i_516";
|
|
50
|
+
const sub_menu = "_sub_menu_ztj5i_522";
|
|
51
|
+
const main = "_main_ztj5i_10";
|
|
52
|
+
const dd_footer = "_dd_footer_ztj5i_547";
|
|
53
|
+
const desktop_only = "_desktop_only_ztj5i_567";
|
|
54
54
|
const styles = {
|
|
55
55
|
header,
|
|
56
56
|
wrapper,
|
|
@@ -0,0 +1,345 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useRef, useEffect } from "react";
|
|
4
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
5
|
+
import { usePathname } from "next/navigation.js";
|
|
6
|
+
import Link from "next/link.js";
|
|
7
|
+
import { menuData, getQuickLinks } from "./MobileNavData.js";
|
|
8
|
+
import styles from "./MobileMenu.module.js";
|
|
9
|
+
const slideVariants = {
|
|
10
|
+
enter: (direction) => ({
|
|
11
|
+
x: direction === "forward" ? "100%" : "-100%",
|
|
12
|
+
opacity: 0,
|
|
13
|
+
position: "absolute"
|
|
14
|
+
}),
|
|
15
|
+
center: {
|
|
16
|
+
x: 0,
|
|
17
|
+
opacity: 1,
|
|
18
|
+
position: "relative",
|
|
19
|
+
transition: { duration: 0.3, ease: "easeInOut" }
|
|
20
|
+
},
|
|
21
|
+
exit: (direction) => ({
|
|
22
|
+
x: direction === "forward" ? "-100%" : "100%",
|
|
23
|
+
opacity: 0,
|
|
24
|
+
position: "absolute"
|
|
25
|
+
})
|
|
26
|
+
};
|
|
27
|
+
const MobileDrawerMenu = () => {
|
|
28
|
+
const pathname = usePathname();
|
|
29
|
+
const [queryString, setQueryString] = useState("");
|
|
30
|
+
const [open, setOpen] = useState(false);
|
|
31
|
+
const [stack, setStack] = useState([
|
|
32
|
+
{ title: "Main Menu", items: menuData }
|
|
33
|
+
]);
|
|
34
|
+
const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
|
|
35
|
+
const [direction, setDirection] = useState("forward");
|
|
36
|
+
const [quickLinks, setQuickLinks] = useState([]);
|
|
37
|
+
const drawerRef = useRef(null);
|
|
38
|
+
const currentLevel = stack[stack.length - 1];
|
|
39
|
+
const prevLevel = stack[stack.length - 2];
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (!pathname) return;
|
|
42
|
+
const pathnameParts = "/" + pathname.split("/")[1];
|
|
43
|
+
const links = getQuickLinks(pathnameParts);
|
|
44
|
+
setQuickLinks(links);
|
|
45
|
+
}, [pathname]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (typeof window !== "undefined") {
|
|
48
|
+
const search = window.location.search;
|
|
49
|
+
if (search.startsWith("?")) {
|
|
50
|
+
setQueryString(search.slice(1));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, []);
|
|
54
|
+
const handleClick = (key) => {
|
|
55
|
+
const item = currentLevel.items[key];
|
|
56
|
+
if (typeof item === "object") {
|
|
57
|
+
setDirection("forward");
|
|
58
|
+
setStack((prev) => [...prev, { title: key, items: item }]);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const handleBack = () => {
|
|
62
|
+
if (stack.length > 1) {
|
|
63
|
+
setDirection("backward");
|
|
64
|
+
setStack((prev) => prev.slice(0, -1));
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const handleToggle = () => {
|
|
68
|
+
setOpen((prev) => {
|
|
69
|
+
const isOpening = !prev;
|
|
70
|
+
if (isOpening && !hasOpenedOnce) {
|
|
71
|
+
setHasOpenedOnce(true);
|
|
72
|
+
setStack([{ title: "Menu", items: menuData }]);
|
|
73
|
+
}
|
|
74
|
+
return isOpening;
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
const handleOutsideClick = (e) => {
|
|
78
|
+
if (drawerRef.current && !drawerRef.current.contains(e.target)) {
|
|
79
|
+
setOpen(false);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (open) {
|
|
84
|
+
document.addEventListener("mousedown", handleOutsideClick);
|
|
85
|
+
} else {
|
|
86
|
+
document.removeEventListener("mousedown", handleOutsideClick);
|
|
87
|
+
}
|
|
88
|
+
return () => document.removeEventListener("mousedown", handleOutsideClick);
|
|
89
|
+
}, [open]);
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
const onEsc = (e) => {
|
|
92
|
+
if (e.key === "Escape") setOpen(false);
|
|
93
|
+
};
|
|
94
|
+
if (open) {
|
|
95
|
+
document.addEventListener("keydown", onEsc);
|
|
96
|
+
}
|
|
97
|
+
return () => document.removeEventListener("keydown", onEsc);
|
|
98
|
+
}, [open]);
|
|
99
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
100
|
+
/* @__PURE__ */ jsx(
|
|
101
|
+
"button",
|
|
102
|
+
{
|
|
103
|
+
onClick: handleToggle,
|
|
104
|
+
className: `${styles.hamburger} flex_col`,
|
|
105
|
+
"aria-label": "open navigation menu",
|
|
106
|
+
children: /* @__PURE__ */ jsx(
|
|
107
|
+
"svg",
|
|
108
|
+
{
|
|
109
|
+
width: 24,
|
|
110
|
+
height: 24,
|
|
111
|
+
viewBox: "0 0 24 24",
|
|
112
|
+
fill: "none",
|
|
113
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
114
|
+
"aria-hidden": "true",
|
|
115
|
+
children: /* @__PURE__ */ jsx(
|
|
116
|
+
"path",
|
|
117
|
+
{
|
|
118
|
+
fillRule: "evenodd",
|
|
119
|
+
clipRule: "evenodd",
|
|
120
|
+
d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
|
|
121
|
+
fill: "#4A5560"
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
|
|
129
|
+
motion.div,
|
|
130
|
+
{
|
|
131
|
+
className: styles.overlay,
|
|
132
|
+
initial: { opacity: 0 },
|
|
133
|
+
animate: { opacity: 1 },
|
|
134
|
+
exit: { opacity: 0 },
|
|
135
|
+
children: /* @__PURE__ */ jsxs(
|
|
136
|
+
motion.div,
|
|
137
|
+
{
|
|
138
|
+
className: `${styles.drawer} flex_col`,
|
|
139
|
+
ref: drawerRef,
|
|
140
|
+
initial: { x: "100%" },
|
|
141
|
+
animate: { x: 0 },
|
|
142
|
+
exit: { x: "100%" },
|
|
143
|
+
transition: { type: "tween", duration: 0.3 },
|
|
144
|
+
role: "dialog",
|
|
145
|
+
"aria-modal": "true",
|
|
146
|
+
"aria-labelledby": "menu-level",
|
|
147
|
+
"aria-describedby": "menu-description",
|
|
148
|
+
children: [
|
|
149
|
+
/* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
|
|
150
|
+
/* @__PURE__ */ jsxs("div", { className: styles.header, children: [
|
|
151
|
+
stack.length > 1 ? /* @__PURE__ */ jsxs(
|
|
152
|
+
"button",
|
|
153
|
+
{
|
|
154
|
+
onClick: handleBack,
|
|
155
|
+
className: styles.back,
|
|
156
|
+
"aria-label": "return to previous menu",
|
|
157
|
+
children: [
|
|
158
|
+
/* @__PURE__ */ jsx(
|
|
159
|
+
"svg",
|
|
160
|
+
{
|
|
161
|
+
width: 15,
|
|
162
|
+
height: 12,
|
|
163
|
+
viewBox: "0 0 20 12",
|
|
164
|
+
fill: "none",
|
|
165
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
166
|
+
style: { marginRight: 8, transform: "rotate(90deg)" },
|
|
167
|
+
children: /* @__PURE__ */ jsx(
|
|
168
|
+
"path",
|
|
169
|
+
{
|
|
170
|
+
d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
|
|
171
|
+
fill: "#2F5B88"
|
|
172
|
+
}
|
|
173
|
+
)
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
|
|
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",
|
|
186
|
+
{
|
|
187
|
+
src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
|
|
188
|
+
alt: "",
|
|
189
|
+
width: 86,
|
|
190
|
+
height: 19
|
|
191
|
+
}
|
|
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",
|
|
203
|
+
{
|
|
204
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
205
|
+
width: "24",
|
|
206
|
+
height: "24",
|
|
207
|
+
viewBox: "0 0 24 24",
|
|
208
|
+
fill: "none",
|
|
209
|
+
"aria-hidden": "true",
|
|
210
|
+
children: /* @__PURE__ */ jsx(
|
|
211
|
+
"path",
|
|
212
|
+
{
|
|
213
|
+
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",
|
|
214
|
+
fill: "#4A5560"
|
|
215
|
+
}
|
|
216
|
+
)
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
}
|
|
220
|
+
)
|
|
221
|
+
] }),
|
|
222
|
+
/* @__PURE__ */ jsx("div", { className: styles.levelContainer, children: /* @__PURE__ */ jsxs("div", { className: "bg_white", children: [
|
|
223
|
+
/* @__PURE__ */ jsxs(
|
|
224
|
+
"span",
|
|
225
|
+
{
|
|
226
|
+
className: `${styles.level} flex middle`,
|
|
227
|
+
"aria-label": "current menu level",
|
|
228
|
+
children: [
|
|
229
|
+
/* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
|
|
230
|
+
/* @__PURE__ */ jsx(
|
|
231
|
+
"svg",
|
|
232
|
+
{
|
|
233
|
+
width: 15,
|
|
234
|
+
height: 12,
|
|
235
|
+
viewBox: "0 0 20 12",
|
|
236
|
+
fill: "none",
|
|
237
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
238
|
+
style: { marginLeft: 12 },
|
|
239
|
+
children: /* @__PURE__ */ jsx(
|
|
240
|
+
"path",
|
|
241
|
+
{
|
|
242
|
+
d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
|
|
243
|
+
fill: "white"
|
|
244
|
+
}
|
|
245
|
+
)
|
|
246
|
+
}
|
|
247
|
+
)
|
|
248
|
+
]
|
|
249
|
+
}
|
|
250
|
+
),
|
|
251
|
+
/* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
|
|
252
|
+
AnimatePresence,
|
|
253
|
+
{
|
|
254
|
+
custom: direction,
|
|
255
|
+
mode: "sync",
|
|
256
|
+
initial: false,
|
|
257
|
+
children: /* @__PURE__ */ jsx(
|
|
258
|
+
motion.ul,
|
|
259
|
+
{
|
|
260
|
+
className: styles.menu,
|
|
261
|
+
custom: direction,
|
|
262
|
+
variants: slideVariants,
|
|
263
|
+
initial: "enter",
|
|
264
|
+
animate: "center",
|
|
265
|
+
exit: "exit",
|
|
266
|
+
transition: { duration: 0.3, ease: "linear" },
|
|
267
|
+
children: Object.entries(currentLevel.items).map(
|
|
268
|
+
([key, value]) => {
|
|
269
|
+
const hasChildren = typeof value === "object";
|
|
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,
|
|
300
|
+
{
|
|
301
|
+
href: value + (queryString && !value.includes("?") ? `?${queryString}` : ""),
|
|
302
|
+
className: styles.menuItem,
|
|
303
|
+
children: /* @__PURE__ */ jsx("span", { children: key })
|
|
304
|
+
}
|
|
305
|
+
) }, key);
|
|
306
|
+
}
|
|
307
|
+
)
|
|
308
|
+
},
|
|
309
|
+
currentLevel.title
|
|
310
|
+
)
|
|
311
|
+
}
|
|
312
|
+
) }),
|
|
313
|
+
/* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
|
|
314
|
+
"a",
|
|
315
|
+
{
|
|
316
|
+
href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
|
|
317
|
+
className: `${styles.quickLink} flex_col middle`,
|
|
318
|
+
"aria-label": `Visit ${link.title} page`,
|
|
319
|
+
children: [
|
|
320
|
+
/* @__PURE__ */ jsx(
|
|
321
|
+
"img",
|
|
322
|
+
{
|
|
323
|
+
src: link.icon,
|
|
324
|
+
alt: "",
|
|
325
|
+
height: 20,
|
|
326
|
+
width: 20,
|
|
327
|
+
loading: "lazy"
|
|
328
|
+
}
|
|
329
|
+
),
|
|
330
|
+
/* @__PURE__ */ jsx("span", { children: link.title })
|
|
331
|
+
]
|
|
332
|
+
},
|
|
333
|
+
link.title
|
|
334
|
+
)) })
|
|
335
|
+
] }) })
|
|
336
|
+
]
|
|
337
|
+
}
|
|
338
|
+
)
|
|
339
|
+
}
|
|
340
|
+
) })
|
|
341
|
+
] });
|
|
342
|
+
};
|
|
343
|
+
export {
|
|
344
|
+
MobileDrawerMenu as default
|
|
345
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_5prlm_1";
|
|
2
|
+
const drawer = "_drawer_5prlm_17";
|
|
3
|
+
const hamburger = "_hamburger_5prlm_45";
|
|
4
|
+
const header = "_header_5prlm_67";
|
|
5
|
+
const back = "_back_5prlm_83";
|
|
6
|
+
const close = "_close_5prlm_105";
|
|
7
|
+
const levelContainer = "_levelContainer_5prlm_119";
|
|
8
|
+
const level = "_level_5prlm_119";
|
|
9
|
+
const levelTitle = "_levelTitle_5prlm_147";
|
|
10
|
+
const menu = "_menu_5prlm_157";
|
|
11
|
+
const menuItem = "_menuItem_5prlm_197";
|
|
12
|
+
const chevron = "_chevron_5prlm_229";
|
|
13
|
+
const chevronIcon = "_chevronIcon_5prlm_239";
|
|
14
|
+
const quickLinks = "_quickLinks_5prlm_261";
|
|
15
|
+
const quickLink = "_quickLink_5prlm_261";
|
|
16
|
+
const sr_only = "_sr_only_5prlm_305";
|
|
17
|
+
const styles = {
|
|
18
|
+
overlay,
|
|
19
|
+
drawer,
|
|
20
|
+
hamburger,
|
|
21
|
+
header,
|
|
22
|
+
back,
|
|
23
|
+
close,
|
|
24
|
+
levelContainer,
|
|
25
|
+
level,
|
|
26
|
+
levelTitle,
|
|
27
|
+
menu,
|
|
28
|
+
menuItem,
|
|
29
|
+
chevron,
|
|
30
|
+
chevronIcon,
|
|
31
|
+
quickLinks,
|
|
32
|
+
quickLink,
|
|
33
|
+
sr_only
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
back,
|
|
37
|
+
chevron,
|
|
38
|
+
chevronIcon,
|
|
39
|
+
close,
|
|
40
|
+
styles as default,
|
|
41
|
+
drawer,
|
|
42
|
+
hamburger,
|
|
43
|
+
header,
|
|
44
|
+
level,
|
|
45
|
+
levelContainer,
|
|
46
|
+
levelTitle,
|
|
47
|
+
menu,
|
|
48
|
+
menuItem,
|
|
49
|
+
overlay,
|
|
50
|
+
quickLink,
|
|
51
|
+
quickLinks,
|
|
52
|
+
sr_only
|
|
53
|
+
};
|