@veracity/vui/dist/header/headerMobileContent.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { mergeRefs } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import zIndices_default from "../theme/foundations/zIndices.js";
import { useStyleConfig } from "../core/theme.js";
import { useUp } from "../core/media.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { useHeaderContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/header/headerMobileContent.tsx
/** Displays part of the Header content when on a mobile screen. */
const HeaderMobileContent = vui((props, ref) => {
	const { className, ...rest } = props;
	const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext());
	const isLargerThanTablet = useUp("lg");
	return isMobileOpen ? /* @__PURE__ */ jsx(Box, {
		bg: "white",
		className: cs("vui-headerMobileContent", className),
		column: true,
		overflowX: "hidden",
		overflowY: "auto",
		position: "absolute",
		ref: mergeRefs(ref, mobileContentRef),
		right: isLargerThanTablet ? "-40px" : "-16px",
		boxShadow: "sm",
		top: "calc(100% + 1px)",
		w: isLargerThanTablet ? 320 : 280,
		zIndex: zIndices_default.header,
		...styles.mobileContent,
		...rest
	}) : null;
});
HeaderMobileContent.displayName = "HeaderMobileContent";

//#endregion
export { HeaderMobileContent, HeaderMobileContent as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=headerMobileContent.js.map