@axos-web-dev/shared-components 0.0.11 → 0.0.13

package/dist/NavigationMenu/AxosAdvisor/index.js

@@ -1,17 +1,40 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useState, useRef } from "react";
+import { Button } from "../../Button/Button.js";
+import "../../Button/Button.css.js";
+import { useState, useRef, useEffect } from "react";
 import { useClickAway } from "react-use";
+import clsx from "clsx";
+import { NavItem } from "../NavItem/index.js";
+import { Sign_in_btn, expand } from "./NavBar.css.js";
 import styles from "./NavBar.module.js";
+import { navItems } from "./NavData.js";
 import SubNavBar from "./SubNavBar.js";
 var define_process_env_default = {};
 function NavBar() {
   const [isOpenSignIn, setisOpenSignIn] = useState(false);
   const [isOpenMobile, setisOpenMobile] = useState(false);
+  const [activeIndex, setActiveIndex] = useState();
+  const [lastNavItem, setLastNavItem] = useState();
   const ref = useRef(null);
   const toggle = () => setisOpenSignIn(!isOpenSignIn);
   const mobileToggle = () => setisOpenMobile(!isOpenMobile);
+  const handleClick = (index) => setActiveIndex(index);
+  const [isOpenProducts, setisOpenProducts] = useState(false);
+  const toggleProducts = () => setisOpenProducts(!isOpenProducts);
+  const getActiveIndex = () => {
+    const pathname = "/" + location.pathname.split("/")[1];
+    const index = navItems.findIndex(
+      (path) => path.url === pathname
+    );
+    setActiveIndex(index);
+  };
+  useEffect(() => {
+    getActiveIndex();
+  }, [activeIndex]);
+  useEffect(() => {
+    setLastNavItem(navItems[navItems.length - 1]);
+  }, [navItems]);
   useClickAway(ref, (e) => {
     var _a;
     if (((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.tagName) !== "A") {
@@ -30,12 +53,20 @@ function NavBar() {
             height: 51
           }
         ) }) }),
-        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", role: "menu", children: [
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/products", className: "active", role: "menuitem", children: "Products" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/find-your-advisor", role: "menuitem", children: "Find Your Advisor" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/RIAs", role: "menuitem", children: "RIAs" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/resources", role: "menuitem", children: "Resources" }) })
-        ] }) })
+        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
+          (item, i, arr) => arr.length - 1 !== i && /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              className: styles.main_nav_link,
+              onClick: handleClick,
+              index: i,
+              name: item.name,
+              url: item.url,
+              isActive: activeIndex == i
+            },
+            i
+          )
+        ) }) })
       ] }) }),
       /* @__PURE__ */ jsx(
         "button",
@@ -53,8 +84,8 @@ function NavBar() {
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  "fill-rule": "evenodd",
-                  "clip-rule": "evenodd",
+                  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: "#4A5560"
                 }
@@ -72,133 +103,139 @@ function NavBar() {
           height: 33
         }
       ) }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.signin_wrap, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.mobile_only, children: /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
