Function Header

website/app/components/layout/Header.tsx:128–168

({ ...other }: ContainerProps)

};

export const Header = ({ ...other }: ContainerProps) => {
	const [opened, { toggle }] = useDisclosure(false);

	return (
		<>
			<Box component="header" className={classes.header}>
				<Container className={classes.inner} {...other}>
					<Link to="/" prefetch="intent" aria-label="Fontsource home">
						<LogoText height={31} isHeader />
					</Link>
					<Box className={classes.links} visibleFrom="sm">
						<Tooltip.Group openDelay={600} closeDelay={100}>
							<Group gap="md" justify="right">
								<HeaderNavLink label="Fonts" to="/" />
								<HeaderNavLink label="Documentation" to="/docs" />

								<HeaderNavLink label="Tools" to="/tools" />

								<ThemeButton />
								<Icon
									label="GitHub"
									href="https://github.com/fontsource/fontsource"
									icon={<IconGithub />}
								/>
								<Icon label="Discord" href="/discord" icon={<IconDiscord />} />
							</Group>
						</Tooltip.Group>
					</Box>
					<Burger
						opened={opened}
						onClick={toggle}
						hiddenFrom="sm"
						size="sm"
						aria-label={opened ? 'Close navigation' : 'Open navigation'}
					/>
				</Container>
			</Box>
			{opened && <MobileHeader toggle={toggle} />}
		</>
	);
};