xtreme-ui
Version:
Collection of reusable components that can be used in web projects
46 lines (45 loc) • 1.32 kB
JavaScript
"use client";
import { jsxs as u, jsx as r } from "react/jsx-runtime";
import { forwardRef as x, useRef as o } from "react";
import g from "clsx";
import { useXData as N } from "../../context/useContext.js";
/* empty css */
const W = x((c, a) => {
var d, l;
const {
className: m,
children: h,
leftSider: t,
showMiniLeftSider: f = !0,
rightSider: n,
showMiniRightSider: S = !1
} = c, { siderMode: s } = N(), e = o(null), i = o(null), p = g(
"xtrSider",
s === "left" && t && "leftOpen",
f && "miniLeftSider",
s === "right" && n && "rightOpen",
S && "miniRightSider",
m
);
return /* @__PURE__ */ u(
"main",
{
ref: a,
className: p,
style: {
"--leftSiderWidth": `${(d = e == null ? void 0 : e.current) == null ? void 0 : d.clientWidth}px`,
"--rightSiderWidth": `${(l = i == null ? void 0 : i.current) == null ? void 0 : l.clientWidth}px`
},
role: "region",
children: [
/* @__PURE__ */ r("div", { ref: e, className: "leftSiderContainer", children: t }),
/* @__PURE__ */ r("div", { ref: i, className: "rightSiderContainer", children: n }),
/* @__PURE__ */ r("div", { className: "content", children: h })
]
}
);
});
W.displayName = "Sider";
export {
W as Sider
};