xtreme-ui/dist/components/layout/Navigation/Navigation.js

Collection of reusable components that can be used in web projects

"use client";
import { jsxs as l, jsx as n } from "react/jsx-runtime";
import { forwardRef as j, useState as y, useEffect as C } from "react";
import m from "clsx";
import { Icon as L } from "../../base/Icon/Icon.js";
/* empty css                */
const T = j((f, d) => {
  const { className: h, children: p, hrefPropName: N = "href", routes: g = [], pathname: i = "", as: v = "a" } = f, [s, c] = y("/"), x = m(
    "xtrNavigation",
    h
  );
  return C(() => {
    s === i && c("/");
  }, [s, i]), /* @__PURE__ */ l(
    "nav",
    {
      ref: d,
      className: x,
      role: "navigation",
      children: [
        /* @__PURE__ */ n("div", { className: "brand", children: p }),
        /* @__PURE__ */ n("div", { className: "routeList", children: g.map((a, b) => /* @__PURE__ */ l(
          v,
          {
            className: m(
              "route",
              (a == null ? void 0 : a.href) === s && "loading",
              (a == null ? void 0 : a.href) === i && "active"
            ),
            [N]: a == null ? void 0 : a.href,
            onClick: () => {
              setTimeout(() => {
                s !== i && c(a == null ? void 0 : a.href);
              }, 150);
            },
            children: [
              (a == null ? void 0 : a.icon) && /* @__PURE__ */ n(
                L,
                {
                  code: a == null ? void 0 : a.icon,
                  type: (a == null ? void 0 : a.href) === i ? "duotone" : "light"
                }
              ),
              /* @__PURE__ */ n("span", { className: "label", children: a == null ? void 0 : a.name })
            ]
          },
          `route-${a == null ? void 0 : a.href}-${b}`
        )) })
      ]
    }
  );
});
T.displayName = "Navigation";
export {
  T as Navigation
};