PrometheusAppShell

Application layout shell with the intentionally-always-dark header.

Description

Application layout shell with the intentionally-always-dark header. Wraps Mantine AppShell with Prometheus-specific header styling, navigation, and responsive behavior. The header uses rgb(65, 73, 81) background and never adapts to theme.

Design

Layout Constants

Where this component exists in the Prometheus UI

View in Prometheus UI → /

PrometheusAppShell — the full application layout with header and navigation

Implementation

From App.tsx in the Prometheus codebase:

<AppShell header={{ height: 56 }}
  navbar={{ width: 300, breakpoint: "sm",
            collapsed: { desktop: true, mobile: !opened } }}
  padding="md">
  <AppShell.Header bg="rgb(65, 73, 81)" c="#fff">
    <Group h="100%" px="md" wrap="nowrap">
      <Group style={{ flex: 1 }} justify="space-between" wrap="nowrap">
        <Group gap={40} wrap="nowrap">
          <Link to="/" style={{ textDecoration: "none", color: "white" }}>
            <Group gap={10} wrap="nowrap">
              <img src={PrometheusLogo} height={30} />
              <Text fz={20}>Prometheus</Text>
            </Group>
          </Link>
          <Group gap={12} visibleFrom="sm" wrap="nowrap">{navLinks}</Group>
        </Group>
        <Group visibleFrom="xs" wrap="nowrap" gap="xs">{navActionIcons}</Group>
      </Group>
      <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" color="gray.2" />
    </Group>
  </AppShell.Header>
  <AppShell.Main>
    <ErrorBoundary key={location.pathname}>
      <Suspense fallback={null}>
        <Routes>...</Routes>
      </Suspense>
    </ErrorBoundary>
  </AppShell.Main>
</AppShell>

Layout Specs

Accessibility

• Uses Mantine AppShell for proper landmark structure
• Responsive: drawer navigation on mobile, inline on desktop
• Burger button appears on mobile with proper aria-label
• Navigation uses semantic <nav> element