UNPKG

xtreme-ui

Version:

Collection of reusable components that can be used in web projects

github.com/itzzritik/XtremeUI

itzzritik/XtremeUI

4 lines (3 loc) • 2.88 kB
1
2
3
4
import{r as i,u as h,j as e,E as x}from"./iframe-5Rr_RUeM.js";import{M,R,a as y,u as N,b as j,N as w,L}from"./Navigation-CnK0L4Zt.js";import{S as v}from"./SiderModal-BaTfnYq0.js";import{c as _}from"./clsx-B-dksMZM.js";import"./preload-helper-PPVm8Dsz.js";import"./Button-DvCW9M4Z.js";import"./ProgressBar-0sEm0xuH.js";const n=i.forwardRef((r,t)=>{const{className:a,children:s,leftSider:d,showMiniLeftSider:p=!0,rightSider:l,showMiniRightSider:S=!1}=r,{siderMode:c}=h(),f=i.useRef(null),u=i.useRef(null),g=_("xtrSider",c==="left"&&d&&"leftOpen",p&&"miniLeftSider",c==="right"&&l&&"rightOpen",S&&"miniRightSider",a);return e.jsxs("aside",{ref:t,className:g,style:{"--leftSiderWidth":`${f?.current?.clientWidth}px`,"--rightSiderWidth":`${u?.current?.clientWidth}px`},children:[e.jsx("div",{ref:f,className:"leftSiderContainer",children:d}),e.jsx("div",{ref:u,className:"rightSiderContainer",children:l}),e.jsx("div",{className:"content",children:s})]})});n.displayName="Sider";try{n.displayName="Sider",n.__docgenInfo={description:"",displayName:"Sider",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},leftSider:{defaultValue:null,description:"",name:"leftSider",required:!1,type:{name:"ReactNode"}},showMiniLeftSider:{defaultValue:null,description:"",name:"showMiniLeftSider",required:!1,type:{name:"boolean"}},rightSider:{defaultValue:null,description:"",name:"rightSider",required:!1,type:{name:"ReactNode"}},showMiniRightSider:{defaultValue:null,description:"",name:"showMiniRightSider",required:!1,type:{name:"boolean"}}}}}catch{}const m=[{name:"Dashboard",href:"/dashboard",icon:"e323"},{name:"Teams",href:"/teams",icon:"e533"},{name:"Favorite",href:"/favorite",icon:"f762"},{name:"Wallet",href:"/wallet",icon:"f555"},{name:"Settings",href:"/settings",icon:"f013"}],b=r=>{const{pathname:t}=N(),a=j(),{setSiderMode:s}=h();return i.useEffect(()=>{t==="/"&&a(m[0]?.href)},[a,t]),i.useEffect(()=>{s(r.siderMode)},[s,r.siderMode]),e.jsx(n,{...r,leftSider:e.jsx(w,{as:L,hrefPropName:"to",pathname:t,routes:m,children:"🎲 XtremeUI"}),rightSider:e.jsx(v,{title:"Demo Sider Modal",icon:"f890",primaryButtonProps:{label:"Save"},secondaryButtonProps:{label:"Cancel"}})})},E=r=>e.jsx(M,{children:e.jsx(R,{children:e.jsx(y,{path:"/*",element:e.jsx(b,{...r})})})}),B={title:"Layouts/Sider",component:E,tags:[],argTypes:{className:{control:!1},leftSider:{control:!1},rightSider:{control:!1},siderMode:{options:Object.values(x),control:{type:"radio"}},showMiniLeftSider:{defaultValue:{summary:!0}},showMiniRightSider:{defaultValue:{summary:!1}}},args:{showMiniLeftSider:!0,showMiniRightSider:!1,siderMode:"left"}},o={args:{}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{ args: {} }`,...o.parameters?.docs?.source}}};const I=["Default"];export{o as Default,I as __namedExportsOrder,B as default};