nav bar collapsing

ui/navigation/NavFooter.tsx

-import { VStack, Text, HStack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
+import { VStack, Text, Stack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import ghIcon from 'icons/social/git.svg';
@@ -14,7 +14,11 @@ const SOCIAL_LINKS = [
   { link: '#stats', icon: statsIcon },
 ];
 
-const NavFooter = () => {
+interface Props {
+  isCollapsed: boolean;
+}
+
+const NavFooter = ({ isCollapsed }: Props) => {
   return (
     <VStack
       as="footer"
@@ -23,25 +27,29 @@ const NavFooter = () => {
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       paddingTop={ 8 }
       marginTop={ 20 }
-      w="100%"
+      // w="100%"
       alignItems="baseline"
       color="gray.500"
       fontSize="xs"
       { ...getDefaultTransitionProps() }
     >
-      <HStack>
+      <Stack direction={ isCollapsed ? 'column' : 'row' }>
         { SOCIAL_LINKS.map(sl => {
           return (
-            <Link href={ sl.link } key={ sl.link } variant="secondary">
+            <Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 }>
               <Icon as={ sl.icon } boxSize={ 5 }/>
             </Link>
           );
         }) }
-      </HStack>
-      <Text variant="secondary">
-        Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
-      </Text>
-      <Text variant="secondary">Version: <Link>v4.2.1-beta</Link></Text>
+      </Stack>
+      { !isCollapsed && (
+        <>
+          <Text variant="secondary">
+            Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
+          </Text>
+          <Text variant="secondary">Version: <Link>v4.2.1-beta</Link></Text>
+        </>
+      ) }
     </VStack>
   );
 };

ui/navigation/NavLink.tsx

@@ -6,12 +6,13 @@ import React from 'react';
 import useColors from './useColors';
 
 interface Props {
+  isCollapsed: boolean;
   pathname: string;
   text: string;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
-const NavLink = ({ text, pathname, icon }: Props) => {
+const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
   const router = useRouter();
   const isActive = router.pathname === pathname;
 
@@ -22,8 +23,8 @@ const NavLink = ({ text, pathname, icon }: Props) => {
       <Link
         as="li"
         listStyleType="none"
-        w="180px"
-        px={ 3 }
+        w={ isCollapsed ? '60px' : '180px' }
+        px={ isCollapsed ? '15px' : 3 }
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
@@ -32,7 +33,7 @@ const NavLink = ({ text, pathname, icon }: Props) => {
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>
-          <Text variant="inherit">{ text }</Text>
+          { !isCollapsed && <Text variant="inherit">{ text }</Text> }
         </HStack>
       </Link>
     </NextLink>

ui/navigation/Navigation.tsx

@@ -36,26 +36,43 @@ const accountNavItems = [
 ];
 
 const Navigation = () => {
+  const [ isCollapsed, setCollapsedState ] = React.useState(false);
+
+  const handleTogglerClick = React.useCallback(() => {
+    setCollapsedState((flag) => !flag);
+  }, []);
+
+  const logoColor = useColorModeValue('blue.600', 'white');
+
   return (
     <Flex
       position="relative"
       flexDirection="column"
-      alignItems="flex-start"
+      alignItems="center"
       borderRight="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      px={ 6 }
+      px={ isCollapsed ? 4 : 6 }
       py={ 12 }
-      width="300px"
+      width={ isCollapsed ? '92px' : '229px' }
       { ...getDefaultTransitionProps() }
     >
-      <HStack as="header" justifyContent="space-between" w="100%" px={ 3 } h={ 10 } alignItems="center">
-        <Icon
-          as={ logoIcon }
-          width="113px"
-          height="20px"
-          color={ useColorModeValue('blue.600', 'white') }
-          { ...getDefaultTransitionProps() }
-        />
+      <HStack
+        as="header"
+        justifyContent={ isCollapsed ? 'center' : 'space-between' }
+        alignItems="center"
+        w="100%"
+        px={ 3 }
+        h={ 10 }
+      >
+        { !isCollapsed && (
+          <Icon
+            as={ logoIcon }
+            width="113px"
+            height="20px"
+            color={ logoColor }
+            { ...getDefaultTransitionProps() }
+          />
+        ) }
         <Icon
           as={ networksIcon }
           width="16px"
@@ -66,15 +83,15 @@ const Navigation = () => {
       </HStack>
       <Box as="nav" mt={ 14 }>
         <VStack as="ul" spacing="2">
-          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
         </VStack>
       </Box>
       <Box as="nav" mt={ 12 }>
         <VStack as="ul" spacing="2">
-          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
         </VStack>
       </Box>
-      <NavFooter/>
+      <NavFooter isCollapsed={ isCollapsed }/>
       <ChevronLeftIcon
         width={ 6 }
         height={ 6 }
@@ -83,10 +100,13 @@ const Navigation = () => {
         color={ useColorModeValue('blackAlpha.400', 'whiteAlpha.400') }
         borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderRadius="base"
+        transform={ isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }
+        transformOrigin="center"
         position="absolute"
         top="104px"
         right={ -3 }
         cursor="pointer"
+        onClick={ handleTogglerClick }
       />
     </Flex>
   );