pages/slidetest.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React from 'react'
import { Box, Button, Flex, Slide, useDisclosure } from '@chakra-ui/react'
import { Collapse } from '../components/Sidebar/Collapse'

export default function Test() {
  const { isOpen, onClose, onOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>togg</Button>
      <Flex flexDirection="row" justifyContent="space-between" w="100vw">
        <Box color="blue.500" width="100%">
          a
        </Box>
        <Collapse
          animateOpacity={false}
          dimension="width"
          in={isOpen}
          //style={{ position: 'relative' }}
          unmountOnExit
          endingSize={500}
          startingSize={0}
        >
          <Box height="100vh" bgColor="red.500">
            Hey
          </Box>
        </Collapse>
      </Flex>
    </>
  )
}