smooth collapsing of left bar

theme/utils/getDefaultTransitionProps.ts

-export default function getDefaultTransitionProps() {
+export default function getDefaultTransitionProps(props?: {transitionProperty: string}) {
   return {
-    transitionProperty: 'background-color, color, border-color',
+    transitionProperty: `background-color, color, border-color${ props?.transitionProperty ? ', ' + props.transitionProperty : '' }`,
     transitionDuration: 'normal',
     transitionTimingFunction: 'ease',
   };

ui/navigation/NavFooter.tsx

@@ -25,13 +25,13 @@ const NavFooter = ({ isCollapsed }: Props) => {
       spacing={ 8 }
       borderTop="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      width={ isCollapsed ? '20px' : '180px' }
       paddingTop={ 8 }
       marginTop={ 20 }
-      // w="100%"
-      alignItems="baseline"
+      alignItems="flex-start"
       color="gray.500"
       fontSize="xs"
-      { ...getDefaultTransitionProps() }
+      { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
     >
       <Stack direction={ isCollapsed ? 'column' : 'row' }>
         { SOCIAL_LINKS.map(sl => {

ui/navigation/NavLink.tsx

@@ -3,6 +3,8 @@ import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+
 import useColors from './useColors';
 
 interface Props {
@@ -30,6 +32,8 @@ const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
         _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
         borderRadius="base"
+        whiteSpace="nowrap"
+        { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>

ui/navigation/Navigation.tsx

 import { ChevronLeftIcon } from '@chakra-ui/icons';
-import { Flex, HStack, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import abiIcon from 'icons/ABI.svg';
@@ -54,17 +54,24 @@ const Navigation = () => {
       px={ isCollapsed ? 4 : 6 }
       py={ 12 }
       width={ isCollapsed ? '92px' : '229px' }
-      { ...getDefaultTransitionProps() }
+      { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
     >
-      <HStack
+      <Box
         as="header"
-        justifyContent={ isCollapsed ? 'center' : 'space-between' }
+        display="flex"
+        justifyContent="center"
         alignItems="center"
+        flexDirection="row"
         w="100%"
         px={ 3 }
         h={ 10 }
       >
-        { !isCollapsed && (
+        <Box
+          width={ isCollapsed ? '0' : '113px' }
+          display="inline-flex"
+          overflow="hidden"
+          { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
+        >
           <Icon
             as={ logoIcon }
             width="113px"
@@ -72,22 +79,23 @@ const Navigation = () => {
             color={ logoColor }
             { ...getDefaultTransitionProps() }
           />
-        ) }
+        </Box>
         <Icon
           as={ networksIcon }
           width="16px"
           height="16px"
           color={ useColorModeValue('gray.500', 'white') }
-          { ...getDefaultTransitionProps() }
+          marginLeft={ isCollapsed ? '0px' : '27px' }
+          { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
         />
-      </HStack>
+      </Box>
       <Box as="nav" mt={ 14 }>
-        <VStack as="ul" spacing="2">
+        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
           { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
         </VStack>
       </Box>
       <Box as="nav" mt={ 12 }>
-        <VStack as="ul" spacing="2">
+        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
           { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
         </VStack>
       </Box>
@@ -101,6 +109,7 @@ const Navigation = () => {
         borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderRadius="base"
         transform={ isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }
+        { ...getDefaultTransitionProps({ transitionProperty: 'transform' }) }
         transformOrigin="center"
         position="absolute"
         top="104px"