header base styles

icons/burger.svg

+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 16.875C3 17.496 3.504 18 4.125 18h15.75a1.125 1.125 0 0 0 0-2.25H4.125c-.621 0-1.125.504-1.125 1.125ZM3 12c0 .621.504 1.125 1.125 1.125h9.75a1.125 1.125 0 0 0 0-2.25h-9.75C3.504 10.875 3 11.379 3 12Zm1.125-3.749a1.125 1.125 0 0 1 0-2.25h12.75a1.125 1.125 0 0 1 0 2.25H4.125Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

pages/[network_type]/[network_sub_type]/index.tsx

@@ -12,7 +12,9 @@ const Home: NextPage = () => {
     <Page>
       <Center h="100%" fontSize={{ base: 'sm', lg: 'xl' }}>
         <VStack gap={ 4 }>
-          <Box>home page for { router.query.network_type } { router.query.network_sub_type } network</Box>
+          <Box minHeight={{ base: '200vh', lg: 'auto' }}>
+            home page for { router.query.network_type } { router.query.network_sub_type } network
+          </Box>
         </VStack>
       </Center>
     </Page>

ui/header/Burger.tsx

+import { Icon, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import burgerIcon from 'icons/burger.svg';
+
+const Burger = () => {
+  const iconColor = useColorModeValue('gray.600', 'white');
+
+  return (
+    <Box padding={ 2 }>
+      <Icon
+        as={ burgerIcon }
+        boxSize={ 6 }
+        display="block"
+        color={ iconColor }
+      />
+    </Box>
+  );
+};
+
+export default Burger;

ui/header/Header.module.css

-.identicon {
-    max-width: 48px;
-    max-height: 48px;
-}
\ No newline at end of file

ui/header/Header.tsx

-import { HStack, Center, useColorModeValue } from '@chakra-ui/react';
+import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
-import Identicon from 'react-identicons';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+import NetworkLogo from 'ui/navigation/NetworkLogo';
+
+import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
-import styles from './Header.module.css';
+import ProfileMenu from './ProfileMenu';
 import SearchBar from './SearchBar';
 
 const Header = () => {
+  const isMobile = useIsMobile();
+  const bgColor = useColorModeValue('white', 'black');
+
+  if (isMobile) {
+    return (
+      <Flex
+        as="header"
+        width="100%"
+        alignItems="center"
+        justifyContent="space-between"
+        position="fixed"
+        bgColor={ bgColor }
+        top={ 0 }
+        left={ 0 }
+        paddingX={ 4 }
+        paddingTop={ 2 }
+      >
+        <Burger/>
+        <NetworkLogo/>
+        <ProfileMenu/>
+      </Flex>
+    );
+  }
+
   return (
     <HStack
       as="header"
-      height="60px"
       width="100%"
       alignItems="center"
       justifyContent="center"
-      marginTop={ 9 }
       gap={ 12 }
     >
       <SearchBar/>
       <ColorModeToggler/>
-      <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">
-        { /* the displayed size is 48px, but we need to generate x2 for retina displays */ }
-        <Identicon className={ styles.identicon } string="randomness" size={ 96 }/>
-      </Center>
+      <ProfileMenu/>
     </HStack>
   );
 };

ui/header/ProfileMenu.tsx

+import { Center, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+import Identicon from 'react-identicons';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+const ProfileIcon = chakra(Identicon);
+
+const ProfileMenu = () => {
+  const isMobile = useIsMobile();
+
+  const size = isMobile ? '24px' : '50px';
+
+  return (
+    <Center
+      flexShrink={ 0 }
+      padding={ isMobile ? 2 : 0 }
+    >
+      { /* the displayed size is 48px, but we need to generate x2 for retina displays */ }
+      <ProfileIcon
+        maxWidth={ size }
+        maxHeight={ size }
+        string="randomness"
+        size={ 100 }
+        bg={ useColorModeValue('blackAlpha.100', 'white') }
+        borderRadius="50%"
+        overflow="hidden"
+      />
+    </Center>
+  );
+};
+
+export default ProfileMenu;

ui/navigation/Navigation.tsx

 import { ChevronLeftIcon } from '@chakra-ui/icons';
-import { Flex, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -8,7 +8,6 @@ import apiKeysIcon from 'icons/API.svg';
 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 privateTagIcon from 'icons/privattags.svg';
 import publicTagIcon from 'icons/publictags.svg';
 import tokensIcon from 'icons/token.svg';
@@ -16,15 +15,18 @@ import transactionsIcon from 'icons/transactions.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import * as cookies from 'lib/cookies';
 import useBasePath from 'lib/hooks/useBasePath';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavFooter from './NavFooter';
 import NavLink from './NavLink';
+import NetworkLogo from './NetworkLogo';
 import NetworkMenu from './networkMenu/NetworkMenu';
 
 const Navigation = () => {
   const router = useRouter();
   const basePath = useBasePath();
+  const isMobile = useIsMobile();
 
   const mainNavItems = [
     { text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon },
@@ -49,7 +51,16 @@ const Navigation = () => {
     cookies.set(cookies.NAMES.NAV_BAR_COLLAPSED, isCollapsed ? 'false' : 'true');
   }, [ isCollapsed ]);
 
-  const logoColor = useColorModeValue('blue.600', 'white');
+  const containerBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const chevronIconStyles = {
+    bgColor: useColorModeValue('white', 'black'),
+    color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
+    borderColor: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+  };
+
+  if (isMobile) {
+    return null;
+  }
 
   return (
     <Flex
@@ -57,7 +68,7 @@ const Navigation = () => {
       flexDirection="column"
       alignItems="center"
       borderRight="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor={ containerBorderColor }
       px={ isCollapsed ? 4 : 6 }
       py={ 12 }
       width={ isCollapsed ? '92px' : '229px' }
@@ -73,20 +84,7 @@ const Navigation = () => {
         px={ 3 }
         h={ 10 }
       >
-        <Box
-          width={ isCollapsed ? '0' : '113px' }
-          display="inline-flex"
-          overflow="hidden"
-          { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
-        >
-          <Icon
-            as={ logoIcon }
-            width="113px"
-            height="20px"
-            color={ logoColor }
-            { ...getDefaultTransitionProps() }
-          />
-        </Box>
+        <NetworkLogo isCollapsed={ isCollapsed }/>
         <NetworkMenu isCollapsed={ isCollapsed }/>
       </Box>
       <Box as="nav" mt={ 14 }>
@@ -103,12 +101,10 @@ const Navigation = () => {
       <ChevronLeftIcon
         width={ 6 }
         height={ 6 }
-        bgColor={ useColorModeValue('white', 'black') }
         border="1px"
-        color={ useColorModeValue('blackAlpha.400', 'whiteAlpha.400') }
         _hover={{ color: 'blue.400' }}
-        borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderRadius="base"
+        { ...chevronIconStyles }
         transform={ isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }
         { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
         transformOrigin="center"

ui/navigation/NetworkLogo.tsx

+import { Icon, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import logoIcon from 'icons/logo.svg';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+
+interface Props {
+  isCollapsed?: boolean;
+}
+
+const NetworkLogo = ({ isCollapsed }: Props) => {
+  const logoColor = useColorModeValue('blue.600', 'white');
+
+  return (
+    <Box
+      width={ isCollapsed ? '0' : '113px' }
+      display="inline-flex"
+      overflow="hidden"
+      { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
+    >
+      <Icon
+        as={ logoIcon }
+        width="113px"
+        height="20px"
+        color={ logoColor }
+        { ...getDefaultTransitionProps() }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(NetworkLogo);

ui/shared/Page/Page.tsx

 import { Box, HStack, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import Header from 'ui/header/Header';
 import Navigation from 'ui/navigation/Navigation';
 
@@ -9,23 +10,22 @@ interface Props {
 }
 
 const Page = ({ children }: Props) => {
+  const isMobile = useIsMobile();
+
   return (
     <HStack
       w="100%"
       minH="100vh"
-      spacing={ 12 }
       alignItems="stretch"
-      paddingRight="60px"
     >
       <Navigation/>
-      <VStack width="100%">
+      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? 12 : 9 }>
         <Header/>
         <Box
           as="main"
           borderRadius="base"
           w="100%"
           overflow="hidden"
-          py={ 8 }
         >
           { children }
         </Box>