@lanaco/lnc-react-ui/dist/Sidebar.js

React component library

import { jsxs as g, jsx as o } from "react/jsx-runtime";
import { forwardRef as S, useState as x, useEffect as C } from "react";
import { P as s } from "./index-S5Cd7WrG.js";
import { n as l } from "./emotion-styled.browser.esm-CjCaF13H.js";
import y from "./Icon.js";
import { u as $ } from "./utils-DtRLzzTZ.js";
import { u as _ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const v = l.aside`
  direction: ${(e) => e.placement == "right" ? "rtl" : "ltr"};
  position: relative;
  && {
    flex: ${(e) => e.sidebarCollapsed ? "0 0 0" : `0 0 ${e.size}`};
  }
  transition: flex 0.6s ease-in-out;
}
`, w = l.div`
  overflow: hidden;
  width: ${(e) => e.sidebarCollapsed ? "0" : e.size};
  height: 100%;
  transition: width 0.6s ease-in-out
    ${(e) => e.sidebarCollapsed ? "0s" : "0.2s"};
`, z = l.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  background-color: ${(e) => e.theme.palette[e.theme.colorContext.neutral][900]};
  opacity: 0.7;
  border-radius: ${(e) => e.placement == "left" ? "0 5px 5px 0" : "5px 0 0 5px"};
  position: absolute;
  top: 5px;
  right: ${(e) => e.placement == "left" ? "-2rem" : "100%"};
  cursor: pointer;

  &:hover {
    opacity: 1;
  }

  & > span {
    & > .sidebar-icon-lnc {
      transform: ${(e) => e.sidebarCollapsed ? "rotate(180deg)" : "rotate(0)"};
      transition: transform 0.6s ease;
    }
  }
`, m = S((e, f) => {
  const {
    placement: r,
    collapsed: a = void 0,
    hideCollapseButton: h = !1,
    size: n = "15rem",
    children: b,
    className: d,
    __TYPE__: T = "Sidebar",
    ...u
  } = e, c = _(), p = $(), [t, i] = x();
  return C(() => {
    a != null ? i(a) : p == "XS" || p == "S" ? i(!0) : i(!1);
  }, [a]), /* @__PURE__ */ g(
    v,
    {
      className: "lnc-sidebar-container " + (d || ""),
      sidebarCollapsed: t,
      placement: r,
      size: n,
      theme: c,
      ref: f,
      ...u,
      children: [
        !h && /* @__PURE__ */ o(
          z,
          {
            onClick: (N) => i(!t),
            placement: r,
            sidebarCollapsed: t,
            theme: c,
            children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
              y,
              {
                className: "sidebar-icon-lnc",
                icon: r == "right" ? "angle-right" : "angle-left",
                color: "neutral"
              }
            ) })
          }
        ),
        /* @__PURE__ */ o(
          w,
          {
            className: "lnc-sidebar-content",
            sidebarCollapsed: t,
            size: n,
            children: b
          }
        )
      ]
    }
  );
});
m.propTypes = {
  /**
   * Indicates if the sidebar is collapsed.
   */
  collapsed: s.bool,
  /**
   * Hides the collapse button.
   * Useful if you want control the sidebar with your own button via `collapsed` prop.
   */
  hideCollapseButton: s.bool,
  /**
   * Controls the sidebar width.
   */
  size: s.string,
  /**
   * Do not override this property.
   * Should only be used as indicator for type if you are passing custom component.
   */
  __TYPE__: s.string
};
m.displayName = "Sidebar";
export {
  m as default
};