@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.87 kB
JavaScript
;var e=require("react/jsx-runtime"),i=require("@mui/material"),n=require("../../WebCore/NavigationButton/NavigationButton.js"),t=require("../../WebCore/Nudge/Nudge.js");require("../../WebCore/Typography/Typography.js"),require("../../WebCore/Nudge/NudgeButton.js");var r=require("../../WebCore/UserMenu/UserMenu.js"),s=require("./NavigationHeader.js");const a=i.styled(i.Stack,{shouldForwardProp:e=>!["navigationSizing"].includes(e)})(({navigationSizing:e,theme:i})=>({backgroundColor:i.custom.palette.surface.sunken,transition:i.custom.easing.input,width:"lg"===e?232:72,height:"100%",position:"fixed"})),o=i.styled(i.Box)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(2)})),g=i.styled(i.Box)(({theme:e})=>({display:"flex",flex:1,gap:e.spacing(1),"& div":{display:"flex",justifyContent:"center",width:"100%"},"& button":{width:"100%"}}));module.exports=({logoLink:l,isMobile:u,nudgeProps:d,primaryMenuItemProps:p,secondaryMenuItemProps:c,sizing:m="lg",tertiaryMenuItemProps:x,toggleMenuOnClick:h=()=>{},userMenuProps:j})=>{const y=i.useTheme();return e.jsxs(a,{navigationSizing:m,children:[e.jsx(s,{logoLink:l,navigationSizing:m,toggleMenuOnClick:h,isMobile:u}),e.jsx(o,{children:e.jsxs(i.Stack,{sx:{gap:4,justifyContent:"space-between",width:"100%"},children:[!!p?.length&&e.jsx(i.Stack,{sx:{gap:"lg"===m?.5:2,width:"100%"},children:p.map((i,t)=>e.jsx(n,{navigationSizing:m,...i},`primary-menu-item-${t}`))}),e.jsxs(i.Stack,{sx:{gap:2},children:[d?.title&&e.jsx(t,{navigationSizing:m,...d}),!!c?.length&&c.map((i,t)=>e.jsx(n,{navigationSizing:m,...i,label:"Help center"===i.label&&"sm"===m?"Help":i.label},`secondary-menu-item-${t}`)),e.jsx(i.Divider,{sx:{color:y.custom.palette.stroke.default}}),e.jsx(r,{rounded:"sm"===m,...j}),!!x?.length&&e.jsx(g,{children:x.map((i,t)=>e.jsx(n,{navigationSizing:m,...i},`tertiary-menu-item-${t}`))})]})]})})]})};