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

React component library

"use strict";const t=require("react/jsx-runtime"),o=require("react"),a=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),x=require("./Icon.cjs"),S=require("./utils-BK6B_Y9X.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=a.styled.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;
`,C=a.styled.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"};
`,$=a.styled.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;
    }
  }
`,u=o.forwardRef((e,p)=>{const{placement:r,collapsed:n=void 0,hideCollapseButton:h=!1,size:l="15rem",children:b,className:c,...f}=e,d=g.useTheme(),m=S.useScreenSize(),[s,i]=o.useState();return o.useEffect(()=>{n!=null?i(n):m=="XS"||m=="S"?i(!0):i(!1)},[n]),t.jsxs(y,{className:"lnc-sidebar-container "+(c||""),sidebarCollapsed:s,placement:r,size:l,theme:d,ref:p,...f,children:[!h&&t.jsx($,{onClick:()=>i(!s),placement:r,sidebarCollapsed:s,theme:d,children:t.jsx("span",{children:t.jsx(x,{className:"sidebar-icon-lnc",icon:r=="right"?"angle-right":"angle-left",color:"neutral"})})}),t.jsx(C,{className:"lnc-sidebar-content",sidebarCollapsed:s,size:l,children:b})]})});u.displayName="Sidebar";module.exports=u;