Function MobileHeader

website/app/components/layout/Header.tsx:94–126

({ toggle }: MobileHeaderProps)

}

const MobileHeader = ({ toggle }: MobileHeaderProps) => {
	const isDocs = useLocation().pathname.startsWith('/docs');

	return (
		<ScrollArea.Autosize mah="95vh" className={classes['mobile-links']}>
			<Stack>
				<Stack px={24}>
					<HeaderNavLink label="Fonts" to="/" toggle={toggle} />
					<HeaderNavLink label="Documentation" to="/docs" toggle={toggle} />
					<HeaderNavLink label="Tools" to="/tools" toggle={toggle} />
					<Divider />
					<ThemeButtonMobile />
					<MobileExternalIcon
						label="GitHub"
						href="https://github.com/fontsource/fontsource"
						icon={<IconGithub />}
					/>
					<MobileExternalIcon
						label="Discord"
						href="/discord"
						icon={<IconDiscord />}
					/>
				</Stack>
				{isDocs && (
					<>
						<Divider mx={24} />
						<LeftSidebar toggle={toggle} />
					</>
				)}
			</Stack>
		</ScrollArea.Autosize>
	);
};

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