Commit f05c6d41 authored by tom's avatar tom

fix footer placement

parent 15bb8d9a
...@@ -60,9 +60,14 @@ const Page = ({ ...@@ -60,9 +60,14 @@ const Page = ({
) : children; ) : children;
return ( return (
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="flex-start">
<NavigationDesktop/> <NavigationDesktop/>
<Flex flexDir="column" flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}> <Flex
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,18 +20,10 @@ const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig. ...@@ -20,18 +20,10 @@ const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.
interface Props { interface Props {
isCollapsed?: boolean; isCollapsed?: boolean;
hasAccount?: boolean;
} }
const NavFooter = ({ isCollapsed, hasAccount }: Props) => { const NavFooter = ({ isCollapsed }: Props) => {
const isExpanded = isCollapsed === false; const isExpanded = isCollapsed === false;
const marginTop = (() => {
if (!hasAccount) {
return 'auto';
}
return { base: 6, lg: 20 };
})();
return ( return (
<VStack <VStack
...@@ -39,7 +31,7 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => { ...@@ -39,7 +31,7 @@ const NavFooter = ({ isCollapsed, hasAccount }: 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={ marginTop } marginTop="auto"
alignItems="flex-start" alignItems="flex-start"
alignSelf="center" alignSelf="center"
color="gray.500" color="gray.500"
......
...@@ -54,10 +54,9 @@ const NavigationDesktop = () => { ...@@ -54,10 +54,9 @@ 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' }) }
> >
...@@ -91,13 +90,13 @@ const NavigationDesktop = () => { ...@@ -91,13 +90,13 @@ const NavigationDesktop = () => {
</VStack> </VStack>
</Box> </Box>
{ hasAccount && ( { hasAccount && (
<Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }> <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 } mb={ 20 }>
<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 } hasAccount={ hasAccount }/> <NavFooter isCollapsed={ isCollapsed }/>
<Icon <Icon
as={ chevronIcon } as={ chevronIcon }
width={ 6 } width={ 6 }
......
...@@ -71,6 +71,7 @@ const NavigationMobile = () => { ...@@ -71,6 +71,7 @@ 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"
...@@ -80,7 +81,7 @@ const NavigationMobile = () => { ...@@ -80,7 +81,7 @@ const NavigationMobile = () => {
</VStack> </VStack>
</Box> </Box>
) } ) }
<NavFooter hasAccount={ hasAccount }/> <NavFooter/>
</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