Commit 68176c65 authored by tom's avatar tom

Revert "fix footer placement"

This reverts commit f05c6d41.
parent 6f66908c
...@@ -60,14 +60,9 @@ const Page = ({ ...@@ -60,14 +60,9 @@ const Page = ({
) : children; ) : children;
return ( return (
<Flex w="100%" minH="100vh" alignItems="flex-start"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Flex <Flex flexDir="column" flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}>
flexDir="column"
flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}
borderLeft="1px solid"
borderColor="divider"
>
{ renderHeader ? { renderHeader ?
renderHeader() : renderHeader() :
<Header isHomePage={ isHomePage }/> <Header isHomePage={ isHomePage }/>
......
...@@ -20,10 +20,18 @@ const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig. ...@@ -20,10 +20,18 @@ const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.
interface Props { interface Props {
isCollapsed?: boolean; isCollapsed?: boolean;
hasAccount?: boolean;
} }
const NavFooter = ({ isCollapsed }: Props) => { const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
const isExpanded = isCollapsed === false; const isExpanded = isCollapsed === false;
const marginTop = (() => {
if (!hasAccount) {
return 'auto';
}
return { base: 6, lg: 20 };
})();
return ( return (
<VStack <VStack
...@@ -31,7 +39,7 @@ const NavFooter = ({ isCollapsed }: Props) => { ...@@ -31,7 +39,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
borderTop="1px solid" borderTop="1px solid"
borderColor="divider" borderColor="divider"
width={{ base: '100%', lg: isExpanded ? '180px' : '20px', xl: isCollapsed ? '20px' : '180px' }} width={{ base: '100%', lg: isExpanded ? '180px' : '20px', xl: isCollapsed ? '20px' : '180px' }}
marginTop="auto" marginTop={ marginTop }
alignItems="flex-start" alignItems="flex-start"
alignSelf="center" alignSelf="center"
color="gray.500" color="gray.500"
......
...@@ -54,9 +54,10 @@ const NavigationDesktop = () => { ...@@ -54,9 +54,10 @@ const NavigationDesktop = () => {
position="relative" position="relative"
flexDirection="column" flexDirection="column"
alignItems="stretch" alignItems="stretch"
borderRight="1px solid"
borderColor="divider"
px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }} px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
py={ 12 } py={ 12 }
minH="100vh"
width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }} width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
{ ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) } { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
> >
...@@ -90,13 +91,13 @@ const NavigationDesktop = () => { ...@@ -90,13 +91,13 @@ const NavigationDesktop = () => {
</VStack> </VStack>
</Box> </Box>
{ hasAccount && ( { hasAccount && (
<Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 } mb={ 20 }> <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
<VStack as="ul" spacing="1" alignItems="flex-start"> <VStack as="ul" spacing="1" alignItems="flex-start">
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) } { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
</VStack> </VStack>
</Box> </Box>
) } ) }
<NavFooter isCollapsed={ isCollapsed }/> <NavFooter isCollapsed={ isCollapsed } hasAccount={ hasAccount }/>
<Icon <Icon
as={ chevronIcon } as={ chevronIcon }
width={ 6 } width={ 6 }
......
...@@ -71,7 +71,6 @@ const NavigationMobile = () => { ...@@ -71,7 +71,6 @@ const NavigationMobile = () => {
<Box <Box
as="nav" as="nav"
mt={ 6 } mt={ 6 }
mb={ 6 }
pt={ 6 } pt={ 6 }
borderTopWidth="1px" borderTopWidth="1px"
borderColor="divider" borderColor="divider"
...@@ -81,7 +80,7 @@ const NavigationMobile = () => { ...@@ -81,7 +80,7 @@ const NavigationMobile = () => {
</VStack> </VStack>
</Box> </Box>
) } ) }
<NavFooter/> <NavFooter hasAccount={ hasAccount }/>
</Box> </Box>
{ openedGroupIndex >= 0 && ( { openedGroupIndex >= 0 && (
<Box <Box
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment