How can I add a collapse animation to my Chakra UI- based navbar

user_13132638 0
Viewed 495

Ive been trying to animate my navbar which is composed of Chakra Ui components and I know they have a Collapse component but have not been able to get it to work properly:

                    <IconButton variant={"unstyled"} bgColor={"white"} color={"black"} size={"s"} icon={isOpen ? <Hamburger size={"24"} /> : <Hamburger size={"24"} />} aria-label={"Open Menu"} display={{ md: "none" }} onClick={isOpen ? onClose : onOpen} />


 {isOpen ? (

                    <Box color={"#b8860b"} pb={4} display={{ md: "none" }}>
                        <Stack as={"nav"} spacing={5}>
                            {Links.map(link => (
                                <Link key={link.name} href={link.route}>
                                    <Flex paddingBottom="40px" h="40px" borderBottom="1px" justifyContent={'left'}>
                                        <Flex paddingLeft={"10px"} paddingTop={"3%"}> {link.icon}</Flex>
                                        <Text p={2} color={"black"}  >
                                            {link.name}
                                        </Text>
                                    </Flex>
                                </Link>
                            ))}
                        </Stack>
                    </Box>

                ) : null}

Can someone please help :)

chakra-ui css
1 Answers

What have you tried? It should be as simple as this:

<Collapse isOpen={isOpen}>
    <Box color={"#b8860b"} pb={4}>
        <Stack as={"nav"} spacing={5}>
            {Links.map(link => (
                <Link key={link.name} href={link.route}>
                    <Flex paddingBottom="40px" h="40px" borderBottom="1px" justifyContent={'left'}>
                        <Flex paddingLeft={"10px"} paddingTop={"3%"}> {link.icon}</Flex>
                        <Text p={2} color={"black"}  >
                            {link.name}
                        </Text>
                    </Flex>
                </Link>
            ))}
        </Stack>
    </Box>
</Collapse>
user_35149000
Related