feat(on-this-page): add height and with animation

src/components/on-this-page/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Box, Flex, Text } from '@vtex/brand-ui'
+import AnimateHeight from 'react-animate-height'
 
 import MenuIcon from 'components/icons/menu-icon'
 import CloseIcon from 'components/icons/close-icon'
@@ -12,20 +13,20 @@ const OnThisPage = () => {
 
   return (
     <Flex sx={styles.container}>
-      {open && (
+      <AnimateHeight duration={300} height={open ? 'auto' : 0}>
         <Box sx={styles.contentContainer}>
           <Text sx={styles.onThisPageTitle}>On this page</Text>
           <Box>
             <TableOfContents />
           </Box>
         </Box>
-      )}
+      </AnimateHeight>
 
       <Flex
         sx={styles.buttonContainer}
         onClick={() => setOpen((open) => !open)}
       >
-        {!open && <Text sx={styles.title}>On this page</Text>}
+        <Text sx={styles.title(open)}>On this page</Text>
         <Box sx={styles.iconContainer}>
           {!open ? <MenuIcon size={32} /> : <CloseIcon size={32} />}
         </Box>

src/components/on-this-page/styles.ts

@@ -2,6 +2,7 @@ import type { SxStyleProp } from '@vtex/brand-ui'
 
 const container: SxStyleProp = {
   right: '20px',
+  bottom: '20px',
   position: 'fixed',
   alignItems: 'flex-end',
   display: ['flex', 'flex', 'flex', 'flex', 'none'],
@@ -44,13 +45,17 @@ const iconContainer: SxStyleProp = {
   borderLeft: '1px solid #CCCED8',
 }
 
-const title: SxStyleProp = {
-  padding: '8px',
+const title: (open: boolean) => SxStyleProp = (open) => ({
+  color: 'black',
   fontSize: '12px',
   fontWeight: '400',
   lineHeight: '16px',
-  color: 'black',
-}
+  padding: open ? '0px' : '8px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  width: open ? '0px' : '84px',
+  transition: 'width 0.3s ease-in-out',
+})
 
 export default {
   container,