@axos-web-dev/shared-components 0.0.10 → 0.0.12

package/dist/NavigationMenu/AxosAdvisor/index.js

@@ -1,17 +1,38 @@
 "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 } 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 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 +51,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 +82,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 +101,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 + 1,
+                onClick: handleClick,
+                index: navItems.length + 1
+              },
+              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(
@@ -274,20 +309,20 @@ function NavBar() {
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Select-High-Yield-Money-Market",
+                        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/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",
+                        href: "/products/premier-world-checking-and-savings",
                         className: styles.main,
                         role: "heading",
                         children: "Private Client"
@@ -296,16 +331,16 @@ function NavBar() {
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Premier-Private-Client-Banking",
+                        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/insureGuard-for-advisor", role: "menuitem", children: "InsureGuard+" }),
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Premier-World-Checking-and-Savings",
+                        href: "/products/premier-world-checking-and-savings",
                         role: "menuitem",
                         children: "Advisor World Checking and Savings"
                       }
@@ -400,7 +435,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"
+                    }
+                  ) })
                 ]
               }
             ),

package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js

@@ -1,43 +1,43 @@
-const header = "_header_106qs_1";
-const wrapper = "_wrapper_106qs_5";
-const header_main_row = "_header_main_row_106qs_11";
-const mobile_header = "_mobile_header_106qs_12";
-const logo_wrap = "_logo_wrap_106qs_18";
-const primary_links = "_primary_links_106qs_22";
-const main_nav = "_main_nav_106qs_26";
-const main_nav_link = "_main_nav_link_106qs_33";
-const sub_nav_link = "_sub_nav_link_106qs_55";
-const signin_wrap = "_signin_wrap_106qs_57";
-const signin_btn = "_signin_btn_106qs_58";
-const sub_nav = "_sub_nav_106qs_55";
-const header_sub_row = "_header_sub_row_106qs_99";
-const shadow = "_shadow_106qs_115";
-const opacity = "_opacity_106qs_131";
-const fadeInDown = "_fadeInDown_106qs_1";
-const footer = "_footer_106qs_137";
-const open = "_open_106qs_153";
-const mt_8 = "_mt_8_106qs_161";
-const mt_16 = "_mt_16_106qs_165";
-const ml_8 = "_ml_8_106qs_169";
-const reversed_row = "_reversed_row_106qs_173";
-const nav_anchor = "_nav_anchor_106qs_177";
-const site_lists = "_site_lists_106qs_188";
-const hamburger = "_hamburger_106qs_192";
-const mobile_logo = "_mobile_logo_106qs_206";
-const mobile_nav = "_mobile_nav_106qs_229";
-const mobile_opened = "_mobile_opened_106qs_241";
-const mobile_nav_item = "_mobile_nav_item_106qs_245";
-const icon_wrap = "_icon_wrap_106qs_260";
-const mobile_footer = "_mobile_footer_106qs_265";
-const mobile_footer_content = "_mobile_footer_content_106qs_271";
-const mobile_footer_media = "_mobile_footer_media_106qs_285";
-const footer_cta = "_footer_cta_106qs_292";
-const inner_wrapper = "_inner_wrapper_106qs_324";
-const btn = "_btn_106qs_328";
-const sub_menu = "_sub_menu_106qs_333";
-const main = "_main_106qs_26";
-const desktop_only = "_desktop_only_106qs_362";
-const mobile_only = "_mobile_only_106qs_409";
+const header = "_header_nlu6n_1";
+const wrapper = "_wrapper_nlu6n_5";
+const header_main_row = "_header_main_row_nlu6n_11";
+const mobile_header = "_mobile_header_nlu6n_12";
+const logo_wrap = "_logo_wrap_nlu6n_18";
+const primary_links = "_primary_links_nlu6n_22";
+const main_nav = "_main_nav_nlu6n_26";
+const main_nav_link = "_main_nav_link_nlu6n_33";
+const sub_nav_link = "_sub_nav_link_nlu6n_55";
+const signin_wrap = "_signin_wrap_nlu6n_57";
+const signin_btn = "_signin_btn_nlu6n_58";
+const sub_nav = "_sub_nav_nlu6n_55";
+const header_sub_row = "_header_sub_row_nlu6n_99";
+const shadow = "_shadow_nlu6n_115";
+const opacity = "_opacity_nlu6n_131";
+const fadeInDown = "_fadeInDown_nlu6n_1";
+const footer = "_footer_nlu6n_137";
+const open = "_open_nlu6n_153";
+const mt_8 = "_mt_8_nlu6n_161";
+const mt_16 = "_mt_16_nlu6n_165";
+const ml_8 = "_ml_8_nlu6n_169";
+const reversed_row = "_reversed_row_nlu6n_173";
+const nav_anchor = "_nav_anchor_nlu6n_177";
+const site_lists = "_site_lists_nlu6n_188";
+const hamburger = "_hamburger_nlu6n_192";
+const mobile_logo = "_mobile_logo_nlu6n_206";
+const mobile_nav = "_mobile_nav_nlu6n_229";
+const mobile_opened = "_mobile_opened_nlu6n_241";
+const mobile_nav_item = "_mobile_nav_item_nlu6n_245";
+const icon_wrap = "_icon_wrap_nlu6n_260";
+const mobile_footer = "_mobile_footer_nlu6n_265";
+const mobile_footer_content = "_mobile_footer_content_nlu6n_271";
+const mobile_footer_media = "_mobile_footer_media_nlu6n_285";
+const footer_cta = "_footer_cta_nlu6n_292";
+const inner_wrapper = "_inner_wrapper_nlu6n_324";
+const btn = "_btn_nlu6n_328";
+const sub_menu = "_sub_menu_nlu6n_333";
+const main = "_main_nlu6n_26";
+const desktop_only = "_desktop_only_nlu6n_362";
+const mobile_only = "_mobile_only_nlu6n_409";
 const styles = {
   header,
   wrapper,

package/dist/NavigationMenu/AxosFiduciary/NavData.d.ts

@@ -0,0 +1,4 @@
+export declare const navItems: {
+    name: string;
+    url: string;
+}[];

package/dist/NavigationMenu/AxosFiduciary/NavData.js

@@ -0,0 +1,9 @@
+const navItems = [
+  { name: "About Us", url: "/about-us" },
+  { name: "Services", url: "/services" },
+  { name: "Software", url: "/software" },
+  { name: "Contact", url: "/contact" }
+];
+export {
+  navItems
+};

package/dist/NavigationMenu/AxosFiduciary/index.js

@@ -1,11 +1,25 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { NavItem } from "../NavItem/index.js";
 import styles from "./NavBar.module.js";
+import { navItems } from "./NavData.js";
 const NavBarAFS = () => {
   const [isOpenMobile, setisOpenMobile] = useState(false);
   const mobileToggle = () => setisOpenMobile(!isOpenMobile);
+  const [activeIndex, setActiveIndex] = useState();
+  const handleClick = (index) => setActiveIndex(index);
+  const getActiveIndex = () => {
+    const pathname = "/" + location.pathname.split("/")[1];
+    const index = navItems.findIndex(
+      (path) => path.url === pathname
+    );
+    setActiveIndex(index);
+  };
+  useEffect(() => {
+    getActiveIndex();
+  }, [activeIndex]);
   return /* @__PURE__ */ jsxs("header", { children: [
     /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
       /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
@@ -25,12 +39,20 @@ const NavBarAFS = () => {
             )
           }
         ) }),
-        /* @__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: "/about-us", className: "active", role: "menuitem", children: "About Us" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/services", role: "menuitem", children: "Services" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/software", role: "menuitem", children: "Software" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "contact", role: "menuitem", children: "Contact" }) })
-        ] }) })
+        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
+          (item, 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",
@@ -101,12 +123,18 @@ const NavBarAFS = () => {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", children: [
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_1", children: /* @__PURE__ */ jsx("a", { href: "#", children: "About Us" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_2", children: /* @__PURE__ */ jsx("a", { href: "/services", children: "Services" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_3", children: /* @__PURE__ */ jsx("a", { href: "/Software", children: "Software" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_4", children: /* @__PURE__ */ jsx("a", { href: "/Contact", children: "Contact" }) })
-          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: navItems.map(
+            (item, i) => /* @__PURE__ */ jsx(
+              NavItem,
+              {
+                className: styles.mobile_nav_item,
+                index: i,
+                name: item.name,
+                url: item.url
+              },
+              `dd_${i}`
+            )
+          ) }) }),
           /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
             /* @__PURE__ */ jsxs(
               "div",

package/dist/NavigationMenu/NavItem/index.d.ts

@@ -0,0 +1,10 @@
+export interface NavItemProps {
+    className: string;
+    url: string;
+    index: number;
+    name: string;
+    onClick?: (index: number) => void;
+    isActive?: boolean;
+}
+export declare const NavItem: ({ className, url, name, index, onClick, isActive, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+export default NavItem;

package/dist/NavigationMenu/NavItem/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+const NavItem = ({
+  className,
+  url,
+  name,
+  index,
+  onClick,
+  isActive
+}) => {
+  const handleClick = () => onClick && onClick(index);
+  return /* @__PURE__ */ jsx("li", { className, children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      className: isActive ? "active" : "",
+      role: "menuitem",
+      onClick: handleClick,
+      children: name
+    }
+  ) });
+};
+export {
+  NavItem,
+  NavItem as default
+};

package/dist/SetContainer/SetContainer.js

@@ -11,6 +11,7 @@ import "../Chevron/Chevron.css.js";
 import "clsx";
 import "react";
 import "../Button/Button.css.js";
+import "react-use";
 import { inline_container } from "./SetContainer.css.js";
 const SetContainer = ({
   id,