import React from 'react'
import { NavLink } from 'gatsby'

import styles from './navigation.module.styl'

export default ({ sports }) => (
  <nav>
    <ol className={`${styles.sportsList}`}>
      {sports.map(({ node }, idx) => (
        <li key={idx} className={`${styles.sportItem}`}>
          <h3 className={styles.noMargin}>
            <NavLink
              to={`/${node.name}`}
              activeClassName={styles.active}
              className={styles.navLink}
            >
              {node.name}
            </NavLink>
          </h3>
          <ol className={`${styles.countriesList}`}>
            {node.countries.map((country, idx) => (
              <li key={idx} className={`${styles.countryItem}`}>
                <h3 className={styles.noMargin}>
                  <NavLink
                    to={`/${node.name}/${country.name}`}
                    activeClassName={styles.active}
                    className={styles.navLink}
                  >
                    {country.name}
                  </NavLink>
                </h3>
              </li>
            ))}
          </ol>
        </li>
      ))}
    </ol>
  </nav>
)

@@ -28,19 +28,16 @@
 mport %7B 
-Nav
 Link %7D f
@@ -49,16 +49,16 @@
 gatsby'%0A
+
 %0Aimport 
@@ -97,16 +97,800 @@
 .styl'%0A%0A
+// this is only active when the location pathname is exactly%0A// the same as the href.%0Aconst isActive = (%7B location, href %7D) =%3E %7B%0A  const decodedURI = decodeURI(location.pathname)%0A  const isCurrent = decodedURI === href%0A  return %7B%0A    className: %60$%7Bstyles.navLink%7D $%7BisCurrent ? styles.active : ''%7D%60%0A  %7D%0A%7D%0Aconst ExactNavLink = props =%3E %3CLink getProps=%7BisActive%7D %7B...props%7D /%3E%0A%0A// this link will be active when itself or deeper routes%0A// are current%0Aconst isPartiallyActive = (%7B location, href %7D) =%3E %7B%0A  const decodedURI = decodeURI(location.pathname)%0A  const isPartiallyCurrent = decodedURI.startsWith(href)%0A  return %7B%0A    className: %60$%7Bstyles.navLink%7D $%7BisPartiallyCurrent ? styles.active : ''%7D%60%0A  %7D%0A%7D%0Aconst PartialNavLink = props =%3E %3CLink getProps=%7BisPartiallyActive%7D %7B...props%7D /%3E%0A%0A
 export d
@@ -1122,192 +1122,64 @@
    %3C
-NavLink%0A              to=%7B%60/$%7Bnode.name%7D%60%7D%0A              activeClassName=%7Bstyles.active%7D%0A              className=%7Bstyles.navLink%7D%0A            %3E%0A              %7Bnode.name%7D%0A            %3C/
+PartialNavLink to=%7B%60/$%7Bnode.name%7D%60%7D%3E%7Bnode.name%7D%3C/Partial
 NavL
@@ -1441,35 +1441,20 @@
    %3C
+Exact
 NavLink
-%0A                   
  to=
@@ -1490,126 +1490,8 @@
 e%7D%60%7D
-%0A                    activeClassName=%7Bstyles.active%7D%0A                    className=%7Bstyles.navLink%7D%0A                  
 %3E%0A  
@@ -1523,16 +1523,16 @@
 y.name%7D%0A
-
         
@@ -1543,16 +1543,21 @@
       %3C/
+Exact
 NavLink%3E

Remove NavLink: unexistent in v2; Create two auxiliary components to apply the correct CSS class(es) to the links.