Merge pull request #577 from blockscout/menu

menu

icons/globe-b.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" fill-rule="evenodd" d="M14.688 4.75c-5.482 0-9.938 4.456-9.938 9.938 0 5.481 4.456 9.937 9.938 9.937 5.481 0 9.937-4.456 9.937-9.938 0-5.481-4.456-9.937-9.938-9.937Zm3.499 5.781a14.655 14.655 0 0 0-1.813-3.855 8.151 8.151 0 0 1 5.359 3.855h-3.546Zm-7.219 0H7.644a8.16 8.16 0 0 1 5.094-3.787 14.079 14.079 0 0 0-1.77 3.787Zm5.39 0h-3.56a12.705 12.705 0 0 1 1.78-3.382 12.64 12.64 0 0 1 1.78 3.382ZM6.5 14.687c0-.831.131-1.65.369-2.406h3.692a14.62 14.62 0 0 0-.013 4.737l-3.695.027a7.864 7.864 0 0 1-.353-2.358Zm5.83 2.327c-.3-1.57-.3-3.176 0-4.733h4.496c.3 1.555.3 3.147.028 4.705l-4.524.028Zm6.295-.047a14.364 14.364 0 0 0-.029-4.686h3.91c.238.756.369 1.575.369 2.406 0 .783-.116 1.542-.313 2.252l-3.937.028Zm-2.246 5.73a14.004 14.004 0 0 0 1.843-3.98l3.596-.026a8.21 8.21 0 0 1-5.439 4.005Zm-1.802-.472a12.283 12.283 0 0 1-1.8-3.462l3.613-.026a12.946 12.946 0 0 1-1.813 3.488Zm-1.84.406a8.208 8.208 0 0 1-5.128-3.837l3.328-.027c.394 1.347 1 2.657 1.8 3.864Z" clip-rule="evenodd"/>
+</svg>

icons/top-accounts.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#top-accounts_svg__a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.585 2.973a3.412 3.412 0 0 0-3.412 3.412v17.23a3.412 3.412 0 0 0 3.412 3.412h17.23a.95.95 0 0 0 0-1.9H7.585a1.512 1.512 0 1 1 0-3.023h17.23a.95.95 0 0 0 .934-1.126.954.954 0 0 0 .016-.176V4.662c0-.933-.756-1.689-1.688-1.689H7.585ZM6.073 6.385c0-.835.677-1.512 1.512-1.512h16.28v15.33H7.585a3.4 3.4 0 0 0-1.512.353V6.385Zm8.897 1.4a3.013 3.013 0 1 0 0 6.026 3.013 3.013 0 0 0 0-6.026Zm-1.024 3.013a1.024 1.024 0 1 1 2.048 0 1.024 1.024 0 0 1-2.048 0Zm1.025 3.097c-2.316 0-4.3 1.303-5.319 3.243a.446.446 0 0 0 .395.654h1.281a.446.446 0 0 0 .366-.19 3.972 3.972 0 0 1 3.277-1.718c1.33 0 2.52.685 3.268 1.723a.446.446 0 0 0 .362.185h1.292a.446.446 0 0 0 .393-.659c-1.01-1.866-2.983-3.238-5.315-3.238Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="top-accounts_svg__a">
+      <path fill="#fff" transform="translate(3 3)" d="M0 0h24v24H0z"/>
+    </clipPath>
+  </defs>
+</svg>

icons/verified.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#verified_svg__a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4 15a8.4 8.4 0 1 1-16.8 0 8.4 8.4 0 0 1 16.8 0Zm1.6 0c0 5.523-4.477 10-10 10S5 20.523 5 15 9.477 5 15 5s10 4.477 10 10Zm-5.895-3.706a.916.916 0 1 1 1.295 1.295l-6.022 6.022a1.05 1.05 0 0 1-1.485 0l-3.2-3.199a.915.915 0 0 1 1.296-1.295l2.257 2.258a.55.55 0 0 0 .778 0l5.081-5.081Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="verified_svg__a">
+      <path fill="#fff" transform="translate(5 5)" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
+</svg>

lib/hooks/useNavItems.tsx

@@ -7,14 +7,16 @@ import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
 import appsIcon from 'icons/apps.svg';
 import blocksIcon from 'icons/block.svg';
+import globeIcon from 'icons/globe-b.svg';
 // import gearIcon from 'icons/gear.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
 import statsIcon from 'icons/stats.svg';
 import tokensIcon from 'icons/token.svg';
+import topAccountsIcon from 'icons/top-accounts.svg';
 import transactionsIcon from 'icons/transactions.svg';
-import walletIcon from 'icons/wallet.svg';
+// import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import notEmpty from 'lib/notEmpty';
 
@@ -26,12 +28,20 @@ export interface NavItem {
   isNewUi?: boolean;
 }
 
+export interface NavGroupItem extends Omit<NavItem, 'nextRoute'> {
+  subItems: Array<NavItem>;
+}
+
 interface ReturnType {
-  mainNavItems: Array<NavItem>;
+  mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
   profileItem: NavItem;
 }
 
+export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem {
+  return 'subItems' in item;
+}
+
 export default function useNavItems(): ReturnType {
   const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0;
 
@@ -39,11 +49,23 @@ export default function useNavItems(): ReturnType {
   const pathname = router.pathname;
 
   return React.useMemo(() => {
-    const mainNavItems = [
+    const blockchainNavItems: Array<NavItem> = [
+      { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true },
       { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true },
       { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true },
+      // eslint-disable-next-line max-len
+      // { text: 'Verified contracts', nextRoute: { pathname: '/verified_contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified_contracts', isNewUi: false },
+    ];
+
+    const mainNavItems = [
+      {
+        text: 'Blockchain',
+        icon: globeIcon,
+        isActive: blockchainNavItems.some(item => item.isActive),
+        isNewUi: true,
+        subItems: blockchainNavItems,
+      },
       { text: 'Tokens', nextRoute: { pathname: '/tokens' as const }, icon: tokensIcon, isActive: pathname.startsWith('/token'), isNewUi: true },
-      { text: 'Accounts', nextRoute: { pathname: '/accounts' as const }, icon: walletIcon, isActive: pathname === '/accounts', isNewUi: true },
       isMarketplaceFilled ?
         { text: 'Apps', nextRoute: { pathname: '/apps' as const }, icon: appsIcon, isActive: pathname.startsWith('/app'), isNewUi: true } : null,
       { text: 'Charts & stats', nextRoute: { pathname: '/stats' as const }, icon: statsIcon, isActive: pathname === '/stats', isNewUi: true },

playwright/index.css

+*,
+*::after,
+*::before {
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-delay: -0.0001s !important;
+    animation-duration: 0s !important;
+    animation-play-state: paused !important;
+}
\ No newline at end of file

playwright/index.ts

 import './fonts.css';
+import './index.css';
 import { beforeMount } from '@playwright/experimental-ct-react/hooks';
 import _defaultsDeep from 'lodash/defaultsDeep';
 import MockDate from 'mockdate';

ui/snippets/header/Burger.pw.tsx

@@ -8,11 +8,20 @@ import Burger from './Burger';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
+const hooksConfig = {
+  router: {
+    route: '/blocks',
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    pathname: '/blocks',
+  },
+};
+
 test('base view', async({ mount, page }) => {
   const component = await mount(
     <TestApp>
       <Burger/>
     </TestApp>,
+    { hooksConfig },
   );
 
   await component.locator('svg[aria-label="Menu button"]').click();
@@ -30,6 +39,7 @@ test.describe('dark mode', () => {
       <TestApp>
         <Burger/>
       </TestApp>,
+      { hooksConfig },
     );
 
     await component.locator('svg[aria-label="Menu button"]').click();
@@ -53,9 +63,23 @@ test.describe('auth', () => {
       <TestApp>
         <Burger/>
       </TestApp>,
+      { hooksConfig },
+    );
+
+    await component.locator('svg[aria-label="Menu button"]').click();
+    await expect(page).toHaveScreenshot();
+  });
+
+  extendedTest('submenu', async({ mount, page }) => {
+    const component = await mount(
+      <TestApp>
+        <Burger/>
+      </TestApp>,
+      { hooksConfig },
     );
 
     await component.locator('svg[aria-label="Menu button"]').click();
+    await page.locator('div[aria-label="Blockchain link group"]').click();
     await expect(page).toHaveScreenshot();
   });
 });

ui/snippets/navigation/NavLink.tsx

@@ -4,9 +4,9 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { NavItem } from 'lib/hooks/useNavItems';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import useColors from './useColors';
+import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = NavItem & {
   isCollapsed?: boolean;
@@ -15,23 +15,19 @@ type Props = NavItem & {
 
 const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }: Props) => {
   const colors = useColors();
-
   const isExpanded = isCollapsed === false;
 
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
+
   const content = (
     <Link
       { ...(isNewUi ? {} : { href: route(nextRoute) }) }
-      w={{ base: '100%', lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
-      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
-      py={ 2.5 }
+      { ...styleProps.itemProps }
+      w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
       display="flex"
-      color={ isActive ? colors.text.active : colors.text.default }
-      bgColor={ isActive ? colors.bg.active : colors.bg.default }
-      _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-      borderRadius="base"
-      whiteSpace="nowrap"
+      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
       aria-label={ `${ text } link` }
-      { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      whiteSpace="nowrap"
     >
       <Tooltip
         label={ text }
@@ -44,15 +40,7 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }:
       >
         <HStack spacing={ 3 } overflow="hidden">
           <Icon as={ icon } boxSize="30px"/>
-          <Text
-            variant="inherit"
-            fontSize="sm"
-            lineHeight="20px"
-            opacity={{ base: '1', lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
-            transitionProperty="opacity"
-            transitionDuration="normal"
-            transitionTimingFunction="ease"
-          >
+          <Text { ...styleProps.textProps }>
             { text }
           </Text>
         </HStack>

ui/snippets/navigation/NavLinkGroupDesktop.tsx

+import {
+  Icon,
+  Text,
+  HStack,
+  Flex,
+  Box,
+  Link,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import chevronIcon from 'icons/arrows/east-mini.svg';
+import type { NavGroupItem } from 'lib/hooks/useNavItems';
+
+import NavLink from './NavLink';
+import useNavLinkStyleProps from './useNavLinkStyleProps';
+
+type Props = NavGroupItem & {
+  isCollapsed?: boolean;
+}
+
+const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Props) => {
+  const isExpanded = isCollapsed === false;
+
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
+
+  return (
+    <Box as="li" listStyleType="none" w="100%">
+      <Popover
+        trigger="hover"
+        placement="right-start"
+        isLazy
+      >
+        <PopoverTrigger>
+          <Link
+            { ...styleProps.itemProps }
+            w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
+            pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
+            pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
+            aria-label={ `${ text } link group` }
+            display="grid"
+            gridColumnGap={ 3 }
+            gridTemplateColumns="auto, 30px"
+          >
+            <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
+              <HStack spacing={ 3 } overflow="hidden">
+                <Icon as={ icon } boxSize="30px"/>
+                <Text
+                  { ...styleProps.textProps }
+                >
+                  { text }
+                </Text>
+              </HStack>
+              <Icon
+                as={ chevronIcon }
+                transform="rotate(180deg)"
+                boxSize={ 6 }
+                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
+                transitionProperty="opacity"
+                transitionDuration="normal"
+                transitionTimingFunction="ease"
+              />
+            </Flex>
+          </Link>
+        </PopoverTrigger>
+        <PopoverContent width="auto" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
+          <PopoverBody p={ 4 }>
+            <Text variant="secondary" fontSize="sm" mb={ 2 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+              { text }
+            </Text>
+            <VStack spacing={ 1 } alignItems="start">
+              { subItems.map(item => <NavLink key={ item.text } { ...item } isCollapsed={ false }/>) }
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default NavLinkGroupDesktop;

ui/snippets/navigation/NavLinkGroupMobile.tsx

+import {
+  Icon,
+  Text,
+  HStack,
+  Flex,
+  Box,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import chevronIcon from 'icons/arrows/east-mini.svg';
+import type { NavGroupItem } from 'lib/hooks/useNavItems';
+
+import useNavLinkStyleProps from './useNavLinkStyleProps';
+
+type Props = NavGroupItem & {
+  isCollapsed?: boolean;
+  onClick: () => void;
+}
+
+const NavLinkGroup = ({ text, icon, isActive, onClick }: Props) => {
+  const styleProps = useNavLinkStyleProps({ isActive });
+
+  return (
+    <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
+      <Box
+        { ...styleProps.itemProps }
+        w="100%"
+        px={ 3 }
+        aria-label={ `${ text } link group` }
+      >
+        <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
+          <HStack spacing={ 3 } overflow="hidden">
+            <Icon as={ icon } boxSize="30px"/>
+            <Text
+              { ...styleProps.textProps }
+            >
+              { text }
+            </Text>
+          </HStack>
+          <Icon as={ chevronIcon } transform="rotate(180deg)" boxSize={ 6 }/>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default NavLinkGroup;

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -70,6 +70,21 @@ test('with tooltips +@desktop-xl -@default', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
+test('with submenu +@desktop-xl +@dark-mode', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.locator('a[aria-label="Blockchain link group"]').hover();
+
+  await expect(component).toHaveScreenshot();
+});
+
 test.describe('cookie set to false', () => {
   const extendedTest = test.extend({
     context: ({ context }, use) => {

ui/snippets/navigation/NavigationDesktop.tsx

@@ -5,13 +5,14 @@ import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
-import useNavItems from 'lib/hooks/useNavItems';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
 
 import NavFooter from './NavFooter';
 import NavLink from './NavLink';
+import NavLinkGroupDesktop from './NavLinkGroupDesktop';
 
 const NavigationDesktop = () => {
   const appProps = useAppContext();
@@ -66,7 +67,8 @@ const NavigationDesktop = () => {
         alignItems="center"
         flexDirection="row"
         w="100%"
-        px={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
+        pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
+        pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
         h={ 10 }
         transitionProperty="padding"
         transitionDuration="normal"
@@ -77,7 +79,13 @@ const NavigationDesktop = () => {
       </Box>
       <Box as="nav" mt={ 8 }>
         <VStack as="ul" spacing="1" alignItems="flex-start">
-          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
+          { mainNavItems.map((item) => {
+            if (isGroupItem(item)) {
+              return <NavLinkGroupDesktop key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
+            } else {
+              return <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
+            }
+          }) }
         </VStack>
       </Box>
       { hasAccount && (

ui/snippets/navigation/NavigationMobile.tsx

-import { Box, VStack } from '@chakra-ui/react';
-import React from 'react';
+import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/react';
+import { animate, motion, useMotionValue } from 'framer-motion';
+import React, { useCallback } from 'react';
 
 import appConfig from 'configs/app/config';
+import chevronIcon from 'icons/arrows/east-mini.svg';
 import * as cookies from 'lib/cookies';
-import useNavItems from 'lib/hooks/useNavItems';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import NavFooter from 'ui/snippets/navigation/NavFooter';
 import NavLink from 'ui/snippets/navigation/NavLink';
 
+import NavLinkGroupMobile from './NavLinkGroupMobile';
+
 const NavigationMobile = () => {
   const { mainNavItems, accountNavItems } = useNavItems();
 
+  const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
+
+  const mainX = useMotionValue(0);
+  const subX = useMotionValue(250);
+
+  const onGroupItemOpen = (index: number) => () => {
+    setOpenedGroupIndex(index);
+    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(subX, 0, { ease: 'easeInOut' });
+  };
+
+  const onGroupItemClose = useCallback(() => {
+    animate(mainX, 0, { ease: 'easeInOut' });
+    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+  }, [ mainX, subX ]);
+
   const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
   const hasAccount = appConfig.isAccountSupported && isAuth;
 
+  const iconColor = useColorModeValue('blue.600', 'blue.300');
+
+  const openedItem = mainNavItems[openedGroupIndex];
+
   return (
     <>
-      <Box as="nav" mt={ 6 }>
-        <VStack as="ul" spacing="1" alignItems="flex-start">
-          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
-        </VStack>
-      </Box>
-      { isAuth && (
-        <Box as="nav" mt={ 6 }>
-          <VStack as="ul" spacing="1" alignItems="flex-start">
-            { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+      <Box position="relative">
+        <Box
+          as={ motion.nav }
+          mt={ 6 }
+          style={{ x: mainX }}
+        >
+          <VStack
+            w="100%"
+            as="ul"
+            spacing="1"
+            alignItems="flex-start"
+          >
+            { mainNavItems.map((item, index) => {
+              if (isGroupItem(item)) {
+                return <NavLinkGroupMobile key={ item.text } { ...item } onClick={ onGroupItemOpen(index) }/>;
+              } else {
+                return <NavLink key={ item.text } { ...item }/>;
+              }
+            }) }
           </VStack>
         </Box>
-      ) }
+        { isAuth && (
+          <Box
+            as={ motion.nav }
+            mt={ 6 }
+            style={{ x: mainX }}
+          >
+            <VStack as="ul" spacing="1" alignItems="flex-start">
+              { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+            </VStack>
+          </Box>
+        ) }
+        { openedGroupIndex >= 0 && (
+          <Box
+            as={ motion.nav }
+            w="100%"
+            mt={ 6 }
+            position="absolute"
+            top={ 0 }
+            style={{ x: subX }}
+            key="sub"
+          >
+            <VStack
+              w="100%"
+              as="ul"
+              spacing="1"
+              alignItems="flex-start"
+            >
+              <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose }>
+                <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
+                <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
+              </Flex>
+              { isGroupItem(openedItem) && openedItem.subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
+            </VStack>
+          </Box>
+        ) }
+      </Box>
       <NavFooter hasAccount={ hasAccount }/>
     </>
   );

ui/snippets/navigation/useNavLinkStyleProps.tsx

+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+
+import useColors from './useColors';
+
+type Props = {
+  isExpanded?: boolean;
+  isCollapsed?: boolean;
+  isActive?: boolean;
+  px?: string | number;
+}
+
+export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
+  const colors = useColors();
+
+  return {
+    itemProps: {
+      py: 2.5,
+      display: 'flex',
+      color: isActive ? colors.text.active : colors.text.default,
+      bgColor: isActive ? colors.bg.active : colors.bg.default,
+      _hover: { color: isActive ? colors.text.active : colors.text.hover },
+      borderRadius: 'base',
+      ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }),
+    },
+    textProps: {
+      variant: 'inherit',
+      fontSize: 'sm',
+      lineHeight: '20px',
+      opacity: { base: '1', lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' },
+      transitionProperty: 'opacity',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'ease',
+    },
+  };
+}