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

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

import { useCallbackRef } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { List } from "../list/list.js";
import { useHeaderContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/header/headerLinkItem.tsx
/** Individual link item of the Header. */
const HeaderLinkItem = vui((props, ref) => {
	const { className, icon, isActive, linkProps, onClick: onClickProp, url, ...rest } = props;
	const { isMobile, setIsMobileOpen } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext()).linkItem;
	const onClick = useCallbackRef((e) => {
		setIsMobileOpen(false);
		onClickProp?.(e);
	});
	const linkPropsExtended = {
		...linkProps,
		display: "inline-flex",
		alignItems: "center"
	};
	const linkActiveProps = isActive ? isMobile ? {
		bg: "skyBlue.95",
		borderColor: "seaBlue.main",
		borderLeftWidth: 3,
		hoverBg: "skyBlue.90",
		pl: "13px",
		activeBorderBottomWidth: 0,
		pt: "0px"
	} : {
		borderBottomWidth: 4,
		pt: "4px"
	} : {};
	const linkMobileProps = isMobile ? {
		color: "darkBlue.main",
		hoverColor: "darkBlue.main",
		hoverBg: "skyBlue.90",
		activeColor: "darkBlue.main",
		activeBg: "transparent",
		activeBorderColor: "seaBlue.main",
		activeBorderLeftWidth: 0,
		pt: "0",
		activePl: isActive ? "13px" : "16px"
	} : {
		activeBorderBottomWidth: 0,
		pt: "0px",
		activePt: isActive ? "1px" : "0"
	};
	const itemScreenProps = isMobile ? {} : {
		display: "inline-flex",
		fontWeight: "medium",
		h: "100%"
	};
	return /* @__PURE__ */ jsx(List.Item, {
		className: cs("vui-headerLinkItem", className, isActive && "is-active"),
		startIcon: icon,
		linkProps: {
			href: url,
			ringInset: true,
			transition: "all 0.1s, border-width 0s, padding 0s",
			w: {
				xs: "100%",
				lg: "max-content"
			},
			px: {
				xs: "16px",
				lg: "10px",
				xl: "16px"
			},
			...styles.link,
			...linkPropsExtended,
			...linkMobileProps,
			...linkActiveProps
		},
		onClick,
		ref,
		...itemScreenProps,
		...styles.container,
		...rest
	});
});
HeaderLinkItem.displayName = "HeaderLinkItem";

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