network menu

ui/header/Burger.tsx

-import { Icon, Box, Flex, VStack, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import { Icon, Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import burgerIcon from 'icons/burger.svg';
-import useNavItems from 'lib/hooks/useNavItems';
-import NavFooter from 'ui/navigation/NavFooter';
-import NavLink from 'ui/navigation/NavLink';
+import NavigationMobile from 'ui/navigation/NavigationMobile';
 import NetworkLogo from 'ui/navigation/NetworkLogo';
+import NetworkMenuButton from 'ui/navigation/networkMenu/NetworkMenuButton';
+import NetworkMenuContentMobile from 'ui/navigation/networkMenu/NetworkMenuContentMobile';
 
 const Burger = () => {
   const iconColor = useColorModeValue('gray.600', 'white');
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mainNavItems, accountNavItems } = useNavItems();
-  const router = useRouter();
+  const [ isNetworkMenuOpened, setNetworkMenuVisibility ] = React.useState(false);
+
+  const handleNetworkMenuButtonClick = React.useCallback(() => {
+    setNetworkMenuVisibility((flag) => !flag);
+  }, []);
 
   return (
     <>
@@ -32,20 +34,16 @@ const Burger = () => {
         <DrawerOverlay bgColor="blackAlpha.800"/>
         <DrawerContent maxWidth="260px">
           <DrawerBody p={ 6 }>
-            <Flex>
+            <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo/>
+              <NetworkMenuButton
+                isCollapsed
+                isMobile
+                isActive={ isNetworkMenuOpened }
+                onClick={ handleNetworkMenuButtonClick }
+              />
             </Flex>
-            <Box as="nav" mt={ 8 }>
-              <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
-                { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
-              </VStack>
-            </Box>
-            <Box as="nav" mt={ 6 }>
-              <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
-                { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
-              </VStack>
-            </Box>
-            <NavFooter/>
+            { isNetworkMenuOpened ? <NetworkMenuContentMobile/> : <NavigationMobile/> }
           </DrawerBody>
         </DrawerContent>
       </Drawer>

ui/navigation/NavigationMobile.tsx

+import { Box, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useNavItems from 'lib/hooks/useNavItems';
+import NavFooter from 'ui/navigation/NavFooter';
+import NavLink from 'ui/navigation/NavLink';
+
+const NavigationMobile = () => {
+  const { mainNavItems, accountNavItems } = useNavItems();
+  const router = useRouter();
+
+  return (
+    <>
+      <Box as="nav" mt={ 8 }>
+        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
+        </VStack>
+      </Box>
+      <Box as="nav" mt={ 6 }>
+        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
+        </VStack>
+      </Box>
+      <NavFooter/>
+    </>
+  );
+};
+
+export default NavigationMobile;

ui/navigation/networkMenu/NetworkMenu.tsx

-import { Popover, PopoverTrigger, Icon, useColorModeValue, Button } from '@chakra-ui/react';
+import { Popover, PopoverTrigger, Box } from '@chakra-ui/react';
 import React from 'react';
 
-import networksIcon from 'icons/networks.svg';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-
+import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuPopup from './NetworkMenuPopup';
 
 interface Props {
@@ -14,18 +12,9 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
   return (
     <Popover openDelay={ 300 } placement="right-start" gutter={ 22 } isLazy>
       <PopoverTrigger>
-        <Button variant="unstyled" display="inline-flex" alignSelf="stretch" alignItems="center">
-          <Icon
-            as={ networksIcon }
-            width="16px"
-            height="16px"
-            color={ useColorModeValue('gray.500', 'gray.400') }
-            _hover={{ color: 'blue.400' }}
-            marginLeft={ isCollapsed ? '0px' : '27px' }
-            cursor="pointer"
-            { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
-          />
-        </Button>
+        <Box>
+          <NetworkMenuButton isCollapsed={ isCollapsed }/>
+        </Box>
       </PopoverTrigger>
       <NetworkMenuPopup/>
     </Popover>

ui/navigation/networkMenu/NetworkMenuButton.tsx

+import { Icon, useColorModeValue, Button } from '@chakra-ui/react';
+import React from 'react';
+
+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 defaultIconColor = useColorModeValue('gray.600', 'gray.400');
+
+  return (
+    <Button
+      variant="unstyled"
+      display="inline-flex"
+      alignSelf="stretch"
+      alignItems="center"
+      ref={ ref }
+      h="36px"
+      borderRadius="base"
+      backgroundColor={ isMobile && isActive ? 'blue.50' : 'none' }
+      onClick={ onClick }
+    >
+      <Icon
+        as={ networksIcon }
+        width="36px"
+        height="36px"
+        padding="10px"
+        color={ isMobile && isActive ? 'blue.700' : defaultIconColor }
+        _hover={{ color: isMobile ? undefined : 'blue.400' }}
+        marginLeft={ isCollapsed ? '0px' : '7px' }
+        cursor="pointer"
+        { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
+      />
+    </Button>
+  );
+};
+
+export default React.forwardRef(NetworkMenuButton);

ui/navigation/networkMenu/NetworkMenuContentMobile.tsx

+import { Box, Select, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { NetworkGroup } from 'types/networks';
+
+import { NETWORKS } from 'lib/networks';
+
+import NetworkMenuLink from './NetworkMenuLink';
+
+const TABS: Array<NetworkGroup> = [ 'mainnets', 'testnets', 'other' ];
+
+const NetworkMenuContentMobile = () => {
+  const router = useRouter();
+  const routeName = router.pathname.replace('/[network_type]/[network_sub_type]', '');
+  const selectedNetwork = NETWORKS.find((network) => router.query.network_type === network.type && router.query.network_sub_type === network.subType);
+  const [ selectedTab, setSelectedTab ] = React.useState<NetworkGroup>(TABS.find((tab) => selectedNetwork?.group === tab) || 'mainnets');
+
+  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedTab(event.target.value as NetworkGroup);
+  }, []);
+
+  return (
+    <Box mt={ 6 }>
+      <Select size="sm" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange }>
+        { TABS.map((tab) => <option key={ tab } value={ tab }>{ tab.charAt(0).toUpperCase() + tab.slice(1) }</option>) }
+      </Select>
+      <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 6 }>
+        { NETWORKS
+          .filter(({ group }) => group === selectedTab)
+          .map((network) => (
+            <NetworkMenuLink
+              key={ network.name }
+              { ...network }
+              isActive={ network.name === selectedNetwork?.name }
+              routeName={ routeName }
+            />
+          ))
+        }
+      </VStack>
+    </Box>
+  );
+};
+
+export default NetworkMenuContentMobile;