fix2

lib/hooks/useNavItems.tsx

@@ -28,11 +28,7 @@ export interface NavItem {
   isNewUi?: boolean;
 }
 
-export interface NavGroupItem {
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  isActive?: boolean;
-  isNewUi?: boolean;
+export interface NavGroupItem extends Omit<NavItem, 'nextRoute'> {
   subItems: Array<NavItem>;
 }
 

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) }) }
+      { ...styleProps.itemProps }
       w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
-      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
-      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"
-      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

@@ -4,6 +4,7 @@ import {
   HStack,
   Flex,
   Box,
+  Link,
   Popover,
   PopoverTrigger,
   PopoverContent,
@@ -14,20 +15,19 @@ import React from 'react';
 
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import type { NavGroupItem } from 'lib/hooks/useNavItems';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavLink from './NavLink';
-import useColors from './useColors';
+import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = NavGroupItem & {
   isCollapsed?: boolean;
 }
 
 const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Props) => {
-  const colors = useColors();
-
   const isExpanded = isCollapsed === false;
 
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
+
   return (
     <Box as="li" listStyleType="none" w="100%">
       <Popover
@@ -36,31 +36,21 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
         isLazy
       >
         <PopoverTrigger>
-          <Box
+          <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 }}
-            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"
-            whiteSpace="nowrap"
             aria-label={ `${ text } link group` }
-            { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+            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
-                  variant="inherit"
-                  fontSize="sm"
-                  lineHeight="20px"
-                  opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
-                  transitionProperty="opacity"
-                  transitionDuration="normal"
-                  transitionTimingFunction="ease"
+                  { ...styleProps.textProps }
                 >
                   { text }
                 </Text>
@@ -69,10 +59,13 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
                 as={ chevronIcon }
                 transform="rotate(180deg)"
                 boxSize={ 6 }
-                display={{ lg: isExpanded ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
+                transitionProperty="opacity"
+                transitionDuration="normal"
+                transitionTimingFunction="ease"
               />
             </Flex>
-          </Box>
+          </Link>
         </PopoverTrigger>
         <PopoverContent width="auto" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
           <PopoverBody p={ 4 }>

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -9,9 +9,8 @@ import React from 'react';
 
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import type { NavGroupItem } from 'lib/hooks/useNavItems';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
-import useColors from './useColors';
+import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = NavGroupItem & {
   isCollapsed?: boolean;
@@ -19,33 +18,21 @@ type Props = NavGroupItem & {
 }
 
 const NavLinkGroup = ({ text, icon, isActive, onClick }: Props) => {
-  const colors = useColors();
+  const styleProps = useNavLinkStyleProps({ isActive });
 
   return (
     <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
       <Box
+        { ...styleProps.itemProps }
         w="100%"
         px={ 3 }
-        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"
-        whiteSpace="nowrap"
         aria-label={ `${ text } link group` }
-        { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
       >
         <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
           <HStack spacing={ 3 } overflow="hidden">
             <Icon as={ icon } boxSize="30px"/>
             <Text
-              variant="inherit"
-              fontSize="sm"
-              lineHeight="20px"
-              transitionProperty="opacity"
-              transitionDuration="normal"
-              transitionTimingFunction="ease"
+              { ...styleProps.textProps }
             >
               { text }
             </Text>

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -80,7 +80,7 @@ test('with submenu +@desktop-xl +@dark-mode', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.locator('div[aria-label="Blockchain link group"]').hover();
+  await page.locator('a[aria-label="Blockchain link group"]').hover();
 
   await expect(component).toHaveScreenshot();
 });

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',
+    },
+  };
+}