@loafmarkets/ui 0.1.386 → 0.1.387

package/dist/index.mjs

@@ -5036,13 +5036,7 @@ function useIsNarrow(maxWidthPx = 768) {
   }, [query]);
   return narrow;
 }
-var DEFAULT_TRADE_PATH = "/trade";
 var DEFAULT_HOME_PATH = "/";
-var DEFAULT_ABOUT_PATH = "/about";
-var DEFAULT_LEARN_PATH = "/learn";
-var DEFAULT_API_PATH = "/api";
-var DEFAULT_PROPERTY_MAP_PATH = "/map";
-var DEFAULT_PORTFOLIO_PATH = "/portfolio";
 var DEFAULT_LOAF_LIQUIDITY_PATH = "/loaf-liquidity";
 var DEFAULT_AUTH_RETURN_PARAM = "returnTo";
 var LOGIN_POPUP_EVENT = "loaf:open-login-popup";
@@ -5050,19 +5044,13 @@ var Header = ({
   currentUser,
   isAuthenticated = false,
   locationPath = DEFAULT_HOME_PATH,
-  activeTab,
+  navItems,
+  activeKey,
   onNavigate,
   onLogout,
   onSignInClick,
   loginPopupComponent: LoginPopupComponent,
-  tradePath = DEFAULT_TRADE_PATH,
   homePath = DEFAULT_HOME_PATH,
-  aboutPath = DEFAULT_ABOUT_PATH,
-  learnPath = DEFAULT_LEARN_PATH,
-  apiPath = DEFAULT_API_PATH,
-  offeringsPath,
-  propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
-  portfolioPath = DEFAULT_PORTFOLIO_PATH,
   loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
   authLoginUrl,
   authReturnParam = DEFAULT_AUTH_RETURN_PARAM,
@@ -5070,12 +5058,10 @@ var Header = ({
   logoHref,
   onLogoClick,
   onLoafLiquidityClick,
-  onTradeClick,
   onProfileNavigate: _onProfileNavigate,
   onOrdersNavigate: _onOrdersNavigate,
   onWalletNavigate: _onWalletNavigate,
   onSettingsClick,
-  showTradeTab = true,
   portfolioSummary,
   fundsPending = false,
   transparentOnTop = false
@@ -5219,10 +5205,6 @@ var Header = ({
       window.location.href = path;
     }
   };
-  const handleNavigation = (path) => {
-    closeMenus();
-    performNavigation(path);
-  };
   const handleLogoNavigation = (event) => {
     event.preventDefault();
     closeMenus();
@@ -5240,16 +5222,19 @@ var Header = ({
     }
     performNavigation(resolvedLoafLiquidityPath);
   };
-  const handleTradeNavigation = () => {
-    if (!showTradeTab) {
+  const handleNavItem = (item) => {
+    closeMenus();
+    if (item.onSelect) {
+      item.onSelect();
       return;
     }
-    closeMenus();
-    if (onTradeClick) {
-      onTradeClick();
+    if (item.external) {
+      if (typeof window !== "undefined") {
+        window.open(item.path, "_blank", "noopener,noreferrer");
+      }
       return;
     }
-    performNavigation(resolvedTradePath);
+    performNavigation(item.path);
   };
   const handleLogoutClick = async (event) => {
     event?.preventDefault();
@@ -5327,36 +5312,23 @@ var Header = ({
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
-  const resolvedTradePath = tradePath ?? DEFAULT_TRADE_PATH;
   const resolvedHomePath = homePath ?? DEFAULT_HOME_PATH;
-  const resolvedAboutPath = aboutPath ?? DEFAULT_ABOUT_PATH;
-  const resolvedLearnPath = learnPath ?? DEFAULT_LEARN_PATH;
-  const resolvedApiPath = apiPath ?? DEFAULT_API_PATH;
-  const resolvedOfferingsPath = offeringsPath ?? void 0;
-  const offeringsHref = resolvedOfferingsPath ?? resolvedHomePath;
-  const resolvedPropertyMapPath = propertyMapPath ?? DEFAULT_PROPERTY_MAP_PATH;
-  const resolvedPortfolioPath = portfolioPath ?? DEFAULT_PORTFOLIO_PATH;
   const resolvedLoafLiquidityPath = loafLiquidityPath ?? DEFAULT_LOAF_LIQUIDITY_PATH;
-  const inferredActiveTab = (() => {
-    if (showTradeTab && locationPath === resolvedTradePath) return "trade";
-    if (locationPath === resolvedHomePath) return "home";
-    if (locationPath === resolvedAboutPath) return "about";
-    if (locationPath === resolvedLearnPath) return "learn";
-    if (locationPath === resolvedApiPath) return "api";
-    if (resolvedOfferingsPath && locationPath.startsWith(resolvedOfferingsPath)) return "offerings";
-    if (locationPath === resolvedPropertyMapPath) return "propertyMap";
-    if (locationPath === resolvedPortfolioPath) return "portfolio";
-    return null;
-  })();
-  const resolvedActiveTab = activeTab ?? inferredActiveTab;
-  const tradeActive = showTradeTab && resolvedActiveTab === "trade";
-  const homeActive = resolvedActiveTab === "home";
-  const offeringsActive = resolvedActiveTab === "offerings";
-  const propertyMapActive = resolvedActiveTab === "propertyMap";
-  const aboutActive = resolvedActiveTab === "about";
-  const portfolioActive = resolvedActiveTab === "portfolio";
-  const learnActive = resolvedActiveTab === "learn";
-  const apiActive = resolvedActiveTab === "api";
+  const inferredActiveKey = navItems.find(
+    (item) => item.external ? false : item.match === "prefix" ? locationPath.startsWith(item.path) : locationPath === item.path
+  )?.key ?? null;
+  const resolvedActiveKey = activeKey ?? inferredActiveKey;
+  const primaryItems = navItems.filter((item) => (item.group ?? "primary") === "primary");
+  const moreItems = navItems.filter((item) => item.group === "more");
+  const moreActive = moreItems.some((item) => item.key === resolvedActiveKey);
+  const navLinkClick = (item) => (event) => {
+    if (item.external) {
+      closeMenus();
+      return;
+    }
+    event.preventDefault();
+    handleNavItem(item);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
@@ -5373,111 +5345,44 @@ var Header = ({
               style: { display: "flex", flexDirection: "row", alignItems: "center", height: "56px" },
               className: "desktop-nav",
               children: [
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedHomePath,
-                    className: homeActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedHomePath);
-                    },
-                    children: "Home"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedPortfolioPath,
-                    className: portfolioActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedPortfolioPath);
-                    },
-                    children: "Portfolio"
-                  }
-                ),
-                showTradeTab && /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedTradePath,
-                    className: tradeActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleTradeNavigation();
-                    },
-                    children: "Trade"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: offeringsHref,
-                    className: offeringsActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(offeringsHref);
-                    },
-                    children: "Initial Offerings"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
+                primaryItems.map((item) => /* @__PURE__ */ jsx(
                   NavLink,
                   {
-                    href: resolvedPropertyMapPath,
-                    className: propertyMapActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedPropertyMapPath);
-                    },
-                    children: "Property Map"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedLearnPath,
-                    className: learnActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedLearnPath);
-                    },
-                    children: "Learn"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedAboutPath,
-                    className: aboutActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedAboutPath);
-                    },
-                    children: "About"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: resolvedApiPath,
-                    className: apiActive ? "active" : "",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      handleNavigation(resolvedApiPath);
+                    href: item.path,
+                    ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+                    className: item.key === resolvedActiveKey ? "active" : "",
+                    onClick: navLinkClick(item),
+                    children: item.label
+                  },
+                  item.key
+                )),
+                moreItems.length > 0 && /* @__PURE__ */ jsxs(MoreMenu, { className: "more-menu", children: [
+                  /* @__PURE__ */ jsxs(
+                    MoreTrigger,
+                    {
+                      type: "button",
+                      className: `${isMoreMenuOpen ? "open" : ""} ${moreActive ? "active" : ""}`,
+                      "aria-haspopup": "true",
+                      "aria-expanded": isMoreMenuOpen,
+                      onClick: () => setIsMoreMenuOpen((open) => !open),
+                      children: [
+                        "More",
+                        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      ]
+                    }
+                  ),
+                  isMoreMenuOpen && /* @__PURE__ */ jsx(MoreDropdown, { children: moreItems.map((item) => /* @__PURE__ */ jsx(
+                    MoreItem,
+                    {
+                      href: item.path,
+                      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+                      className: item.key === resolvedActiveKey ? "active" : "",
+                      onClick: navLinkClick(item),
+                      children: item.label
                     },
-                    children: "API"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: "https://docs.loafmarkets.com/en/",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children: "Docs"
-                  }
-                ),
+                    item.key
+                  )) })
+                ] }),
                 /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -5499,29 +5404,7 @@ var Header = ({
           ),
           /* @__PURE__ */ jsxs("div", { className: "mobile-menu-content", children: [
             /* @__PURE__ */ jsx(MobileMenuHeader, { children: /* @__PURE__ */ jsx(MobileMenuClose, { onClick: () => setIsMobileMenuOpen(false), "aria-label": "Close menu", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }) }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
-            /* @__PURE__ */ jsx(
-              MobileNavItem,
-              {
-                onClick: () => handleNavigation(resolvedPortfolioPath),
-                children: "Portfolio"
-              }
-            ),
-            showTradeTab && /* @__PURE__ */ jsx(
-              MobileNavItem,
-              {
-                onClick: () => {
-                  handleTradeNavigation();
-                },
-                children: "Trade"
-              }
-            ),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsHref), children: "Initial Offerings" }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedPropertyMapPath), children: "Property Map" }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedApiPath), children: "API" }),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => window.open("https://docs.loafmarkets.com/en/", "_blank", "noopener,noreferrer"), children: "Docs" }),
+            navItems.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavItem(item), children: item.label }, item.key)),
             /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsx(
               MobileNavItem,
@@ -6035,6 +5918,77 @@ var NavLink = styled10.a`
     }
   }
 `;
+var MoreMenu = styled10.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 56px;
+`;
+var MoreTrigger = styled10.button`
+  margin: 0 12px;
+  padding: 0 4px;
+  height: 56px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #eaecef;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.2px;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &.active {
+    color: #E6C87E;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    transition: transform 0.2s ease;
+  }
+  &.open svg {
+    transform: rotate(180deg);
+  }
+`;
+var MoreDropdown = styled10.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 160px;
+  padding: 6px;
+  background: #1e2026;
+  border: 1px solid #2b3139;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  z-index: 1100;
+`;
+var MoreItem = styled10.a`
+  padding: 10px 12px;
+  border-radius: 6px;
+  color: #eaecef;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.2px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: #2b3139;
+    color: #E6C87E;
+  }
+  &.active {
+    color: #E6C87E;
+  }
+`;
 var Button2 = styled10.button.attrs({ type: "button" })`
   padding: 0.5rem 1rem;
   border-radius: 6px;