<AppShell
	labels={labels}
	collapsed={readAppShellCookie(request.headers.get("Cookie"))}
	workspace={
		<>
			<AppShell.Identity avatar={<Logo />} name="Acme Ops" detail="Pro plan"
				commandfor="workspace-menu" command="toggle-popover" />
			<Menu id="workspace-menu" aria-label="Workspace">
				<Menu.Item href="/workspaces">Switch workspace</Menu.Item>
				<Menu.Item href="/settings">Workspace settings</Menu.Item>
			</Menu>
		</>
	}
	nav={
		<>
			<AppShell.Group>
				<AppShell.Item href="/overview" icon={<LayoutDashboardIcon />} label="Overview" />
				<AppShell.Item href="/monitors" icon={<ActivityIcon />} label="Monitors"
					count={2} countTone="danger" countLabel="2 monitors down" current />
				<AppShell.Item href="/incidents" icon={<SirenIcon />} label="Incidents" unread />
				<AppShell.Item href="/status-pages" icon={<GlobeIcon />} label="Status pages" />
			</AppShell.Group>
			<AppShell.Group title="Settings">
				<AppShell.Item href="/settings/team" icon={<UsersIcon />} label="Team" />
			</AppShell.Group>
		</>
	}
	footer={
		<>
			<AppShell.Identity avatar={<Avatar />} name="Ada Lovelace" detail="ada@acme.dev"
				commandfor="account-menu" command="toggle-popover" />
			<Menu id="account-menu" placement="top-start" aria-label="Account">
				<Menu.Item href="/settings/profile">Account settings</Menu.Item>
				<Menu.Separator />
				<Menu.Item danger>Sign out</Menu.Item>
			</Menu>
		</>
	}
	topbar={<Breadcrumbs>…</Breadcrumbs>}
>
	<PageHeader title="Monitors" primaryAction={<Button>New monitor</Button>} />
</AppShell>