I'm currently utilizing Chakra UI.
When I hover over the Sidebar, it expands to the right side.
However, the text gets distorted in the process.
Is there a way to widen the Sidebar without distorting the letters?
I would greatly appreciate any guidance on this issue.
code
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "44px"}
zIndex={10}
transition={"all .2s ease"}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"}>
search Page
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image src={""} width="24px" />
<Text display={state ? "inline-block" : "none"}>
My Page Setting
</Text>
</HStack>
</Box>
</VStack>
</Flex>