Skip to content

F
frontend
Commit 68faa11d authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Merge pull request #179 from blockscout/fix-nav 

fix nav links
parents a35ccaa3 695cc0c2
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 30 deletions
ui/blocks/navigation/NavLink.tsx
View file @ 68faa11d
import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react'; import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import React from 'react'; import React from 'react';
...@@ -28,36 +28,37 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px }: Props) => { ...@@ -28,36 +28,37 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px }: Props) => {
})(); })();
return ( return (
<NextLink href={ url } passHref> <Box as="li" listStyleType="none" w="100%">
<Link <NextLink href={ url } passHref>
as="li" <Link
listStyleType="none" w={ width }
w={ width } px={ px || (isCollapsed ? '15px' : 3) }
px={ px || (isCollapsed ? '15px' : 3) } py={ 2.5 }
py={ 2.5 } display="flex"
color={ isActive ? colors.text.active : colors.text.default } color={ isActive ? colors.text.active : colors.text.default }
bgColor={ isActive ? colors.bg.active : colors.bg.default } bgColor={ isActive ? colors.bg.active : colors.bg.default }
_hover={{ color: isActive ? colors.text.active : colors.text.hover }} _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
borderRadius="base" borderRadius="base"
whiteSpace="nowrap" whiteSpace="nowrap"
{ ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) } { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
>
<Tooltip
label={ text }
hasArrow={ false }
isDisabled={ !isCollapsed }
placement="right"
variant="nav"
gutter={ 15 }
color={ isActive ? colors.text.active : colors.text.hover }
> >
<HStack spacing={ 3 }> <Tooltip
<Icon as={ icon } boxSize="30px"/> label={ text }
{ !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> } hasArrow={ false }
</HStack> isDisabled={ !isCollapsed }
</Tooltip> placement="right"
</Link> variant="nav"
</NextLink> gutter={ 15 }
color={ isActive ? colors.text.active : colors.text.hover }
>
<HStack spacing={ 3 }>
<Icon as={ icon } boxSize="30px"/>
{ !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> }
</HStack>
</Tooltip>
</Link>
</NextLink>
</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