styling link item

icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.293 14.465a1 1 0 0 0 1.414 0l7.778-7.78A1 1 0 0 1 19.899 8.1l-9.192 9.193a1 1 0 0 1-1.414 0l-4.95-4.95a1 1 0 0 1 1.414-1.414l3.536 3.536Z" fill="currentColor"/>
+</svg>

theme/components/Popover.ts

@@ -12,7 +12,7 @@ const baseStylePopper: SystemStyleObject = {
 };
 
 const baseStyleContent: SystemStyleFunction = (props) => {
-  const bg = mode('white', 'gray.700')(props);
+  const bg = mode('white', 'gray.900')(props);
   const shadowColor = mode('gray.200', 'whiteAlpha.300')(props);
 
   return {

ui/navigation/NavLink.tsx

@@ -22,7 +22,6 @@ const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
 
   return (
     <NextLink href={ pathname } passHref>
-
       <Link
         as="li"
         listStyleType="none"

ui/navigation/networkMenu/NetworkMenuLink.tsx

@@ -1,12 +1,58 @@
-import { Box } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import NextLink from 'next/link';
 import React from 'react';
 
 import type { NetworkLink } from './types';
 
+import checkIcon from 'icons/check.svg';
+
+import useColors from '../useColors';
+
 type Props = NetworkLink;
 
-const NetworkMenuLink = ({ name }: Props) => {
-  return <Box>{ name }</Box>;
+const NetworkMenuLink = ({ name, url, icon }: Props) => {
+  const isActive = name === 'Gnosis Chain';
+  const colors = useColors();
+
+  return (
+    <Box as="li" listStyleType="none">
+      <NextLink href={ url } passHref>
+        <Flex
+          as="a"
+          px={ 4 }
+          py={ 2 }
+          alignItems="center"
+          cursor="pointer"
+          borderWidth="1px"
+          borderColor={ isActive ? colors.border.active : colors.border.default }
+          borderRadius="base"
+          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 }}
+        >
+          <Icon
+            as={ icon }
+            boxSize="40px"
+            color="deeppink"
+          />
+          <Text
+            marginLeft={ 3 }
+            fontWeight="500"
+            color="inherit"
+          >
+            { name }
+          </Text>
+          { isActive && (
+            <Icon
+              as={ checkIcon }
+              boxSize="24px"
+              marginLeft="auto"
+            />
+          ) }
+        </Flex>
+      </NextLink>
+    </Box>
+  );
 };
 
 export default React.memo(NetworkMenuLink);

ui/navigation/networkMenu/NetworkMenuPopup.tsx

@@ -1,4 +1,4 @@
-import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NetworkLink } from './types';
@@ -42,8 +42,10 @@ const NetworkMenuPopup = () => {
           </TabList>
           <TabPanels>
             { TABS.map((tab) => (
-              <TabPanel key={ tab }>
-                { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link }/>) }
+              <TabPanel key={ tab } p={ 0 }>
+                <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
+                  { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link }/>) }
+                </VStack>
               </TabPanel>
             )) }
           </TabPanels>

ui/navigation/useColors.ts

@@ -11,5 +11,9 @@ export default function useColors() {
       'default': 'transparent',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
+    border: {
+      'default': useColorModeValue('gray.200', 'whiteAlpha.200'),
+      active: useColorModeValue('blue.50', 'gray.800'),
+    },
   };
 }