@axos-web-dev/shared-components 1.0.100-dev.69-mobileLogin.2 → 1.0.100-dev.69-mobileLogin.3

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js

@@ -24,10 +24,6 @@ const slideVariants = {
     position: "absolute"
   })
 };
-const loginAccordionTransition = {
-  duration: 0.35,
-  ease: [0.4, 0, 0.2, 1]
-};
 const loginLinksContainerVariants = {
   hidden: {},
   visible: {}
@@ -46,8 +42,9 @@ const MobileDrawerMenu = () => {
   const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
   const [direction, setDirection] = useState("forward");
   const [quickLinks, setQuickLinks] = useState([]);
-  const [loginAccordionOpen, setLoginAccordionOpen] = useState(false);
+  const [loginDrawerOpen, setLoginDrawerOpen] = useState(false);
   const drawerRef = useRef(null);
+  const loginDrawerRef = useRef(null);
   const loginGroups = useMemo(() => getLoginGroups(), []);
   const currentLevel = stack[stack.length - 1];
   const prevLevel = stack[stack.length - 2];
@@ -66,10 +63,6 @@ const MobileDrawerMenu = () => {
     }
   }, []);
   const handleClick = (key) => {
-    if (stack.length === 1 && key === "Log in") {
-      setLoginAccordionOpen((prev) => !prev);
-      return;
-    }
     const item = currentLevel.items[key];
     if (typeof item === "object") {
       setDirection("forward");
@@ -89,10 +82,16 @@ const MobileDrawerMenu = () => {
         setHasOpenedOnce(true);
         setStack([{ title: "Menu", items: menuData }]);
       }
-      if (!isOpening) setLoginAccordionOpen(false);
       return isOpening;
     });
   };
+  const handleLoginDrawerOpen = () => setLoginDrawerOpen(true);
+  const handleLoginDrawerClose = () => setLoginDrawerOpen(false);
+  const handleLoginDrawerOutsideClick = (e) => {
+    if (loginDrawerRef.current && !loginDrawerRef.current.contains(e.target)) {
+      setLoginDrawerOpen(false);
+    }
+  };
   const handleOutsideClick = (e) => {
     if (drawerRef.current && !drawerRef.current.contains(e.target)) {
       setOpen(false);
@@ -115,35 +114,61 @@ const MobileDrawerMenu = () => {
     }
     return () => document.removeEventListener("keydown", onEsc);
   }, [open]);
