HUD

Live Editor

function HUDExample() {
	const [curPage, setCurPage] = useState("page1");
	const menu = [
		{
			label: "Contacts",
			id: "1",
			Icon: Contacts,
			location: "top",
		},
		{
			label: "Profile",
			id: "2",
			Icon: Person,
			location: "bottom",
		},
		{
			label: "Logout",
			id: "3",
			Icon: ExitToApp,
			location: "bottom",
		},
	];
	return (
		<div style={{ position: "relative", width: "100%", height: "500px" }} id="root">
			<HUD
				menu={menu}
				displayName="John Doe"
				currentPage={curPage}
				onLogoClick={() => setCurPage("page1")}
				onMenuChange={setCurPage}
			>
				<Page title={`Page ${curPage}`}>
					<p>
						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, doloremque
						consequuntur? Recusandae cumque ex eum molestias ad aperiam minus, asperiores quidem,
						ratione inventore nihil hic, autem beatae quam qui veniam.
					</p>
				</Page>
			</HUD>
		</div>
	);
}

Result

Loading...