status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-02-08 17:24:30 +00:00
Code Issues Projects Releases Wiki Activity

Fix Help Nav isActive Condition (#694)

Browse Source 
* 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.
This commit is contained in:
James Prado 2018-01-01 15:43:27 -05:00 committed by Daniel Ternyak
parent 371e6e327c
commit 8452e231d8
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/components/Header/components/Navigation.tsx
View File

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

19
common/components/Header/components/NavigationLink.tsx
View File

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