@veracity/vui/dist/header/headerMobileToggle.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 { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { Icon } from "../icon/icon.js";
import { IconButton } from "../button/buttons.js";
import { useHeaderContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/header/headerMobileToggle.tsx
/** Button that toggles display of the mobile content. */
const HeaderMobileToggle = vui((props, ref) => {
	const { className, ...rest } = props;
	const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext());
	const iconName = isMobileOpen ? "falTimes" : "falBars";
	return /* @__PURE__ */ jsx(IconButton, {
		className: cs("vui-headerMobileToggle", className),
		icon: /* @__PURE__ */ jsx(Icon, { name: iconName }),
		ml: 1,
		onClick: () => setIsMobileOpen((s) => !s),
		p: "3px",
		ref: mergeRefs(ref, mobileToggleRef),
		title: "More options",
		...styles.mobileToggle,
		...rest
	});
});
HeaderMobileToggle.displayName = "HeaderMobileToggle";

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