export default function Example() {
  return (
    <AppBar
      shadow
      position="sticky"
      css={{
        top: 0,
        left: 0,
      }}
    >
      <Container
        maxWidth="fluid"
        css={{
          height: 60,
          background: "$secondary",
          color: "$onSecondary",
          flexDirection: "row",
          textAlign: "center",
          justifyContent: "space-between",
          px: "$100",
        }}
      >
        <Icon size="$200" label="Open Section Navigation Menu">
          <Menu />
        </Icon>
        <Box
          css={{
            fill: "$onSecondary",
          }}
        >
          <WashingtonPost width={188} />
          <Box
            css={{
              fontFamily: "$body",
              fontSize: "$075",
              fontStyle: "italic",
            }}
          >
            Democracy Dies in Darkness (This is an example using the new system)
          </Box>
        </Box>
        <Icon size="$200" label="Open Account Menu">
          <Profile />
        </Icon>
      </Container>
    </AppBar>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape