basic layout

icons/networks/gnosis.svg

+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.437 12.495c.046.041.084.073.119.107.373.365.742.734 1.12 1.095.084.081.085.137.024.23-.79 1.21-1.078 2.537-.815 3.943.354 1.886 1.439 3.26 3.21 4.089 1.047.489 2.157.614 3.298.443a5.539 5.539 0 0 0 2.14-.788c.109-.068.168-.06.257.028.963.958 1.932 1.91 2.894 2.87.106.105.161.117.275.004 1.1-1.087 2.209-2.166 3.308-3.254.121-.12.197-.14.355-.047.962.568 2.01.795 3.13.744 2.224-.102 4.255-1.625 4.944-3.716.522-1.583.328-3.086-.522-4.515-.056-.093-.06-.15.024-.231.31-.293.612-.594.917-.891.028-.028.06-.052.09-.079 3.259 4.694 3.718 12.244-1.524 17.803-5.43 5.758-14.39 6.206-20.373 1.264-6.076-5.02-6.798-13.26-2.87-19.1Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M30.017 10.632c-5.83-5.842-15.311-5.347-20.37-.233.03.033.058.067.09.098 3.342 3.283 6.684 6.564 10.024 9.848.094.093.148.082.233-.004.432-.429.867-.853 1.303-1.278 2.819-2.744 5.637-5.488 8.457-8.23.076-.074.17-.13.263-.2ZM19.87 22.418 7.652 10.4c.03-.038.053-.075.083-.107 1.47-1.598 3.176-2.89 5.168-3.81a15.913 15.913 0 0 1 3.393-1.127 16.328 16.328 0 0 1 4.104-.341c2.016.088 3.945.54 5.789 1.347 2.216.97 4.088 2.386 5.676 4.176.092.103.039.15-.032.219l-5.925 5.776-5.91 5.767c-.035.035-.074.067-.128.117ZM14.618 19.608c-.828.742-2.668.914-3.885-.279-1.222-1.196-1.055-2.965-.253-3.885l4.138 4.164ZM25.318 19.32l4.144-4.072c.583.64.853 2.272-.156 3.476-1.122 1.338-2.974 1.33-3.988.596Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

ui/navigation/Navigation.tsx

@@ -8,7 +8,6 @@ import appsIcon from 'icons/apps.svg';
 import blocksIcon from 'icons/block.svg';
 import gearIcon from 'icons/gear.svg';
 import logoIcon from 'icons/logo.svg';
-import networksIcon from 'icons/networks.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import publicTagIcon from 'icons/publictags.svg';
 import tokensIcon from 'icons/token.svg';
@@ -19,6 +18,7 @@ import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavFooter from './NavFooter';
 import NavLink from './NavLink';
+import NetworkMenu from './networkMenu/NetworkMenu';
 
 const mainNavItems = [
   { text: 'Blocks', pathname: '/blocks', icon: blocksIcon },
@@ -82,14 +82,7 @@ const Navigation = () => {
             { ...getDefaultTransitionProps() }
           />
         </Box>
-        <Icon
-          as={ networksIcon }
-          width="16px"
-          height="16px"
-          color={ useColorModeValue('gray.500', 'white') }
-          marginLeft={ isCollapsed ? '0px' : '27px' }
-          { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
-        />
+        <NetworkMenu isCollapsed={ isCollapsed }/>
       </Box>
       <Box as="nav" mt={ 14 }>
         <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">

ui/navigation/networkMenu/NetworkMenu.tsx

+import { Popover, PopoverTrigger, Box, Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import networksIcon from 'icons/networks.svg';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+
+import NetworkMenuPopup from './NetworkMenuPopup';
+
+interface Props {
+  isCollapsed: boolean;
+}
+
+const NetworkMenu = ({ isCollapsed }: Props) => {
+  return (
+    <Popover trigger="hover" openDelay={ 0 } placement="right-start" gutter={ 22 } isOpen>
+      <PopoverTrigger>
+        <Box display="inline-flex">
+          <Icon
+            as={ networksIcon }
+            width="16px"
+            height="16px"
+            color={ useColorModeValue('gray.500', 'white') }
+            marginLeft={ isCollapsed ? '0px' : '27px' }
+            cursor="pointer"
+            { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
+          />
+        </Box>
+      </PopoverTrigger>
+      <NetworkMenuPopup/>
+    </Popover>
+  );
+};
+
+export default React.memo(NetworkMenu);

ui/navigation/networkMenu/NetworkMenuLink.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NetworkLink } from './types';
+
+type Props = NetworkLink;
+
+const NetworkMenuLink = ({ name }: Props) => {
+  return <Box>{ name }</Box>;
+};
+
+export default React.memo(NetworkMenuLink);

ui/navigation/networkMenu/NetworkMenuPopup.tsx

+import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NetworkLink } from './types';
+
+import gnosisIcon from 'icons/networks/gnosis.svg';
+
+import NetworkMenuLink from './NetworkMenuLink';
+
+type PopupTab = 'mainnets' | 'testnets' | 'other';
+
+const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
+
+const LINKS: Record<PopupTab, Array<NetworkLink>> = {
+  mainnets: [
+    { name: 'Gnosis Chain', url: '/xdai/mainnet', icon: gnosisIcon },
+    { name: 'Optimism on Gnosis Chain', url: '/xdai/optimism', icon: gnosisIcon },
+    { name: 'Arbitrum on xDai', url: '/xdai/aox', icon: gnosisIcon },
+    { name: 'Ethereum', url: '/eth/mainnet', icon: gnosisIcon },
+    { name: 'Ethereum Classic', url: '/etc/mainnet', icon: gnosisIcon },
+    { name: 'POA', url: '/poa/core', icon: gnosisIcon },
+    { name: 'RSK', url: '/rsk/mainnet', icon: gnosisIcon },
+  ],
+  testnets: [
+    { name: 'Gnosis Chain Testnet', url: '/xdai/testnet', icon: gnosisIcon },
+    { name: 'POA Sokol', url: '/poa/sokol', icon: gnosisIcon },
+  ],
+  other: [
+    { name: 'ARTIS Σ1', url: '/artis/sigma1', icon: gnosisIcon },
+    { name: 'LUKSO L14', url: '/lukso/l14', icon: gnosisIcon },
+  ],
+};
+
+const NetworkMenuPopup = () => {
+  return (
+    <PopoverContent w="382px">
+      <PopoverBody>
+        <Text as="h4" fontSize="18px" lineHeight="30px" fontWeight="500">Networks</Text>
+        <Tabs variant="soft-rounded" mt={ 4 } isLazy>
+          <TabList>
+            { TABS.map((tab) => <Tab key={ tab } textTransform="capitalize">{ tab }</Tab>) }
+          </TabList>
+          <TabPanels>
+            { TABS.map((tab) => (
+              <TabPanel key={ tab }>
+                { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link }/>) }
+              </TabPanel>
+            )) }
+          </TabPanels>
+        </Tabs>
+      </PopoverBody>
+    </PopoverContent>
+  );
+};
+
+export default NetworkMenuPopup;

ui/navigation/networkMenu/types.ts

+import type { FunctionComponent, SVGAttributes } from 'react';
+
+export interface NetworkLink {
+  url: string;
+  name: string;
+  icon: FunctionComponent<SVGAttributes<SVGElement>>;
+}