-            className: "link",
-            children: "Sign In"
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${styles.desktop_only} flex_row middle relative`,
-            ref,
-            children: [
-              /* @__PURE__ */ jsx("a", { href: "/Contact-Us", className: "link", children: "Contact Us" }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: clsx(
-                    styles.signin_btn,
-                    "flex_row",
-                    "center",
-                    "middle",
-                    isOpenSignIn ? styles.open : ""
-                  ),
-                  id: "signIn",
-                  onClick: toggle,
-                  "aria-controls": "signin-drop-menu",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "Sign In" }),
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        width: "20",
-                        height: "12",
-                        viewBox: "0 0 20 12",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
+      /* @__PURE__ */ jsx("div", { className: styles.signin_wrap, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${styles.desktop_only} flex_row middle relative`,
+          ref,
+          children: [
+            lastNavItem && /* @__PURE__ */ jsx(
+              NavItem,
+              {
+                url: lastNavItem.url,
+                name: lastNavItem.name,
+                className: `link list_unstyled ${styles.main_nav_link}`,
+                isActive: activeIndex == navItems.length,
+                onClick: handleClick,
+                index: navItems.length
+              },
+              navItems.length + 1
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: clsx(
+                  styles.signin_btn,
+                  "flex_row",
+                  "center",
+                  "middle",
+                  isOpenSignIn ? styles.open : "",
+                  Sign_in_btn
+                ),
+                as: "button",
+                type: "button",
+                color: "primary",
+                id: "signIn",
+                action: toggle,
+                size: "small",
+                "aria-controls": "signin-drop-menu",
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "Sign In" }),
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "12",
+                      viewBox: "0 0 20 12",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      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(
+              "div",
+              {
+                className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
+                children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsxs(
+                  "ul",
+                  {
+                    className: "list_unstyled",
+                    role: "menu",
+                    "aria-expanded": isOpenSignIn,
+                    id: "signin-drop-menu",
+                    children: [
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx("a", { href: "#", className: styles.signin_header, children: "Personal" }),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
                           {
-                            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"
+                            href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+                            role: "menuitem",
+                            children: "Account Login"
                           }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
-                  children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsxs(
-                    "ul",
-                    {
-                      className: "list_unstyled",
-                      role: "menu",
-                      "aria-expanded": isOpenSignIn,
-                      id: "signin-drop-menu",
-                      children: [
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx("a", { href: "#", className: styles.signin_header, children: "Personal" }),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
-                              role: "menuitem",
-                              children: "Account Login"
-                            }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx("a", { href: "#", className: `${styles.signin_header}`, children: "Business" }),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: "https://www.netteller.com/axosbank",
-                              role: "menuitem",
-                              children: "Business Banking Login"
-                            }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: "#",
-                              role: "menuitem",
-                              className: `${styles.signin_header}`,
-                              children: "Advisors"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx("a", { href: "#", className: `${styles.signin_header}`, children: "Business" }),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "https://www.netteller.com/axosbank",
+                            role: "menuitem",
+                            children: "Business Banking Login"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "#",
+                            role: "menuitem",
+                            className: `${styles.signin_header}`,
+                            children: "Advisors"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "https://arms.axosadvisor.com/",
+                            role: "menuitem",
+                            children: "Advisor Login"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          className: `${styles.signin_subheader} ${styles.footer} relative`,
+                          children: /* @__PURE__ */ jsx(
                             "a",
                             {
-                              href: "https://arms.axosadvisor.com/",
+                              href: "{AXOSBANK}/Return-to-Application",
                               role: "menuitem",
-                              children: "Advisor Login"
+                              children: "Return to Application"
                             }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          "li",
-                          {
-                            className: `${styles.signin_subheader} ${styles.footer} relative`,
-                            children: /* @__PURE__ */ jsx(
-                              "a",
-                              {
-                                href: "{AXOSBANK}/Return-to-Application",
-                                role: "menuitem",
-                                children: "Return to Application"
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ) })
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      ) })
     ] }) }) }),
     /* @__PURE__ */ jsx(SubNavBar, {}),
     /* @__PURE__ */ jsx(
@@ -234,7 +271,7 @@ function NavBar() {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", children: [
+          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", "aria-expanded": isOpenProducts, children: [
             /* @__PURE__ */ jsxs(
               "li",
               {
@@ -245,89 +282,105 @@ function NavBar() {
                     "a",
                     {
                       href: "#",
+                      onClick: toggleProducts,
                       role: "button",
-                      className: `flex_row between ${styles.btn}`,
+                      className: clsx("flex_row", "between"),
                       children: [
                         "Products",
-                        /* @__PURE__ */ jsx("span", { className: styles.icon_wrap, children: /* @__PURE__ */ jsx(
-                          "svg",
+                        /* @__PURE__ */ jsx(
+                          "span",
                           {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "24",
-                            height: "24",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
+                            className: clsx(
+                              styles.icon_wrap,
+                              isOpenProducts && styles.open
+                            ),
                             children: /* @__PURE__ */ jsx(
-                              "path",
+                              "svg",
                               {
-                                d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
-                                fill: "#4A5560"
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "24",
+                                height: "24",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                children: /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
+                                    fill: "#4A5560"
+                                  }
+                                )
                               }
                             )
                           }
-                        ) })
+                        )
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs("div", { className: styles.sub_menu, children: [
-                    /* @__PURE__ */ jsx("a", { href: "/products", className: styles.main, role: "heading", children: "Products Home" }),
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: "/Products/Select-High-Yield-Money-Market",
-                        role: "menuitem",
-                        children: "Select High Yield Money Market"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-CDs", role: "menuitem", children: "Select CDs" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-Checking", role: "menuitem", children: "Select Checking" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-Savings", role: "menuitem", children: "Select Savings" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Business-Banking", role: "menuitem", children: "Business Banking" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Mortgage", role: "menuitem", children: "Mortgage" }),
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: "/Products/Premier-World-Checking-and-Savings",
-                        className: styles.main,
-                        role: "heading",
-                        children: "Private Client"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: "/Products/Premier-Private-Client-Banking",
-                        role: "menuitem",
-                        children: "Advisor Private Client Banking"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/InsureGuard-for-Advisor", role: "menuitem", children: "InsureGuard+" }),
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: "/Products/Premier-World-Checking-and-Savings",
-                        role: "menuitem",
-                        children: "Advisor World Checking and Savings"
-                      }
-                    )
-                  ] })
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(styles.sub_menu, isOpenProducts && expand),
+                      children: [
+                        /* @__PURE__ */ jsx("a", { href: "/products", className: styles.main, role: "heading", children: "Products Home" }),
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "/products/select-high-yield-money-market",
+                            role: "menuitem",
+                            children: "Select High Yield Money Market"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("a", { href: "/products/select-cds", role: "menuitem", children: "Select CDs" }),
+                        /* @__PURE__ */ jsx("a", { href: "/products/select-checking", role: "menuitem", children: "Select Checking" }),
+                        /* @__PURE__ */ jsx("a", { href: "/products/select-savings", role: "menuitem", children: "Select Savings" }),
+                        /* @__PURE__ */ jsx("a", { href: "/products/business-banking", role: "menuitem", children: "Business Banking" }),
+                        /* @__PURE__ */ jsx("a", { href: "/products/mortgage", role: "menuitem", children: "Mortgage" }),
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "/products/premier-world-checking-and-savings",
+                            className: styles.main,
+                            role: "heading",
+                            children: "Private Client"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "/products/premier-private-client-banking",
+                            role: "menuitem",
+                            children: "Advisor Private Client Banking"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("a", { href: "/products/insureguard-for-advisor", role: "menuitem", children: "InsureGuard+" }),
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "/products/premier-world-checking-and-savings",
+                            role: "menuitem",
+                            children: "Advisor World Checking and Savings"
+                          }
+                        )
+                      ]
+                    }
+                  )
                 ]
               }
             ),
             /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_2", children: /* @__PURE__ */ jsx(
               "a",
               {
-                href: "/Find-your-advisor",
+                href: "/find-your-advisor",
                 role: "button",
                 className: `flex_row between ${styles.btn}`,
                 children: "Find Your Advisor"
               }
             ) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx("a", { href: "/RIAs", role: "button", className: "flex_row between", children: "RIAs" }) }),
