refactoring

ui/header/Burger.tsx → ui/blocks/header/Burger.tsx

@@ -2,10 +2,10 @@ import { Icon, Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useC
 import React from 'react';
 
 import burgerIcon from 'icons/burger.svg';
-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';
+import NavigationMobile from 'ui/blocks/navigation/NavigationMobile';
+import NetworkLogo from 'ui/blocks/networkMenu/NetworkLogo';
+import NetworkMenuButton from 'ui/blocks/networkMenu/NetworkMenuButton';
+import NetworkMenuContentMobile from 'ui/blocks/networkMenu/NetworkMenuContentMobile';
 
 const Burger = () => {
   const iconColor = useColorModeValue('gray.600', 'white');

ui/header/Header.tsx → ui/blocks/header/Header.tsx

@@ -2,12 +2,12 @@ import { HStack, VStack, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import NetworkLogo from 'ui/navigation/NetworkLogo';
+import NetworkLogo from 'ui/blocks/networkMenu/NetworkLogo';
+import SearchBar from 'ui/blocks/searchBar/SearchBar';
 
 import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 import ProfileMenu from './ProfileMenu';
-import SearchBar from './searchBar/SearchBar';
 
 const Header = () => {
   const isMobile = useIsMobile();

ui/navigation/Navigation.tsx → ui/blocks/navigation/NavigationDesktop.tsx

@@ -4,18 +4,16 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import useNavItems from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import NetworkLogo from 'ui/blocks/networkMenu/NetworkLogo';
+import NetworkMenu from 'ui/blocks/networkMenu/NetworkMenu';
 
 import NavFooter from './NavFooter';
 import NavLink from './NavLink';
-import NetworkLogo from './NetworkLogo';
-import NetworkMenu from './networkMenu/NetworkMenu';
 
-const Navigation = () => {
+const NavigationDesktop = () => {
   const router = useRouter();
-  const isMobile = useIsMobile();
 
   const { mainNavItems, accountNavItems } = useNavItems();
 
@@ -33,10 +31,6 @@ const Navigation = () => {
     borderColor: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
   };
 
-  if (isMobile) {
-    return null;
-  }
-
   return (
     <Flex
       position="relative"
@@ -93,4 +87,4 @@ const Navigation = () => {
   );
 };
 
-export default Navigation;
+export default NavigationDesktop;

ui/navigation/networkMenu/NetworkMenu.tsx → ui/blocks/networkMenu/NetworkMenu.tsx

@@ -2,7 +2,7 @@ import { Popover, PopoverTrigger, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import NetworkMenuButton from './NetworkMenuButton';
-import NetworkMenuPopup from './NetworkMenuPopup';
+import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
 interface Props {
   isCollapsed: boolean;
 }
@@ -15,7 +15,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
           <NetworkMenuButton isCollapsed={ isCollapsed }/>
         </Box>
       </PopoverTrigger>
-      <NetworkMenuPopup/>
+      <NetworkMenuContentDesktop/>
     </Popover>
   );
 };

ui/shared/Page/Page.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import Header from 'ui/header/Header';
-import Navigation from 'ui/navigation/Navigation';
+import Header from 'ui/blocks/header/Header';
+import NavigationDesktop from 'ui/blocks/navigation/NavigationDesktop';
 
 interface Props {
   children: React.ReactNode;
@@ -32,7 +32,7 @@ const Page = ({ children }: Props) => {
       minH="100vh"
       alignItems="stretch"
     >
-      <Navigation/>
+      { !isMobile && <NavigationDesktop/> }
       <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? '104px' : 9 } paddingBottom={ 10 }>
         <Header/>
         <Box