@mantine/core/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_keys = require("../../../../core/utils/keys/keys.cjs");
const require_rem = require("../../../../core/utils/units-converters/rem.cjs");
const require_get_breakpoint_value = require("../../../../core/utils/get-breakpoint-value/get-breakpoint-value.cjs");
const require_get_base_size = require("../get-base-size/get-base-size.cjs");
const require_is_primitive_size = require("../is-primitive-size/is-primitive-size.cjs");
const require_is_responsive_size = require("../is-responsive-size/is-responsive-size.cjs");
//#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts
function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode }) {
	const asideWidth = aside?.width;
	const collapsedAsideTransform = "translateX(var(--app-shell-aside-width))";
	const collapsedAsideTransformRtl = "translateX(calc(var(--app-shell-aside-width) * -1))";
	if (aside?.breakpoint && !aside?.collapsed?.mobile) {
		maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};
		if (mode === "fixed") {
			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-width"] = "100%";
			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-offset"] = "0px";
		} else {
			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-width"] = "0px";
			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-offset"] = "0px";
		}
	}
	if (require_is_primitive_size.isPrimitiveSize(asideWidth)) {
		const baseSize = require_rem.rem(require_get_base_size.getBaseSize(asideWidth));
		baseStyles["--app-shell-aside-width"] = baseSize;
		baseStyles["--app-shell-aside-offset"] = baseSize;
	}
	if (require_is_responsive_size.isResponsiveSize(asideWidth)) {
		if (typeof asideWidth.base !== "undefined") {
			baseStyles["--app-shell-aside-width"] = require_rem.rem(asideWidth.base);
			baseStyles["--app-shell-aside-offset"] = require_rem.rem(asideWidth.base);
		}
		require_keys.keys(asideWidth).forEach((key) => {
			if (key !== "base") {
				minMediaStyles[key] = minMediaStyles[key] || {};
				minMediaStyles[key]["--app-shell-aside-width"] = require_rem.rem(asideWidth[key]);
				minMediaStyles[key]["--app-shell-aside-offset"] = require_rem.rem(asideWidth[key]);
			}
		});
	}
	if (aside?.breakpoint && mode === "static") {
		minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};
		minMediaStyles[aside.breakpoint]["--app-shell-aside-position"] = "sticky";
		minMediaStyles[aside.breakpoint]["--app-shell-aside-grid-row"] = "2";
		minMediaStyles[aside.breakpoint]["--app-shell-aside-grid-column"] = "3";
		minMediaStyles[aside.breakpoint]["--app-shell-main-column-end"] = "3";
	}
	if (aside?.collapsed?.desktop) {
		const breakpointValue = aside.breakpoint;
		minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};
		minMediaStyles[breakpointValue]["--app-shell-aside-transform"] = collapsedAsideTransform;
		minMediaStyles[breakpointValue]["--app-shell-aside-transform-rtl"] = collapsedAsideTransformRtl;
		if (mode === "fixed") minMediaStyles[breakpointValue]["--app-shell-aside-offset"] = "0px !important";
		else {
			minMediaStyles[breakpointValue]["--app-shell-aside-width"] = "0px";
			minMediaStyles[breakpointValue]["--app-shell-aside-display"] = "none";
			minMediaStyles[breakpointValue]["--app-shell-main-column-end"] = "-1";
		}
		minMediaStyles[breakpointValue]["--app-shell-aside-scroll-locked-visibility"] = "hidden";
	}
	if (aside?.collapsed?.mobile) {
		const breakpointValue = require_get_breakpoint_value.getBreakpointValue(aside.breakpoint, theme.breakpoints) - .1;
		maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};
		if (mode === "fixed") {
			maxMediaStyles[breakpointValue]["--app-shell-aside-width"] = "100%";
			maxMediaStyles[breakpointValue]["--app-shell-aside-offset"] = "0px";
		} else maxMediaStyles[breakpointValue]["--app-shell-aside-width"] = "0px";
		maxMediaStyles[breakpointValue]["--app-shell-aside-transform"] = collapsedAsideTransform;
		maxMediaStyles[breakpointValue]["--app-shell-aside-transform-rtl"] = collapsedAsideTransformRtl;
		maxMediaStyles[breakpointValue]["--app-shell-aside-scroll-locked-visibility"] = "hidden";
	}
}
//#endregion
exports.assignAsideVariables = assignAsideVariables;

//# sourceMappingURL=assign-aside-variables.cjs.map