fix vertical navigation

ui/pages/Chakra.tsx

@@ -41,6 +41,8 @@ const ChakraShowcases = () => {
             <Link>Primary</Link>
             <Link visual="secondary">Secondary</Link>
             <Link visual="subtle">Subtle</Link>
+            <Link visual="navigation">Navigation</Link>
+            <Link visual="navigation" data-selected p={ 3 } borderRadius="base">Navigation selected</Link>
           </HStack>
         </section>
 

ui/shared/layout/Layout.tsx

@@ -5,8 +5,8 @@ import type { Props } from './types';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
 // TODO @tom2drum fix main layout
-// import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
-// import HeaderMobile from 'ui/snippets/header/HeaderMobile';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
@@ -17,7 +17,7 @@ const LayoutDefault = ({ children }: Props) => {
       <Layout.NavBar/>
       { /* <HeaderMobile/> */ }
       <Layout.MainArea>
-        { /* <Layout.SideBar/> */ }
+        <Layout.SideBar/>
         <Layout.MainColumn>
           <HeaderAlert/>
           { /* <HeaderDesktop/> */ }

ui/snippets/navigation/useColors.ts

-import { useColorModeValue } from 'toolkit/chakra/color-mode';
-
-// TODO @tom2drum remove this
-export default function useColors() {
-  return {
-    text: {
-      'default': useColorModeValue('gray.600', 'gray.400'),
-      active: useColorModeValue('blue.700', 'gray.50'),
-      hover: 'link_hovered',
-    },
-    bg: {
-      'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.800'),
-    },
-    border: {
-      'default': 'border.divider',
-      active: useColorModeValue('blue.50', 'gray.800'),
-    },
-  };
-}

ui/snippets/navigation/useNavLinkStyleProps.tsx

 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
-import useColors from './useColors';
-
 type Props = {
   isExpanded?: boolean;
   isCollapsed?: boolean;
@@ -9,15 +7,12 @@ type Props = {
 };
 
 export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
-  const colors = useColors();
-
   return {
     itemProps: {
+      visual: 'navigation' as const,
       py: '9px',
       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 },
+      ...(isActive ? { 'data-selected': true } : {}),
       borderRadius: 'base',
       ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }),
     },

ui/snippets/navigation/vertical/NavLink.tsx

-import { Link, Text, HStack, Tooltip, Box, useBreakpointValue } from '@chakra-ui/react';
+import { Link, HStack, Box, useBreakpointValue, chakra } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -8,11 +8,11 @@ import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { isInternalItem } from 'lib/hooks/useNavItems';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
 import NavLinkIcon from '../NavLinkIcon';
-import useColors from '../useColors';
 import useNavLinkStyleProps from '../useNavLinkStyleProps';
 import { checkRouteHighlight } from '../utils';
 
