Fix Help Nav isActive Condition (#694)

* Update tab isActive Condition

Add condition to fix help tab appearing as active at `localhost:3000/`

* Shorten long variables

* Type nav tab links, clarify conditions.

common/components/Header/components/Navigation.tsx

@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
 import NavigationLink from './NavigationLink';
 import { knowledgeBaseURL } from 'config/data';
-
 import './Navigation.scss';
 
-const tabs = [
+export interface TabLink {
+  name: string;
+  to: string;
+  external?: boolean;
+}
+
+const tabs: TabLink[] = [
   {
     name: 'NAV_GenerateWallet',
     to: '/generate'

common/components/Header/components/NavigationLink.tsx

@@ -2,28 +2,29 @@ import classnames from 'classnames';
 import React from 'react';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import translate, { translateRaw } from 'translations';
+import { TabLink } from './Navigation';
 import './NavigationLink.scss';
 
 interface Props extends RouteComponentProps<{}> {
-  link: {
+  link: TabLink;
-    name: string;
-    to?: string;
-    external?: boolean;
-  };
   isHomepage: boolean;
 }
 
 class NavigationLink extends React.Component<Props, {}> {
   public render() {
     const { link, location, isHomepage } = this.props;
-    // isActive if
+    const isExternalLink = link.to.includes('http');
-    // 1) Current path is the same as link
+    let isActive = false;
-    // 2) the first path is the same for both links (/account and /account/send)
+
-    // 3) we're at the root path and this is the "homepage" nav item
+    if (!isExternalLink) {
-    const isActive =
+      // isActive if
-      location.pathname === link.to ||
+      // 1) Current path is the same as link
-      (link.to && location.pathname.split('/')[1] === link.to.split('/')[1]) ||
+      // 2) the first path is the same for both links (/account and /account/send)
-      (isHomepage && location.pathname === '/');
+      // 3) we're at the root path and this is the "homepage" nav item
+      const isSubRoute = location.pathname.split('/')[1] === link.to.split('/')[1];
+      isActive =
+        location.pathname === link.to || isSubRoute || (isHomepage && location.pathname === '/');
+    }
 
     const linkClasses = classnames({
       'NavigationLink-link': true,