From 8452e231d8a2a94781e42c760ae8b93e20ed23a7 Mon Sep 17 00:00:00 2001
From: James Prado <james-prado@users.noreply.github.com>
Date: Mon, 1 Jan 2018 15:43:27 -0500
Subject: [PATCH] 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.
---
 .../Header/components/Navigation.tsx          |  9 +++++--
 .../Header/components/NavigationLink.tsx      | 27 ++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/common/components/Header/components/Navigation.tsx b/common/components/Header/components/Navigation.tsx
index ce8b58e1..655b14f4 100644
--- a/common/components/Header/components/Navigation.tsx
+++ b/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'
diff --git a/common/components/Header/components/NavigationLink.tsx b/common/components/Header/components/NavigationLink.tsx
index ecab5d69..6761fe58 100644
--- a/common/components/Header/components/NavigationLink.tsx
+++ b/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: {
-    name: string;
-    to?: string;
-    external?: boolean;
-  };
+  link: TabLink;
   isHomepage: boolean;
 }
 
 class NavigationLink extends React.Component<Props, {}> {
   public render() {
     const { link, location, isHomepage } = this.props;
-    // isActive if
-    // 1) Current path is the same as link
-    // 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
-    const isActive =
-      location.pathname === link.to ||
-      (link.to && location.pathname.split('/')[1] === link.to.split('/')[1]) ||
-      (isHomepage && location.pathname === '/');
+    const isExternalLink = link.to.includes('http');
+    let isActive = false;
+
+    if (!isExternalLink) {
+      // isActive if
+      // 1) Current path is the same as link
+      // 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
+      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,