hide account nav for unauth users

ui/blocks/header/Burger.tsx

@@ -39,7 +39,7 @@ const Burger = () => {
       >
         <DrawerOverlay/>
         <DrawerContent maxWidth="260px">
-          <DrawerBody p={ 6 }>
+          <DrawerBody p={ 6 } display="flex" flexDirection="column">
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
               <NetworkMenuButton

ui/blocks/navigation/NavFooter.tsx

@@ -20,9 +20,10 @@ const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ BLOCKSCOUT
 
 interface Props {
   isCollapsed?: boolean;
+  isAuth?: boolean;
 }
 
-const NavFooter = ({ isCollapsed }: Props) => {
+const NavFooter = ({ isCollapsed, isAuth }: Props) => {
   const isMobile = useIsMobile();
 
   const width = (() => {
@@ -33,6 +34,14 @@ const NavFooter = ({ isCollapsed }: Props) => {
     return isCollapsed ? '20px' : '180px';
   })();
 
+  const marginTop = (() => {
+    if (!isAuth) {
+      return 'auto';
+    }
+
+    return isMobile ? 6 : 20;
+  })();
+
   return (
     <VStack
       as="footer"
@@ -41,7 +50,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       width={ width }
       paddingTop={ isMobile ? 6 : 8 }
-      marginTop={ isMobile ? 6 : 20 }
+      marginTop={ marginTop }
       alignItems="flex-start"
       alignSelf="center"
       color="gray.500"

ui/blocks/navigation/NavigationDesktop.tsx

@@ -17,15 +17,16 @@ const NavigationDesktop = () => {
 
   const { mainNavItems, accountNavItems } = useNavItems();
   const isLargeScreen = useBreakpointValue({ base: false, xl: true });
-  const cookieValue = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED);
+  const navBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED);
+  const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
 
-  const [ isCollapsed, setCollapsedState ] = React.useState(cookieValue === 'true');
+  const [ isCollapsed, setCollapsedState ] = React.useState(navBarCollapsedCookie === 'true');
 
   React.useEffect(() => {
-    if (!cookieValue) {
+    if (!navBarCollapsedCookie) {
       setCollapsedState(!isLargeScreen);
     }
-  }, [ isLargeScreen, cookieValue ]);
+  }, [ isLargeScreen, navBarCollapsedCookie ]);
 
   const handleTogglerClick = React.useCallback(() => {
     setCollapsedState((flag) => !flag);
@@ -70,13 +71,15 @@ const NavigationDesktop = () => {
             <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
         </VStack>
       </Box>
-      <Box as="nav" mt={ 12 }>
-        <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
-          { accountNavItems.map((item) =>
-            <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
-        </VStack>
-      </Box>
-      <NavFooter isCollapsed={ isCollapsed }/>
+      { isAuth && (
+        <Box as="nav" mt={ 12 }>
+          <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+            { accountNavItems.map((item) =>
+              <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
+          </VStack>
+        </Box>
+      ) }
+      <NavFooter isCollapsed={ isCollapsed } isAuth={ isAuth }/>
       <ChevronLeftIcon
         width={ 6 }
         height={ 6 }

ui/blocks/navigation/NavigationMobile.tsx

@@ -2,6 +2,7 @@ import { Box, VStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import * as cookies from 'lib/cookies';
 import useNavItems from 'lib/hooks/useNavItems';
 import NavFooter from 'ui/blocks/navigation/NavFooter';
 import NavLink from 'ui/blocks/navigation/NavLink';
@@ -9,6 +10,7 @@ import NavLink from 'ui/blocks/navigation/NavLink';
 const NavigationMobile = () => {
   const { mainNavItems, accountNavItems } = useNavItems();
   const router = useRouter();
+  const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
 
   return (
     <>
@@ -17,12 +19,14 @@ const NavigationMobile = () => {
           { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath.startsWith(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.startsWith(item.pathname) }/>) }
-        </VStack>
-      </Box>
-      <NavFooter/>
+      { isAuth && (
+        <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.startsWith(item.pathname) }/>) }
+          </VStack>
+        </Box>
+      ) }
+      <NavFooter isAuth={ isAuth }/>
     </>
   );
 };