xtreme-ui
Version:
Collection of reusable components that can be used in web projects
36 lines (35 loc) • 1.36 kB
JavaScript
"use client";
import { jsxs as o, jsx as s } from "react/jsx-runtime";
import c from "clsx";
import { Icon as v } from "gliff";
import { forwardRef as g, useState as x, useEffect as b } from "react";
import './navigation.css';/* empty css */
const j = g((r, t) => {
const { className: l, children: m, hrefPropName: f = "href", routes: d = [], pathname: e = "", as: h = "a" } = r, [i, n] = x("/"), N = c("xtrNavigation", l);
return b(() => {
i === e && n("/");
}, [i, e]), /* @__PURE__ */ o("nav", { ref: t, className: N, children: [
/* @__PURE__ */ s("div", { className: "brand", children: m }),
/* @__PURE__ */ s("div", { className: "routeList", children: d.map((a, p) => /* @__PURE__ */ o(
h,
{
className: c("route", a?.href === i && "loading", a?.href === e && "active"),
[f]: a?.href,
onClick: () => {
setTimeout(() => {
i !== e && n(a?.href);
}, 150);
},
children: [
a?.icon && /* @__PURE__ */ s(v, { className: "xIcon", code: a?.icon, set: a?.href === e ? "duotone" : void 0, type: a?.href === e ? void 0 : "light" }),
/* @__PURE__ */ s("span", { className: "label", children: a?.name })
]
},
`route-${a?.href}-${p}`
)) })
] });
});
j.displayName = "Navigation";
export {
j as Navigation
};