+  useEffect(() => {
+    if (!loginDrawerOpen) return;
+    document.addEventListener("mousedown", handleLoginDrawerOutsideClick);
+    return () => document.removeEventListener("mousedown", handleLoginDrawerOutsideClick);
+  }, [loginDrawerOpen]);
+  useEffect(() => {
+    const onEsc = (e) => {
+      if (e.key === "Escape") setLoginDrawerOpen(false);
+    };
+    if (loginDrawerOpen) {
+      document.addEventListener("keydown", onEsc);
+    }
+    return () => document.removeEventListener("keydown", onEsc);
+  }, [loginDrawerOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleToggle,
-        className: `${styles.hamburger} flex_col`,
-        "aria-label": "open navigation menu",
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            width: 24,
-            height: 24,
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
-                fill: "#14263D"
-              }
-            )
-          }
-        )
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.mobileNavRow, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleLoginDrawerOpen,
+          className: styles.loginTrigger,
+          "aria-label": "Open login options",
+          children: "Log in"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          className: `${styles.hamburger} flex_col`,
+          "aria-label": "open navigation menu",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: 24,
+              height: 24,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
+                  fill: "#14263D"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -166,132 +191,140 @@ const MobileDrawerMenu = () => {
             "aria-describedby": "menu-description",
             children: [
               /* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles.header,
-                  style: loginAccordionOpen ? { background: "#e9f8ff" } : void 0,
-                  children: [
-                    stack.length > 1 ? /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        onClick: handleBack,
-                        className: styles.back,
-                        "aria-label": "return to previous menu",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "svg",
+              /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                stack.length > 1 ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleBack,
+                    className: styles.back,
+                    "aria-label": "return to previous menu",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: 15,
+                          height: 12,
+                          viewBox: "0 0 20 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          style: { marginRight: 8, transform: "rotate(90deg)" },
+                          children: /* @__PURE__ */ jsx(
+                            "path",
                             {
-                              width: 15,
-                              height: 12,
-                              viewBox: "0 0 20 12",
-                              fill: "none",
-                              xmlns: "http://www.w3.org/2000/svg",
-                              style: { marginRight: 8, transform: "rotate(90deg)" },
-                              children: /* @__PURE__ */ jsx(
-                                "path",
-                                {
-                                  d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
-                                  fill: "#2F5B88"
-                                }
-                              )
+                              d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
+                              fill: "#2F5B88"
                             }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "a",
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
+                    "aria-label": "return to home page",
+                    children: /* @__PURE__ */ jsx(
+                      "img",
                       {
-                        href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
-                        "aria-label": "return to home page",
-                        children: /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
-                            alt: "",
-                            width: 86,
-                            height: 19
-                          }
-                        )
+                        src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
+                        alt: "",
+                        width: 86,
+                        height: 19
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `${styles.close} flex_col`,
+                    "aria-label": "close navigation menu",
+                    onClick: handleToggle,
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
                       {
-                        className: `${styles.close} flex_col`,
-                        "aria-label": "close navigation menu",
-                        onClick: handleToggle,
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        "aria-hidden": "true",
                         children: /* @__PURE__ */ jsx(
-                          "svg",
+                          "path",
                           {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "24",
-                            height: "24",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            "aria-hidden": "true",
-                            children: /* @__PURE__ */ jsx(
-                              "path",
-                              {
-                                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",
-                                fill: "#14263D"
-                              }
-                            )
+                            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",
+                            fill: "#14263D"
                           }
                         )
                       }
                     )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: styles.levelContainer, children: [
-                stack.length === 1 && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: loginAccordionOpen && /* @__PURE__ */ jsx(
-                  motion.div,
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.levelContainer, children: /* @__PURE__ */ jsxs("div", { className: "bg_white", children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
                   {
-                    className: styles.loginAccordionOverlay,
-                    initial: { opacity: 0, y: -12 },
-                    animate: {
-                      opacity: 1,
-                      y: 0,
-                      transition: loginAccordionTransition
-                    },
-                    exit: {
-                      opacity: 0,
-                      y: -12,
-                      transition: loginAccordionTransition
-                    },
-                    "aria-expanded": loginAccordionOpen,
-                    "aria-label": "Login options",
-                    children: /* @__PURE__ */ jsxs("div", { className: styles.loginAccordion, children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
+                    className: `${styles.level} flex middle`,
+                    "aria-label": "current menu level",
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
+                      /* @__PURE__ */ jsx(
+                        "svg",
                         {
-                          type: "button",
-                          className: styles.menuItem,
-                          onClick: () => setLoginAccordionOpen(false),
-                          "aria-label": "Close login options",
-                          children: [
-                            /* @__PURE__ */ jsxs("span", { className: styles.loginHeading, children: [
-                              "Log in",
-                              /* @__PURE__ */ jsx(
-                                "img",
-                                {
-                                  src: "https://www.axos.com/images/1Nb30NbckAMdQNJv7IldNW/user-interface.png",
-                                  alt: "",
-                                  width: 18,
-                                  height: 18,
-                                  "aria-hidden": "true"
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: styles.chevron,
-                                "aria-hidden": "true",
-                                style: { transform: "rotate(180deg)" },
-                                children: /* @__PURE__ */ jsx(
+                          width: 15,
+                          height: 12,
+                          viewBox: "0 0 20 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          style: { marginLeft: 12 },
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
+                              fill: "white"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
+                  AnimatePresence,
+                  {
+                    custom: direction,
+                    mode: "sync",
+                    initial: false,
+                    children: /* @__PURE__ */ jsx(
+                      motion.ul,
+                      {
+                        className: styles.menu,
+                        custom: direction,
+                        variants: slideVariants,
+                        initial: "enter",
+                        animate: "center",
+                        exit: "exit",
+                        transition: { duration: 0.3, ease: "linear" },
+                        children: Object.entries(
+                          stack.length === 1 ? Object.fromEntries(
+                            Object.entries(currentLevel.items).filter(
+                              ([k]) => k !== "Log in"
+                            )
+                          ) : currentLevel.items
+                        ).map(([key, value]) => {
+                          const hasChildren = typeof value === "object";
+                          return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              className: styles.menuItem,
+                              onClick: () => handleClick(key),
+                              "aria-label": `open submenu for ${key}`,
+                              children: [
+                                /* @__PURE__ */ jsx("span", { children: key }),
+                                /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
                                   "svg",
                                   {
                                     className: styles.chevronIcon,
@@ -300,208 +333,187 @@ const MobileDrawerMenu = () => {
                                     viewBox: "0 0 12 20",
                                     fill: "none",
                                     xmlns: "http://www.w3.org/2000/svg",
-                                    style: {
-                                      maxWidth: "none",
-                                      verticalAlign: "middle",
-                                      marginLeft: 11
-                                    },
                                     children: /* @__PURE__ */ jsx(
                                       "path",
                                       {
                                         d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
-                                        fill: "#98DDFF"
+                                        fill: "#4A5560"
                                       }
                                     )
                                   }
-                                )
-                              }
-                            )
-                          ]
-                        }
-                      ),
+                                ) })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
+                              className: styles.menuItem,
+                              children: /* @__PURE__ */ jsx("span", { children: key })
+                            }
+                          ) }, key);
+                        })
+                      },
+                      currentLevel.title
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
+                    className: `${styles.quickLink} flex_col middle`,
+                    "aria-label": `Visit ${link.title} page`,
+                    children: [
                       /* @__PURE__ */ jsx(
-                        motion.ul,
+                        "img",
                         {
-                          className: styles.loginAccordionList,
-                          "aria-label": "Login options",
-                          variants: loginLinksContainerVariants,
-                          initial: "hidden",
-                          animate: "visible",
-                          transition: {
-                            staggerChildren: 0.06,
-                            delayChildren: 0.12
-                          },
-                          children: loginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
-                            motion.li,
-                            {
-                              className: styles.loginAccordionGroup,
-                              variants: loginLinkItemVariants,
-                              transition: {
-                                duration: 0.25,
-                                ease: "easeOut",
-                                delay: 0.12 + groupIndex * 0.05
-                              },
-                              children: [
-                                /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.heading }),
-                                /* @__PURE__ */ jsx(
-                                  motion.ul,
-                                  {
-                                    className: styles.loginAccordionGroupList,
-                                    variants: loginLinksContainerVariants,
-                                    initial: "hidden",
-                                    animate: "visible",
-                                    transition: {
-                                      staggerChildren: 0.04,
-                                      delayChildren: 0.18 + groupIndex * 0.1
-                                    },
-                                    children: group.items.map((item) => /* @__PURE__ */ jsx(
-                                      motion.li,
-                                      {
-                                        variants: loginLinkItemVariants,
-                                        transition: {
-                                          duration: 0.25,
-                                          ease: "easeOut"
-                                        },
-                                        children: /* @__PURE__ */ jsx(
-                                          Link,
-                                          {
-                                            href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
-                                            className: styles.menuItem,
-                                            children: /* @__PURE__ */ jsx("span", { children: item.title })
-                                          }
-                                        )
-                                      },
-                                      item.title
-                                    ))
-                                  }
-                                )
-                              ]
-                            },
-                            group.heading
-                          ))
+                          src: link.icon,
+                          alt: "",
+                          height: 20,
+                          width: 20,
+                          loading: "lazy"
                         }
-                      )
-                    ] })
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: link.title })
+                    ]
+                  },
+                  link.title
+                )) })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: loginDrawerOpen && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: styles.overlay,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: `${styles.drawer} flex_col`,
+            ref: loginDrawerRef,
+            initial: { x: "100%" },
+            animate: { x: 0 },
+            exit: { x: "100%" },
+            transition: { type: "tween", duration: 0.3 },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Login options",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
+                    "aria-label": "return to home page",
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
+                        alt: "",
+                        width: 86,
+                        height: 19
+                      }
+                    )
                   }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { className: "bg_white", children: [
-                  /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: `${styles.level} flex middle`,
-                      "aria-label": "current menu level",
-                      children: [
-                        /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
-                        /* @__PURE__ */ jsx(
-                          "svg",
+                ),
+                /* @__PURE__ */ jsx("span", { className: styles.loginDrawerTitle, children: "Log in" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${styles.close} flex_col`,
+                    "aria-label": "Close login options",
+                    onClick: handleLoginDrawerClose,
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
                           {
-                            width: 15,
-                            height: 12,
-                            viewBox: "0 0 20 12",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            style: { marginLeft: 12 },
-                            children: /* @__PURE__ */ jsx(
-                              "path",
-                              {
-                                d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
-                                fill: "white"
-                              }
-                            )
+                            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",
+                            fill: "#14263D"
                           }
                         )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
-                    AnimatePresence,
-                    {
-                      custom: direction,
-                      mode: "sync",
-                      initial: false,
-                      children: /* @__PURE__ */ jsx(
-                        motion.ul,
-                        {
-                          className: styles.menu,
-                          custom: direction,
-                          variants: slideVariants,
-                          initial: "enter",
-                          animate: "center",
-                          exit: "exit",
-                          transition: { duration: 0.3, ease: "linear" },
-                          children: Object.entries(currentLevel.items).map(
-                            ([key, value]) => {
-                              const hasChildren = typeof value === "object";
-                              const isLogin = key === "Log in";
-                              return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
-                                "button",
-                                {
-                                  className: styles.menuItem,
-                                  onClick: () => handleClick(key),
-                                  "aria-label": isLogin ? "Open login options" : `open submenu for ${key}`,
-                                  "aria-expanded": isLogin ? loginAccordionOpen : void 0,
-                                  children: [
-                                    /* @__PURE__ */ jsx("span", { children: key }),
-                                    /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
-                                      "svg",
-                                      {
-                                        className: styles.chevronIcon,
-                                        width: 12,
-                                        height: 20,
-                                        viewBox: "0 0 12 20",
-                                        fill: "none",
-                                        xmlns: "http://www.w3.org/2000/svg",
-                                        style: isLogin && loginAccordionOpen ? { transform: "rotate(180deg)" } : void 0,
-                                        children: /* @__PURE__ */ jsx(
-                                          "path",
-                                          {
-                                            d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
-                                            fill: "#4A5560"
-                                          }
-                                        )
-                                      }
-                                    ) })
-                                  ]
-                                }
-                              ) : /* @__PURE__ */ jsx(
-                                Link,
-                                {
-                                  href: `${value}${queryString && !value.includes("?") ? `?${queryString}` : ""}`,
-                                  className: styles.menuItem,
-                                  children: /* @__PURE__ */ jsx("span", { children: key })
-                                }
-                              ) }, key);
-                            }
-                          )
-                        },
-                        currentLevel.title
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
-                    "a",
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsx(
+                motion.ul,
+                {
+                  className: styles.loginAccordionList,
+                  "aria-label": "Login options",
+                  variants: loginLinksContainerVariants,
+                  initial: "hidden",
+                  animate: "visible",
+                  transition: {
+                    staggerChildren: 0.06,
+                    delayChildren: 0.12
+                  },
+                  children: loginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+                    motion.li,
                     {
-                      href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
-                      className: `${styles.quickLink} flex_col middle`,
-                      "aria-label": `Visit ${link.title} page`,
+                      className: styles.loginAccordionGroup,
+                      variants: loginLinkItemVariants,
+                      transition: {
+                        duration: 0.25,
+                        ease: "easeOut",
+                        delay: 0.12 + groupIndex * 0.05
+                      },
                       children: [
+                        /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.heading }),
                         /* @__PURE__ */ jsx(
-                          "img",
+                          motion.ul,
                           {
-                            src: link.icon,
-                            alt: "",
-                            height: 20,
-                            width: 20,
-                            loading: "lazy"
+                            className: styles.loginAccordionGroupList,
+                            variants: loginLinksContainerVariants,
+                            initial: "hidden",
+                            animate: "visible",
+                            transition: {
+                              staggerChildren: 0.04,
+                              delayChildren: 0.18 + groupIndex * 0.1
+                            },
+                            children: group.items.map((item) => /* @__PURE__ */ jsx(
+                              motion.li,
+                              {
+                                variants: loginLinkItemVariants,
+                                transition: {
+                                  duration: 0.25,
+                                  ease: "easeOut"
+                                },
+                                children: /* @__PURE__ */ jsx(
+                                  Link,
+                                  {
+                                    href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
+                                    className: styles.menuItem,
+                                    children: /* @__PURE__ */ jsx("span", { children: item.title })
+                                  }
+                                )
+                              },
+                              item.title
+                            ))
                           }
-                        ),
-                        /* @__PURE__ */ jsx("span", { children: link.title })
+                        )
                       ]
                     },
-                    link.title
-                  )) })
-                ] })
-              ] })
+                    group.heading
+                  ))
+                }
+              ) }) })
             ]
           }
         )

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js

@@ -1,30 +1,38 @@
-import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_nfhr7_1";
-const drawer = "_drawer_nfhr7_9";
-const hamburger = "_hamburger_nfhr7_29";
-const header = "_header_nfhr7_40";
-const back = "_back_nfhr7_51";
-const close = "_close_nfhr7_59";
-const levelContainer = "_levelContainer_nfhr7_70";
-const level = "_level_nfhr7_70";
-const levelTitle = "_levelTitle_nfhr7_86";
-const menu = "_menu_nfhr7_91";
-const menuItem = "_menuItem_nfhr7_107";
-const loginAccordionOverlay = "_loginAccordionOverlay_nfhr7_123";
-const loginAccordion = "_loginAccordion_nfhr7_123";
-const loginAccordionList = "_loginAccordionList_nfhr7_151";
-const loginAccordionGroup = "_loginAccordionGroup_nfhr7_157";
-const loginAccordionHeading = "_loginAccordionHeading_nfhr7_162";
-const loginAccordionGroupList = "_loginAccordionGroupList_nfhr7_173";
-const loginHeading = "_loginHeading_nfhr7_216";
-const chevron = "_chevron_nfhr7_226";
-const chevronIcon = "_chevronIcon_nfhr7_231";
-const quickLinks = "_quickLinks_nfhr7_242";
-const quickLink = "_quickLink_nfhr7_242";
-const sr_only = "_sr_only_nfhr7_266";
+import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css';const overlay = "_overlay_5yjt9_1";
+const drawer = "_drawer_5yjt9_9";
+const mobileNavRow = "_mobileNavRow_5yjt9_29";
+const loginTrigger = "_loginTrigger_5yjt9_35";
+const hamburger = "_hamburger_5yjt9_51";
+const loginDrawerTitle = "_loginDrawerTitle_5yjt9_73";
+const loginDrawerContent = "_loginDrawerContent_5yjt9_79";
+const header = "_header_5yjt9_85";
+const back = "_back_5yjt9_96";
+const close = "_close_5yjt9_104";
+const levelContainer = "_levelContainer_5yjt9_115";
+const level = "_level_5yjt9_115";
+const levelTitle = "_levelTitle_5yjt9_131";
+const menu = "_menu_5yjt9_136";
+const menuItem = "_menuItem_5yjt9_152";
+const loginAccordion = "_loginAccordion_5yjt9_168";
+const loginAccordionList = "_loginAccordionList_5yjt9_172";
+const loginAccordionGroup = "_loginAccordionGroup_5yjt9_178";
+const loginAccordionHeading = "_loginAccordionHeading_5yjt9_207";
+const loginAccordionGroupList = "_loginAccordionGroupList_5yjt9_217";
+const loginHeading = "_loginHeading_5yjt9_261";
+const chevron = "_chevron_5yjt9_271";
+const chevronIcon = "_chevronIcon_5yjt9_276";
+const quickLinks = "_quickLinks_5yjt9_287";
+const quickLink = "_quickLink_5yjt9_287";
+const sr_only = "_sr_only_5yjt9_311";
+const loginAccordionOverlay = "_loginAccordionOverlay_5yjt9_336";
 const styles = {
   overlay,
   drawer,
+  mobileNavRow,
+  loginTrigger,
   hamburger,
+  loginDrawerTitle,
+  loginDrawerContent,
   header,
   back,
   close,
@@ -33,7 +41,6 @@ const styles = {
   levelTitle,
   menu,
   menuItem,
-  loginAccordionOverlay,
   loginAccordion,
   loginAccordionList,
   loginAccordionGroup,
@@ -44,7 +51,8 @@ const styles = {
   chevronIcon,
   quickLinks,
   quickLink,
-  sr_only
+  sr_only,
+  loginAccordionOverlay
 };
 export {
   back,
@@ -64,9 +72,13 @@ export {
   loginAccordionHeading,
   loginAccordionList,
   loginAccordionOverlay,
+  loginDrawerContent,
+  loginDrawerTitle,
   loginHeading,
+  loginTrigger,
   menu,
   menuItem,
+  mobileNavRow,
   overlay,
   quickLink,
   quickLinks,

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts

@@ -254,8 +254,11 @@ export declare const menuData: {
             "Wholesale and Correspondent": string;
             "Advisor Login": string;
         };
+        Footer: {
+            "Customer Support": string;
+            "Return to Application": string;
+        };
     };
-    "Return to Application": string;
 };
 export type FlattenedLoginItem = {
     title: string;

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js

@@ -600,12 +600,10 @@ const menuData = {
   },
   "Log in": {
     Personal: {
-      // "Personal Banking Home": findMoreAxosDomains("{AXOSBANK}/personal"),
       "Account Login": findMoreAxosDomains("{ONLINEBANKING}/auth/Login"),
       "Make a Payment": "https://loanpayment.axosbank.com"
     },
     Business: {
-      // "Business Banking Home": findMoreAxosDomains("{AXOSBANK}/business"),
       "Business Banking Login": findMoreAxosDomains(
         "{AXOSBANK}/business/login"
       ),
@@ -617,14 +615,14 @@ const menuData = {
       )
     },
     Partners: {
-      // "Partners Home": findMoreAxosDomains("{AXOSBANK}/partners"),
       "Wholesale and Correspondent": "https://thirdpartylending.axosbank.com/index",
       "Advisor Login": findMoreAxosDomains("{ARMS}")
+    },
+    Footer: {
+      "Customer Support": findMoreAxosDomains("{AXOSBANK}/customer-support"),
+      "Return to Application": findMoreAxosDomains("{AXOSBANK}/return-to-application")
     }
-  },
-  "Return to Application": findMoreAxosDomains(
-    "{AXOSBANK}/return-to-application"
-  )
+  }
 };
 const getLoginGroups = () => {
   const loginSection = menuData["Log in"];

package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css.css

@@ -1,4 +1,4 @@
-._overlay_nfhr7_1 {
+._overlay_5yjt9_1 {
   position: fixed;
   inset: 0;
   height: 100vh;
@@ -6,7 +6,7 @@
   z-index: 10000;
 }
 
-._drawer_nfhr7_9 {
+._drawer_5yjt9_9 {
   background: #fff;
   border-radius: 0 0 0 1rem;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
@@ -22,22 +22,67 @@
   z-index: 10001;
 }
 
-._drawer_nfhr7_9::-webkit-scrollbar {
+._drawer_5yjt9_9::-webkit-scrollbar {
   display: none;
 }
 
-._hamburger_nfhr7_29 {
+._mobileNavRow_5yjt9_29 {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+._loginTrigger_5yjt9_35 {
+  background: transparent;
+  border: none;
+  color: var(--_1073cm83);
+  cursor: pointer;
+  font-family: var(--header-font-family);
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0.25rem 0;
+  transition: opacity 0.2s ease;
+}
+
+._loginTrigger_5yjt9_35:hover {
+  opacity: 0.85;
+}
+
+._hamburger_5yjt9_51 {
   background: transparent;
   border: none;
   cursor: pointer;
   transition: opacity 0.3s ease;
+  position: relative;
 }
 
-._hamburger_nfhr7_29:hover {
+._hamburger_5yjt9_51::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  bottom: 0;
+  height: 28px;
+  border-left: 2px solid #1f1f1f;
+  top: -2px;
+}
+
+._hamburger_5yjt9_51:hover {
   opacity: 0.8;
 }
 
-._header_nfhr7_40 {
+._loginDrawerTitle_5yjt9_73 {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--_1073cm83);
+}
+
+._loginDrawerContent_5yjt9_79 {
+  padding: 1rem 1.2rem 1.2rem;
+  overflow: auto;
+  flex: 1;
+}
+
+._header_5yjt9_85 {
   display: flex;
   align-items: center;
   background: #f4f4f4;
@@ -48,7 +93,7 @@
   z-index: 1;
 }
 
-._back_nfhr7_51 {
+._back_5yjt9_96 {
   color: var(--_1073cm83);
   font-size: 1rem;
   font-weight: 700;
@@ -56,23 +101,23 @@
   padding: 0;
 }
 
-._close_nfhr7_59 {
+._close_5yjt9_104 {
   font-size: 1.3rem;
 }
 
-._back_nfhr7_51,
-._close_nfhr7_59 {
+._back_5yjt9_96,
+._close_5yjt9_104 {
   background: none;
   border: none;
   cursor: pointer;
 }
 
-._levelContainer_nfhr7_70 {
+._levelContainer_5yjt9_115 {
   height: 100%;
   position: relative;
 }
 
-._level_nfhr7_70 {
+._level_5yjt9_115 {
   background: var(--_1073cm86);
   color: var(--_1073cm85);
   font-size: 0.9rem;
@@ -83,12 +128,12 @@
   z-index: 1;
 }
 
-._levelTitle_nfhr7_86 {
+._levelTitle_5yjt9_131 {
   font: 700 0.9rem / 1.39 var(--main-font-family);
   letter-spacing: 0.4px;
 }
 
-._menu_nfhr7_91 {
+._menu_5yjt9_136 {
   background-color: transparent;
   list-style: none;
   margin: 0;
@@ -97,14 +142,14 @@
   position: relative;
 }
 
-._menu_nfhr7_91 li {
+._menu_5yjt9_136 li {
   color: var(--_1073cm83);
   font-family: var(--header-font-family);
   font-weight: 500;
   border-top: 1px solid #e9e9e9;
 }
 
-._menuItem_nfhr7_107 {
+._menuItem_5yjt9_152 {
   display: flex;
   align-items: center;
   background: none;
@@ -120,90 +165,90 @@
   width: 100%;
 }
 
-._loginAccordionOverlay_nfhr7_123 {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  background: #14263d;
-  color: #fff;
-  overflow: auto;
-  padding: 1rem 1.2rem 1.2rem;
-  isolation: isolate;
-}
-
-._loginAccordionOverlay_nfhr7_123::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  width: 76%;
-  background: url("https://www.axos.com/images/4rvifCx4C5Z57fagaQiEKl/current__1_.png")
-    left top / cover no-repeat;
-  z-index: -1;
-  opacity: 0.2;
-}
-
-._loginAccordion_nfhr7_123 {
+._loginAccordion_5yjt9_168 {
   padding: 0;
 }
 
-._loginAccordionList_nfhr7_151 {
+._loginAccordionList_5yjt9_172 {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-._loginAccordionGroup_nfhr7_157 {
-  margin-top: 12px;
+._loginAccordionGroup_5yjt9_178 {
   padding-block: 4px;
 }
 
-._loginAccordionHeading_nfhr7_162 {
+._loginAccordionGroup_5yjt9_178 + ._loginAccordionGroup_5yjt9_178 {
+  margin-top: 2px;
+  position: relative;
+}
+
+._loginAccordionGroup_5yjt9_178:nth-child(4):is(:last-child) {
+  padding-top: 12px;
+  margin-top: 12px;
+}
+
+._loginAccordionGroup_5yjt9_178:nth-child(4):is(:last-child)::before {
+  content: "";
+  background-color: #8f8f8f;
+  height: 2px;
+  opacity: 0.3;
+  position: absolute;
+  right: 8px;
+  top: 0;
+  width: 94%;
+}
+
+._loginAccordionGroup_5yjt9_178:nth-child(4):is(:last-child) > span {
+  display: none;
+}
+
+._loginAccordionHeading_5yjt9_207 {
   display: block;
   font-family: var(--header-font-family);
   font-weight: 700;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: #fff;
+  font-size: 18px;
+  line-height: 1.39;
+
   padding: 0.35rem 0 0.2rem;
 }
 
-._loginAccordionGroupList_nfhr7_173 {
+._loginAccordionGroupList_5yjt9_217 {
   list-style: none;
   margin: 0;
-  padding: 0 0 0 16px;
+  padding: 0 0 0 8px;
 }
 
-._loginAccordionList_nfhr7_151 li {
+._loginAccordionList_5yjt9_172 li {
   font-family: var(--header-font-family);
   font-weight: 500;
 }
 
-._loginAccordionList_nfhr7_151 li li {
+._loginAccordionList_5yjt9_172 li li {
   border-top: none;
-  color: #98ddff;
-  font-weight: 700;
+  color: #1e629a;
+  font-weight: 400;
   padding-block: 3px;
+  font-family: var(--main-font-family);
 }
 
-._loginAccordionList_nfhr7_151 ._menuItem_nfhr7_107 {
+._loginAccordionList_5yjt9_172 ._menuItem_5yjt9_152 {
   display: inline;
   padding-block: 0px;
 }
 
-._loginAccordionList_nfhr7_151 ._menuItem_nfhr7_107:hover {
+._loginAccordionList_5yjt9_172 ._menuItem_5yjt9_152:hover {
   opacity: 0.7;
 }
 
-._loginAccordion_nfhr7_123 > ._menuItem_nfhr7_107 {
+._loginAccordion_5yjt9_168 > ._menuItem_5yjt9_152 {
   padding-block: 4px;
   position: relative;
   isolation: isolate;
 }
 
-._loginAccordion_nfhr7_123 > ._menuItem_nfhr7_107::after {
+._loginAccordion_5yjt9_168 > ._menuItem_5yjt9_152::after {
   content: "return to menu";
   position: absolute;
   right: 36px;
@@ -213,7 +258,7 @@
   letter-spacing: 0.5px;
 }
 
-._loginHeading_nfhr7_216 {
+._loginHeading_5yjt9_261 {
   font-family: var(--header-font-family);
   font-size: 20px;
   font-weight: 700;
@@ -223,23 +268,23 @@
   gap: 8px;
 }
 
-._chevron_nfhr7_226 {
+._chevron_5yjt9_271 {
   font-size: 1.2rem;
   margin-left: auto;
 }
 
-._chevronIcon_nfhr7_231 {
+._chevronIcon_5yjt9_276 {
   height: auto;
   margin-right: 10px;
   max-width: 8px;
 }
 
-body:has(._drawer_nfhr7_9) {
+body:has(._drawer_5yjt9_9) {
   overflow-y: hidden;
   position: relative;
 }
 
-._quickLinks_nfhr7_242 {
+._quickLinks_5yjt9_287 {
   background-color: #e8f7ff;
   bottom: 0;
   box-shadow: 0 15px 10px -20px rgba(0, 0, 0, 0.45) inset;
@@ -249,7 +294,7 @@ body:has(._drawer_nfhr7_9) {
   position: sticky;
 }
 
-._quickLink_nfhr7_242 {
+._quickLink_5yjt9_287 {
   display: flex;
   align-items: center;
   color: var(--_1073cm83);
@@ -263,7 +308,7 @@ body:has(._drawer_nfhr7_9) {
   text-transform: uppercase;
 }
 
-._sr_only_nfhr7_266 {
+._sr_only_5yjt9_311 {
   position: absolute;
   border: 0;
   clip: rect(0, 0, 0, 0);
@@ -276,19 +321,25 @@ body:has(._drawer_nfhr7_9) {
 }
 
 @media (max-width: 540px) {
-  ._drawer_nfhr7_9 {
+  ._drawer_5yjt9_9 {
     border-radius: 0;
     max-width: none;
     width: 100%;
   }
-  ._menu_nfhr7_91 li + li {
+  ._menu_5yjt9_136 li + li {
     margin-top: 3px;
   }
-  ._menuItem_nfhr7_107 {
+  ._menuItem_5yjt9_152 {
     font-size: 0.9rem;
     padding: 0.65rem 0;
   }
-  ._loginAccordionOverlay_nfhr7_123::before {
+  ._loginAccordionOverlay_5yjt9_336::before {
     opacity: 0.1;
   }
 }
+
+@media (min-width: 541px) {
+  ._drawer_5yjt9_9:has(._loginDrawerContent_5yjt9_79) {
+    max-width: 345px;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.69-mobileLogin.2",
+  "version": "1.0.100-dev.69-mobileLogin.3",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",