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

Collection of reusable components that can be used in web projects

"use client";
import { jsxs as S, jsx as e } from "react/jsx-runtime";
import p from "clsx";
import { forwardRef as u, useRef as n } from "react";
import { useXData as g } from "../../context/useContext.js";
import './sider.css';/* empty css           */
const x = u((l, o) => {
  const { className: c, children: f, leftSider: i, showMiniLeftSider: a = !0, rightSider: r, showMiniRightSider: h = !1 } = l, { siderMode: t } = g(), d = n(null), s = n(null), m = p(
    "xtrSider",
    t === "left" && i && "leftOpen",
    a && "miniLeftSider",
    t === "right" && r && "rightOpen",
    h && "miniRightSider",
    c
  );
  return /* @__PURE__ */ S(
    "aside",
    {
      ref: o,
      className: m,
      style: {
        "--leftSiderWidth": `${d?.current?.clientWidth}px`,
        "--rightSiderWidth": `${s?.current?.clientWidth}px`
      },
      children: [
        /* @__PURE__ */ e("div", { ref: d, className: "leftSiderContainer", children: i }),
        /* @__PURE__ */ e("div", { ref: s, className: "rightSiderContainer", children: r }),
        /* @__PURE__ */ e("div", { className: "content", children: f })
      ]
    }
  );
});
x.displayName = "Sider";
export {
  x as Sider
};