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

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

import { isJsx } from "../utils/assertion.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import { RenderOnScreen, useDown } from "../core/media.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { List } from "../list/list.js";
import { Button } from "../button/button.js";
import { useHeaderContext } from "./context.js";
import { HeaderAccountUserInfo } from "./headerAccountUserInfo.js";
import { HeaderServicesMessage } from "./headerServicesMessage.js";
import { Header } from "./header.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/loggedInHeader.tsx
/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
const LoggedInHeader = vui((props, ref) => {
	const { account, altUserInfo, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, isCleanLayout = false, logo, mainLinks, services, showAltUserInfo = false, showMainLinks = isApplication ? false : true, showServices = true, notifications, url, ...rest } = props;
	if (isApplication && !applicationName) console.error("Header: isApplication is true but applicationName is not set.");
	const userInfo = altUserInfo ? altUserInfo : isJsx(account) ? {} : account?.userInfo || {};
	const isSmallScreen = useDown("md");
	const isLessThanMD = useDown("sm");
	const servicesLinks = isJsx(services) ? [] : services?.links || [];
	const styles = useStyleConfig("Header", useHeaderContext());
	const localTextColor = rest?.variant === "dark" ? "white" : "darkBlue.main";
	return /* @__PURE__ */ jsx(Header, {
		className: cs("vui-loggedInHeader", isApplication ? "vui-loggedInAppHeader" : void 0, className),
		mb: isApplication && isSmallScreen ? "41px" : "inherited",
		ref,
		...rest,
		children: /* @__PURE__ */ jsxs(Header.Content, { children: [
			(!isApplication || !isLessThanMD) && /* @__PURE__ */ jsxs(Fragment, { children: [" ", isJsx(logo) ? logo : /* @__PURE__ */ jsx(Header.Logo, { ...logo })] }),
			isApplication && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RenderOnScreen, {
				minWidth: "sm",
				children: /* @__PURE__ */ jsx(Header.Divider, { mr: 2 })
			}), /* @__PURE__ */ jsx(Header.ApplicationName, {
				color: localTextColor,
				title: applicationName,
				url: applicationUrl
			})] }),
			!isApplication && /* @__PURE__ */ jsx(RenderOnScreen, {
				minWidth: "lg",
				children
			}),
			/* @__PURE__ */ jsx(Box, { ml: "auto" }),
			isCleanLayout ? /* @__PURE__ */ jsx(Fragment, { children: !!url && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, {
				as: "a",
				className: cs("vui-headerSignOut"),
				href: url,
				size: "lg",
				variant: "secondary",
				children: "Sign out"
			}) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
				isApplication && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(RenderOnScreen, {
					minWidth: "lg",
					children: [
						showMainLinks && mainLinks !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Header.MainLinks, { links: mainLinks }), /* @__PURE__ */ jsx(Header.Divider, { mx: 1 })] }),
						!showMainLinks && mainLinks && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.MobileToggle, { ml: 0 }), /* @__PURE__ */ jsx(Header.MobileContent, { children: /* @__PURE__ */ jsxs(Fragment, { children: [isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Box, {
							column: true,
							w: 1,
							children: /* @__PURE__ */ jsx(List, {
								py: 1,
								children: mainLinks?.map(({ icon, url, ...rest }, index) => /* @__PURE__ */ jsx(List.Item, {
									startIcon: icon,
									linkProps: { href: url },
									...rest
								}, index))
							})
						}), !showServices && servicesLinks && /* @__PURE__ */ jsx(Box, {
							column: true,
							w: 1,
							children: /* @__PURE__ */ jsx(List, {
								className: "vui-headerHiddenServicesLargeScreen",
								heading: "My Services",
								maxH: 295,
								right: 0,
								w: 320,
								...styles.services.list,
								borderTop: 1,
								borderTopColor: "sandstone.main",
								pt: 1,
								children: servicesLinks.length > 0 ? servicesLinks?.map(({ url, ...rest }, index) => /* @__PURE__ */ jsx(List.Item, {
									linkProps: { href: url },
									...rest
								}, index)) : /* @__PURE__ */ jsx(HeaderServicesMessage, {})
							})
						})] }) })] }),
						showServices && services && /* @__PURE__ */ jsx(Fragment, { children: isJsx(services) ? services : /* @__PURE__ */ jsx(Header.Services, {
							isApplication,
							...services
						}) })
					]
				}), /* @__PURE__ */ jsx(Header.Support, { ...supportLinks })] }),
				!isApplication && /* @__PURE__ */ jsxs(RenderOnScreen, {
					minWidth: "lg",
					children: [
						isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Header.MainLinks, { links: mainLinks }),
						mainLinks !== void 0 && /* @__PURE__ */ jsx(Header.Divider, { mx: 1 }),
						isJsx(services) ? services : /* @__PURE__ */ jsx(Header.Services, { ...services })
					]
				}),
				isJsx(notifications) ? notifications : /* @__PURE__ */ jsx(Header.Notifications, { ...notifications }),
				showAltUserInfo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Divider, { ml: 2 }), /* @__PURE__ */ jsx(HeaderAccountUserInfo, {
					className: "vui-altUserInfo",
					color: localTextColor,
					isApplication: true,
					...userInfo
				})] }),
				isJsx(account) ? account : /* @__PURE__ */ jsx(Header.Account, { ...account }),
				/* @__PURE__ */ jsxs(RenderOnScreen, {
					maxWidth: "lg",
					children: [
						isApplication && /* @__PURE__ */ jsx(Header.Divider, { ml: 1 }),
						!isApplication && (account !== void 0 || notifications !== void 0) && /* @__PURE__ */ jsx(Header.Divider, { ml: 1 }),
						/* @__PURE__ */ jsx(Header.MobileToggle, {}),
						/* @__PURE__ */ jsxs(Header.MobileContent, { children: [
							!isApplication && children,
							isJsx(mainLinks) ? mainLinks : /* @__PURE__ */ jsx(Header.MainLinks, { links: mainLinks }),
							isJsx(services) ? services : /* @__PURE__ */ jsx(Header.Services, {
								...services,
								showTopBorder: mainLinks ? true : false
							})
						] })
					]
				})
			] })
		] })
	});
});
LoggedInHeader.displayName = "LoggedInHeader";

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