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

React component library

import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { forwardRef as b, useState as g, useEffect as S } from "react";
import { s as o } from "./emotion-styled.browser.esm-DfbrHHed.js";
import x from "./Icon.js";
import { a as C } from "./utils-BUdHa0nB.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const v = o.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;
`, y = o.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"};
`, w = o.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;
    }
  }
`, z = b((e, m) => {
  const {
    placement: r,
    collapsed: a = void 0,
    hideCollapseButton: p = !1,
    size: n = "15rem",
    children: f,
    className: l,
    ...h
  } = e, d = $(), c = C(), [t, i] = g();
  return S(() => {
    a != null ? i(a) : c == "XS" || c == "S" ? i(!0) : i(!1);
  }, [a]), /* @__PURE__ */ u(
    v,
    {
      className: "lnc-sidebar-container " + (l || ""),
      sidebarCollapsed: t,
      placement: r,
      size: n,
      theme: d,
      ref: m,
      ...h,
      children: [
        !p && /* @__PURE__ */ s(
          w,
          {
            onClick: () => i(!t),
            placement: r,
            sidebarCollapsed: t,
            theme: d,
            children: /* @__PURE__ */ s("span", { children: /* @__PURE__ */ s(
              x,
              {
                className: "sidebar-icon-lnc",
                icon: r == "right" ? "angle-right" : "angle-left",
                color: "neutral"
              }
            ) })
          }
        ),
        /* @__PURE__ */ s(
          y,
          {
            className: "lnc-sidebar-content",
            sidebarCollapsed: t,
            size: n,
            children: f
          }
        )
      ]
    }
  );
});
z.displayName = "Sidebar";
export {
  z as default
};