fix focus on navbar elements

ui/snippets/navigation/NavLink.tsx

@@ -44,13 +44,16 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px, isNewUi }: Props)
         gutter={ 20 }
         color={ isActive ? colors.text.active : colors.text.hover }
       >
-        <HStack spacing={ 3 }>
+        <HStack spacing={ 3 } overflow="hidden">
           <Icon as={ icon } boxSize="30px"/>
           <Text
             variant="inherit"
             fontSize="sm"
             lineHeight="20px"
-            display={{ base: 'block', lg: isExpanded ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+            opacity={{ base: '1', lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
+            transitionProperty="opacity"
+            transitionDuration="normal"
+            transitionTimingFunction="ease"
           >
             { text }
           </Text>

ui/snippets/navigation/NavigationDesktop.tsx

@@ -77,13 +77,13 @@ const NavigationDesktop = () => {
         <NetworkMenu isCollapsed={ isCollapsed }/>
       </Box>
       <Box as="nav" mt={ 8 }>
-        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+        <VStack as="ul" spacing="2" alignItems="flex-start">
           { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
         </VStack>
       </Box>
       { hasAccount && (
         <Box as="nav" mt={ 12 }>
-          <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+          <VStack as="ul" spacing="2" alignItems="flex-start">
             { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
           </VStack>
         </Box>

ui/snippets/navigation/NavigationMobile.tsx

@@ -16,13 +16,13 @@ const NavigationMobile = () => {
   return (
     <>
       <Box as="nav" mt={ 6 }>
-        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+        <VStack as="ul" spacing="2" alignItems="flex-start">
           { mainNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
         </VStack>
       </Box>
       { isAuth && (
         <Box as="nav" mt={ 6 }>
-          <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+          <VStack as="ul" spacing="2" alignItems="flex-start">
             { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
           </VStack>
         </Box>