Sidebar

({ collapsible }) => (
  <ThemeProvider>
    <SidebarContextProvider collapsible={collapsible}>
      <SidebarContext.Consumer>
        {({ SidebarToggle }) => (
          <Flex css={{ flexDirection: 'row', alignItems: 'start' }}>
            <SidebarToggle />
            <Sidebar>
              <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
              </ul>
            </Sidebar>
          </Flex>
        )}
      </SidebarContext.Consumer>
    </SidebarContextProvider>
  </ThemeProvider>
)