@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.87 kB
JavaScript
import{jsxs as e,jsx as i}from"react/jsx-runtime";import{styled as t,Stack as n,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=t(n,{shouldForwardProp:e=>!["navigationSizing"].includes(e)})(({navigationSizing:e,theme:i})=>({backgroundColor:i.custom.palette.surface.sunken,transition:i.custom.easing.input,borderRight:`1px solid ${i.custom.palette.stroke.light}`,width:"lg"===e?232:72,height:"100%",position:"fixed"})),u=t(o)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(2)})),d=t(o)(({theme:e})=>({display:"flex",flex:1,gap:e.spacing(1),"& div":{display:"flex",justifyContent:"center",width:"100%"},"& button":{width:"100%"}})),c=({logoLink:t,isMobile:o,nudgeProps:c,primaryMenuItemProps:h,secondaryMenuItemProps:f,sizing:y="lg",tertiaryMenuItemProps:b,toggleMenuOnClick:x=()=>{},userMenuProps:v})=>{const C=r();return e(m,{navigationSizing:y,children:[i(p,{logoLink:t,navigationSizing:y,toggleMenuOnClick:x,isMobile:o}),i(u,{children:e(n,{sx:{gap:4,justifyContent:"space-between",width:"100%"},children:[!!h?.length&&i(n,{sx:{gap:"lg"===y?.5:2,width:"100%"},children:h.map((e,t)=>i(g,{navigationSizing:y,...e},`primary-menu-item-${t}`))}),e(n,{sx:{gap:2},children:[c?.title&&i(s,{navigationSizing:y,...c}),!!f?.length&&f.map((e,t)=>i(g,{navigationSizing:y,...e,label:"Help center"===e.label&&"sm"===y?"Help":e.label},`secondary-menu-item-${t}`)),i(a,{sx:{color:C.custom.palette.stroke.default}}),i(l,{rounded:"sm"===y,...v}),!!b?.length&&i(d,{children:b.map((e,t)=>i(g,{navigationSizing:y,...e},`tertiary-menu-item-${t}`))})]})]})})]})};export{c as default};