fixed responsiveness in header on the countries page

[NidhiKJha]

Fixes #446

This pull request adds the responsiveness in mobile -view

1. Desktop-view
   

2. Mobile-view
   

[NidhiKJha]

@sarathms @hellais please review my pull request. My implementation differs a bit from the mockup you provided. Please let me know if you want me to change it. Thank you :)

[sarathms]

This is a great start. However, I think it would look better if we can align it with the mockups. Feel free to ask if you need help with anything.

To swap the position of the search input from right to left in the two layouts, you can use the order property of flexbox. I think I have used it in one other place in the codebase to achieve something similar for a mobile layout.

[sarathms]

Vertical spacing py can go one step higher here.

[NidhiKJha]

Sorry for the late follow up. I tried increasing the py but it was not going perfectly with the UI so I didn't change it.

[NidhiKJha]

Hi @sarathms ! I have made changes in the positioning of the search but without using order.(But thanks for mentioning the use of order I learnt it :p) Please let me know if I have missed something. Thank You :)

[NidhiKJha]

In the mockups, there is a underlining in the Africa. I tried to add it. But I couldn't. This was my approach. Please let me know how should I approach :)

const Underline = styled.span
  display: block;
  height: 2px;
  background: ${props => props.theme.colors.blue5};
  width: ${props => props.active ? '100%' : '0px'};
`

const _RegionLink = ({ router, href, label }) => {
  const checkActive = href === router.asPath.replace('/countries', '')
  const [active, setActive] = React.useState(checkActive)
  console.log("test", href, active)

  return (
    <Box px={[1,3]} py={[2,4]}>
      <StyledRegionLink onClick={() => setActive(checkActive)} href={href}>
        <Text fontSize={[14, 20]}>{label}</Text>
        <Underline active={active}/>
      </StyledRegionLink>
    </Box>
  )
}

const RegionLink =  withRouter(_RegionLink) 

[sarathms]

In the mockups, there is a underlining in the Africa

The approach you mentioned above is also good and that's how the NavBar links are styled. Alternatively, you can try hover styling with border-bottom inside StyledRegionLink but applied to its child Text
Something like this:

const StyledRegionLink = styled.a`
  ...
  & > ${Text}:hover {
     display: inline;
     border-bottom: 2px solid ${blue5 color from theme};
  }
`

The display: inline is crucial.

[sarathms]

Thanks for putting this together @NidhiKJha. 👏 It wasn't trivial. I tried it and it looked quite close to the mockups. You seem to have got a hang of rebass 😸

I left a few comments to make improvements. You are right about the order. I didn't notice that the mockup placed the search input on the left in both layouts. I thought the change was only for mobile. My non-solution was overcomplicated! 😆

[NidhiKJha]

Hi @sarathms I have made all the changes suggested by you. Please review the pull request. Thanks :)

[sarathms]

This looks good to merge. I fixed a few minor spacing issues and the jumping hover links. Thanks @NidhiKJha for working on this.