@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.56 kB
Source Map (JSON)
{"version":3,"file":"assign-navbar-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n navbar: AppShellProps['navbar'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n navbar,\n theme,\n mode,\n}: AssignNavbarVariablesInput) {\n const navbarWidth = navbar?.width;\n const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {\n maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n if (mode === 'static') {\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n }\n }\n\n if (isPrimitiveSize(navbarWidth)) {\n const baseSize = rem(getBaseSize(navbarWidth));\n baseStyles['--app-shell-navbar-width'] = baseSize;\n baseStyles['--app-shell-navbar-offset'] = baseSize;\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n }\n }\n\n if (isResponsiveSize(navbarWidth)) {\n if (typeof navbarWidth.base !== 'undefined') {\n baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n }\n }\n\n keys(navbarWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n if (mode === 'static') {\n minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n }\n }\n });\n }\n\n if (navbar?.breakpoint && mode === 'static') {\n minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n }\n\n if (navbar?.collapsed?.desktop) {\n const breakpointValue = navbar!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n } else {\n // In static mode, hide the element completely so grid column collapses\n minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n }\n }\n\n if (navbar?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n if (mode === 'static') {\n maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,cAAc,CAAC,QAAQ,WAAW,QAAQ;EACpD,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,YAAY,+BAA+B;EAClE,eAAe,QAAQ,YAAY,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,YAAY,mCAAmC;CAE1E;CAEA,IAAIA,0BAAAA,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAIC,2BAAAA,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8BF,YAAAA,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+BA,YAAAA,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmCA,YAAAA,IAAI,YAAY,IAAI;EAEtE;EAEA,aAAA,KAAK,WAAW,EAAE,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,8BAA8BA,YAAAA,IAAI,YAAa,IAAI;IACvE,eAAe,KAAK,+BAA+BA,YAAAA,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,KAAK,mCAAmCA,YAAAA,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,cAAc,SAAS,UAAU;EAC3C,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,YAAY,iCAAiC;EACnE,eAAe,OAAO,YAAY,iCAAiC;EACnE,eAAe,OAAO,YAAY,oCAAoC;EACtE,eAAe,OAAO,YAAY,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,kCAAkC;EAClE,eAAe,iBAAiB,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,iBAAiB,+BAA+B;OAC1D;GAEL,eAAe,iBAAiB,8BAA8B;GAC9D,eAAe,iBAAiB,gCAAgC;GAChE,eAAe,iBAAiB,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkBG,6BAAAA,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,8BAA8B;EAC9D,eAAe,iBAAiB,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,iBAAiB,mCAAmC;EAErE,eAAe,iBAAiB,kCAAkC;EAClE,eAAe,iBAAiB,sCAC9B;CACJ;AACF"}