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

React component library

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