Sidebar

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

// Resize your screen to see responsive-ness.
<Flex
  css={{
    width: "100%",
    gap: "$md",
    flexDirection: "column",
  }}
>
  <Container css={{ bg: "$bg300" }}>
    <Sidebar
      css={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        px: "$md",
        height: "$xl",
      }}
      brand={<Text>Sidebar</Text>}
      mobileTitle="Sidebar example"
      content={/* Regular content as JSX */}
      mobileContent={/* Mobile content as JSX */} 
    />
  </Container>
</Flex>