Layout.jsx

<Box
  p="0"
  w="100%"
  h="100%"
  bg="white"
  d="flex"
  flexDirection="column"
  flex="0 0 auto"
>
  <Box w="100%" h="50px" p="20px" bg="#333943" d="flex" flex="0 0 auto" />
  <Box w="100%" h="100%" bg="white" d="flex" flex="1 1 auto">
    <Box
      w="55px"
      h="100%"
      bg="white"
      boxShadow="inset -1px 0px 0px rgba(27, 31, 35, 0.1)"
      d="flex"
      flexDirection="column"
      flex="0 0 auto"
      zIndex="2"
    >
      <Box
        w="55px"
        h="55px"
        bg="#0094FF"
        boxShadow="inset -1px 0px 0px rgba(27, 31, 35, 0.1)"
      ></Box>
      <Box
        w="55px"
        h="55px"
        bg="white"
        borderBottom="1px solid rgba(27, 31, 35, 0.1)"
        boxShadow="inset -1px 0px 0px rgba(27, 31, 35, 0.1)"
      ></Box>
    </Box>
    <Box
      w="426px"
      h="100%"
      bg="#F4F5F7"
      boxShadow="0px 3px 12px rgba(20, 23, 27, 0.15)"
      d="flex"
      flexDirection="column"
      flex="0 0 auto"
      zIndex="1"
    >
      <Box
        bg="white"
        height="55px"
        p="16px 20px"
        fontSize="16px"
        letterSpacing="-0.45px"
        lineHeight="1.5"
      >
        Folders
      </Box>
    </Box>
    <Box
      w="100%"
      h="100%"
      bg="white"
      d="flex"
      flexDirection="column"
      zIndex="0"
      overflow="auto"
    >
      <Box
        w="100%"
        height="55px"
        p="10px 20px"
        fontSize="16px"
        letterSpacing="-0.45px"
        lineHeight="1.5"
        bg="#E8EBEF"
        d="flex"
        flexDirection="column"
        zIndex="0"
        overflow="auto"
      >
        <Box
          w="100%"
          h="auto"
          d="flex"
          p="0"
          flex="0 0 auto"
          justifyContent="space-between"
          alignItems="center"
          borderBottom="1px solid #E8EBEF"
        >
          <Box>Breadcrumbs</Box>
          <Box>
            <Button size="small">more</Button>
          </Box>
        </Box>
      </Box>
      <Box
        w="100%"
        h="auto"
        d="flex"
        p="16px 20px"
        flex="0 0 auto"
        justifyContent="space-between"
        borderBottom="1px solid #E8EBEF"
      >
        <Box>
          <Button content="Actions" size="small" />
        </Box>
        <Box>
          <Button content="Upload" size="small" />
          <Button content="New Folder" size="small" />
        </Box>
      </Box>
    </Box>
  </Box>
  <Box
    w="100%"
    h="50px"
    p="20px"
    bg="white"
    d="flex"
    flex="0 0 auto"
    boxShadow="0px 3px 12px rgba(20, 23, 27, 0.15);"
    zIndex="2"
  />
</Box>