Navbar

import { Navbar } from "@styple/design-system";

// Simplified code, see DemoNavbars for full source. 
// Resize your screen to see responsive-ness.
<Flex
  css={{
    width: "100%",
    gap: "$md",
    flexDirection: "column",
  }}
>
  <Container css={{ bg: "$bg300" }}>
    <Navbar css={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        p: "$md",
        height: "$xl",
      }}
      brand={<Text>Basic navbar</Text>}
      content={/* Regular content as JSX */}
      mobileContent={/* Mobile content as JSX */} 
    />
  </Container>
  <Container css={{ bg: "$bg300" }}>
    <Navbar
      css={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        p: "$md",
        height: "$xl",
      }}
      brand={<Text>Fullpage navbar</Text>}
      content={/* Regular content as JSX */}
      mobileContent={/* Mobile content as JSX. Uses a CollapsibleTrigger for the closing anim. */} 
    />
  </Container>
</Flex>