+            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx("a", { href: "/rias", role: "button", className: "flex_row between", children: "RIAs" }) }),
             /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, children: /* @__PURE__ */ jsx(
               "a",
               {
-                href: "/Contact-Us",
+                href: "/contact-us",
                 role: "button",
                 className: "flex_row between",
                 children: "Contact Us"
@@ -345,34 +398,44 @@ function NavBar() {
                       href: "#",
                       role: "button",
                       className: `flex_row between ${styles.btn}`,
+                      onClick: toggle,
                       children: [
                         "Sign In",
-                        /* @__PURE__ */ jsx("span", { className: styles.icon_wrap, children: /* @__PURE__ */ jsx(
-                          "svg",
+                        /* @__PURE__ */ jsx(
+                          "span",
                           {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "24",
-                            height: "24",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
+                            className: clsx(
+                              styles.icon_wrap,
+                              isOpenSignIn && styles.open
+                            ),
                             children: /* @__PURE__ */ jsx(
-                              "path",
+                              "svg",
                               {
-                                d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
-                                fill: "#4A5560"
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "24",
+                                height: "24",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                children: /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
+                                    fill: "#4A5560"
+                                  }
+                                )
                               }
                             )
                           }
-                        ) })
+                        )
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs("div", { className: styles.sub_menu, children: [
+                  /* @__PURE__ */ jsxs("div", { className: clsx(styles.sub_menu, isOpenSignIn && expand), children: [
                     /* @__PURE__ */ jsx("span", { className: styles.main, role: "heading", children: "Personal" }),
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+                        href: `https://onlinebanking.uat.axsobank.com/auth/login`,
                         role: "menuitem",
                         children: "Account Login"
                       }
@@ -400,7 +463,14 @@ function NavBar() {
                 className: `${styles.mobile_footer_content} flex_col between`,
                 children: [
                   /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Get personalized support" }) }),
-                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx("a", { href: "mailto:support@axosadvisor.com", children: "Contact Us" }) })
+                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      color: "primary",
+                      targetUrl: "mailto:support@axosadvisor.com",
+                      children: "Contact Us"
+                    }
+                  ) })
                 ]
               }
             ),