@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.82 kB
JavaScript
import{jsxs as e,jsx as i}from"react/jsx-runtime";import{styled as n,Stack as t,Box as o,useTheme as r,Divider as a}from"@mui/material";import g from"../../WebCore/NavigationButton/NavigationButton.js";import s from"../../WebCore/Nudge/Nudge.js";import"../../WebCore/Typography/Typography.js";import"../../WebCore/Nudge/NudgeButton.js";import l from"../../WebCore/UserMenu/UserMenu.js";import p from"./NavigationHeader.js";const m=n(t,{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"})),u=n(o)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(2)})),d=n(o)(({theme:e})=>({display:"flex",flex:1,gap:e.spacing(1),"& div":{display:"flex",justifyContent:"center",width:"100%"},"& button":{width:"100%"}})),c=({logoLink:n,isMobile:o,nudgeProps:c,primaryMenuItemProps:h,secondaryMenuItemProps:f,sizing:y="lg",tertiaryMenuItemProps:b,toggleMenuOnClick:v=()=>{},userMenuProps:x})=>{const C=r();return e(m,{navigationSizing:y,children:[i(p,{logoLink:n,navigationSizing:y,toggleMenuOnClick:v,isMobile:o}),i(u,{children:e(t,{sx:{gap:4,justifyContent:"space-between",width:"100%"},children:[!!h?.length&&i(t,{sx:{gap:"lg"===y?.5:2,width:"100%"},children:h.map((e,n)=>i(g,{navigationSizing:y,...e},`primary-menu-item-${n}`))}),e(t,{sx:{gap:2},children:[c?.title&&i(s,{navigationSizing:y,...c}),!!f?.length&&f.map((e,n)=>i(g,{navigationSizing:y,...e,label:"Help center"===e.label&&"sm"===y?"Help":e.label},`secondary-menu-item-${n}`)),i(a,{sx:{color:C.custom.palette.stroke.default}}),i(l,{rounded:"sm"===y,...x}),!!b?.length&&i(d,{children:b.map((e,n)=>i(g,{navigationSizing:y,...e},`tertiary-menu-item-${n}`))})]})]})})]})};export{c as default};