add active state for network button in desktop

ui/blocks/header/Burger.tsx

@@ -43,7 +43,6 @@ const Burger = () => {
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
               <NetworkMenuButton
-                isCollapsed
                 isMobile
                 isActive={ isNetworkMenuOpened }
                 onClick={ handleNetworkMenuButtonClick }

ui/blocks/networkMenu/NetworkMenu.tsx

@@ -10,12 +10,16 @@ interface Props {
 const NetworkMenu = ({ isCollapsed }: Props) => {
   return (
     <Popover openDelay={ 300 } placement="right-start" gutter={ 22 } isLazy>
-      <PopoverTrigger>
-        <Box>
-          <NetworkMenuButton isCollapsed={ isCollapsed }/>
-        </Box>
-      </PopoverTrigger>
-      <NetworkMenuContentDesktop/>
+      { ({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <Box marginLeft={ isCollapsed ? '0px' : '7px' }>
+              <NetworkMenuButton isActive={ isOpen }/>
+            </Box>
+          </PopoverTrigger>
+          <NetworkMenuContentDesktop/>
+        </>
+      ) }
     </Popover>
   );
 };

ui/blocks/networkMenu/NetworkMenuButton.tsx

@@ -5,13 +5,12 @@ import networksIcon from 'icons/networks.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 interface Props {
-  isCollapsed?: boolean;
   isMobile?: boolean;
   isActive?: boolean;
   onClick?: () => void;
 }
 
-const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const NetworkMenuButton = ({ isMobile, isActive, onClick }: 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');
@@ -25,7 +24,7 @@ const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props,
       ref={ ref }
       h="36px"
       borderRadius="base"
-      backgroundColor={ isMobile && isActive ? bgColorMobile : 'none' }
+      backgroundColor={ isActive ? bgColorMobile : 'none' }
       onClick={ onClick }
     >
       <Icon
@@ -33,9 +32,8 @@ const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props,
         width="36px"
         height="36px"
         padding="10px"
-        color={ isMobile && isActive ? iconColorMobile : defaultIconColor }
+        color={ isActive ? iconColorMobile : defaultIconColor }
         _hover={{ color: isMobile ? undefined : 'blue.400' }}
-        marginLeft={ isCollapsed ? '0px' : '7px' }
         cursor="pointer"
         { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
       />