navigation - Fix active check

Earlier it could match too much (i.e. /concepts/configuration
highlighted both concepts and configuration). I also dropped dependency
on `window`.

As a side benefit navigation highlight works in development mode now as
well.

Author: bebraw

components/navigation/navigation.jsx

@@ -6,13 +6,7 @@ import './navigation-style';
 
 export default class Navigation extends React.Component {
   render() {
-    let pathname = '';
-    let isIndex = false;
-
-    if (typeof window !== 'undefined') {
-      pathname = window.location.pathname;
-      isIndex = pathname === '' || pathname === '/';
-    }
+    const { pageUrl, sections } = this.props;
 
     return (
       <header className="navigation">
@@ -27,8 +21,8 @@ export default class Navigation extends React.Component {
 
           <nav className="navigation__links">
             {
-              this.props.sections.filter(section => section.title !== 'Other').map((link, i) => {
-                let active = pathname === `/${link.url}` || pathname.includes(`/${link.url}/`);
+              sections.filter(section => section.title !== 'Other').map((link, i) => {
+                let active = pageUrl.includes(`${link.url}/`);
                 let activeClass = active ? 'navigation__link--active' : '';
 
                 return (

components/site/site.jsx

@@ -30,7 +30,8 @@ export default props => {
       <Interactive
         id="components/navigation/navigation.jsx"
         component={ Navigation }
-        sections={ sections } />
+        sections={ sections }
+        pageUrl={ props.children.props.page.url } />
 
       <Interactive
         id="components/sidebar-mobile/sidebar-mobile.jsx"