@@ -25,7 +25,6 @@ type Props = {
 
 const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
   const isMobile = useIsMobile();
-  const colors = useColors();
 
   const isInternalLink = isInternalItem(item);
   const href = isInternalLink ? route(item.nextRoute) : item.url;
@@ -51,28 +50,36 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
       onClick={ onClick }
       _hover={{
         [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
-          color: isDisabled ? 'inherit' : 'link_hovered',
+          color: isDisabled ? 'inherit' : 'link.primary.hover',
         },
       }}
     >
       <Tooltip
-        label={ item.text }
-        hasArrow={ false }
-        isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
-        placement="right"
-        variant="nav"
-        gutter={ 20 }
-        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
-        margin={ 0 }
+        content={ item.text }
+        showArrow={ false }
+        disabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
+        positioning={{ placement: 'right', offset: { crossAxis: 0, mainAxis: 20 } }}
+        visual="navigation"
+        contentProps={{
+          color: isInternalLink && item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg.hover',
+        }}
+        interactive
       >
-        <HStack spacing={ 0 } overflow="hidden">
+        <HStack gap={ 0 } overflow="hidden">
           <NavLinkIcon item={ item }/>
-          <Text { ...styleProps.textProps } as="span" ml={ 3 }>
+          <chakra.span
+            { ...styleProps.textProps }
+            ml={ 3 }
+            display={{ base: 'inline', lg: isExpanded ? 'inline' : 'none', xl: isCollapsed ? 'none' : 'inline' }}
+          >
             <span>{ item.text }</span>
             { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
-          </Text>
+          </chakra.span>
           { isHighlighted && (
-            <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+            <LightningLabel
+              iconColor={ isInternalLink && item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+              isCollapsed={ isCollapsed }
+            />
           ) }
         </HStack>
       </Tooltip>

ui/snippets/navigation/vertical/NavLinkGroup.tsx

-import {
-  Text,
-  HStack,
-  Box,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  VStack,
-} from '@chakra-ui/react';
+import { Text, HStack, Box, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
@@ -34,12 +26,12 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
 
   return (
     <Box as="li" listStyleType="none" w="100%">
-      <Popover
-        trigger="hover"
-        placement="right-start"
+      <PopoverRoot
+        // TODO @tom2drum fix trigger
+        // trigger="hover"
+        positioning={{ placement: 'right-start', offset: { crossAxis: 8, mainAxis: 8 } }}
         // should not be lazy to help google indexing pages
-        isLazy={ false }
-        gutter={ 8 }
+        lazyMount={ false }
       >
         <PopoverTrigger>
           <Box
@@ -49,8 +41,9 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
             pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
             aria-label={ `${ item.text } link group` }
             position="relative"
+            bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
           >
-            <HStack spacing={ 0 } overflow="hidden">
+            <HStack gap={ 0 } overflow="hidden">
               <NavLinkIcon item={ item }/>
               <Text
                 { ...styleProps.textProps }
@@ -59,7 +52,10 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
                 { item.text }
               </Text>
               { isHighlighted && (
-                <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+                <LightningLabel
+                  iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+                  isCollapsed={ isCollapsed }
+                />
               ) }
               <IconSvg
                 name="arrows/east-mini"
@@ -77,10 +73,10 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
         </PopoverTrigger>
         <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
           <PopoverBody p={ 4 }>
-            <Text variant="secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+            <Text color="text.secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
               { item.text }
             </Text>
-            <VStack spacing={ 1 } alignItems="start" as="ul">
+            <VStack gap={ 1 } alignItems="start" as="ul">
               { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
                 <Box
                   key={ index }
@@ -101,7 +97,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
             </VStack>
           </PopoverBody>
         </PopoverContent>
-      </Popover>
+      </PopoverRoot>
     </Box>
   );
 };

ui/snippets/navigation/vertical/NavigationDesktop.tsx

-import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Box, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -46,18 +46,12 @@ const NavigationDesktop = () => {
     }
   }, [ handleTogglerClick ]);
 
-  const chevronIconStyles = {
-    bgColor: useColorModeValue('white', 'black'),
-    color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
-    borderColor: 'border.divider',
-  };
-
   const isExpanded = isCollapsed === false;
 
   return (
     <Flex
       display={{ base: 'none', lg: 'flex' }}
-      role="group"
+      className="group"
       position="relative"
       flexDirection="column"
       alignItems="stretch"
@@ -88,7 +82,7 @@ const NavigationDesktop = () => {
         { Boolean(config.UI.navigation.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
       </Box>
       <Box as="nav" mt={ 6 } w="100%">
-        <VStack as="ul" spacing="1" alignItems="flex-start">
+        <VStack as="ul" gap="1" alignItems="flex-start">
           { mainNavItems.map((item) => {
             if (isGroupItem(item)) {
               return <NavLinkGroup key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
@@ -100,7 +94,7 @@ const NavigationDesktop = () => {
       </Box>
       { isAuth && (
         <Box as="nav" borderTopWidth="1px" borderColor="border.divider" w="100%" mt={ 3 } pt={ 3 }>
-          <VStack as="ul" spacing="1" alignItems="flex-start">
+          <VStack as="ul" gap="1" alignItems="flex-start">
             <NavLinkRewards isCollapsed={ isCollapsed }/>
             { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
           </VStack>
@@ -110,10 +104,12 @@ const NavigationDesktop = () => {
         name="arrows/east-mini"
         width={ 6 }
         height={ 6 }
-        border="1px"
-        _hover={{ color: 'link_hovered' }}
+        _hover={{ color: 'link.primary.hover' }}
         borderRadius="base"
-        { ...chevronIconStyles }
+        bgColor={{ base: 'white', _dark: 'black' }}
+        color={{ base: 'blackAlpha.400', _dark: 'whiteAlpha.400' }}
+        borderWidth="1px"
+        borderColor="border.divider"
         transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}
         { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
         transformOrigin="center"

ui/snippets/networkMenu/NetworkMenu.tsx

-import { PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 
 import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
@@ -15,18 +14,23 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
   const menu = useNetworkMenu();
 
   return (
-    <Popover openDelay={ 300 } placement="right-start" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+    <PopoverRoot
+      positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
+      lazyMount
+      open={ menu.open }
+      onOpenChange={ menu.onOpenChange }
+    >
       <PopoverTrigger>
         <NetworkMenuButton
           marginLeft="auto"
           overflow="hidden"
-          width={{ base: 'auto', lg: isCollapsed === false ? 'auto' : '0px', xl: isCollapsed ? '0px' : 'auto' }}
-          isActive={ menu.isOpen }
+          width={{ base: 'auto', lg: isCollapsed === false ? '36px' : '0px', xl: isCollapsed ? '0px' : '36px' }}
+          isActive={ menu.open }
           onClick={ menu.onToggle }
         />
       </PopoverTrigger>
       <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
-    </Popover>
+    </PopoverRoot>
   );
 };
 

ui/snippets/networkMenu/NetworkMenuButton.tsx

-import { Button, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import { IconButton } from 'toolkit/chakra/icon-button';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -13,35 +12,28 @@ interface Props {
 }
 
 const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
-  const defaultIconColor = useColorModeValue('gray.600', 'gray.400');
-  const bgColorMobile = useColorModeValue('blue.50', 'gray.800');
-  const iconColorMobile = useColorModeValue('blue.700', 'blue.50');
-
   return (
-    <Button
+    <IconButton
       className={ className }
-      variant="unstyled"
+      visual="plain"
       display="inline-flex"
       alignItems="center"
       ref={ ref }
-      h="36px"
+      h={ 9 }
       borderRadius="base"
-      backgroundColor={ isActive ? bgColorMobile : 'none' }
+      backgroundColor={ isActive ? { _light: 'blue.50', _dark: 'gray.400' } : 'none' }
       onClick={ onClick }
       aria-label="Network menu"
       aria-roledescription="menu"
     >
       <IconSvg
         name="networks"
-        width="36px"
-        height="36px"
-        padding="10px"
-        color={ isActive ? iconColorMobile : defaultIconColor }
+        boxSize={ 4 }
+        color={ isActive ? { _light: 'blue.700', _dark: 'blue.50' } : { _light: 'gray.600', _dark: 'gray.400' } }
         _hover={{ color: isMobile ? undefined : 'link_hovered' }}
         cursor="pointer"
-        { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
       />
-    </Button>
+    </IconButton>
   );
 };