From 8fc44a45348945dd7a98f1187cca8aff1a7d655c Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 31 Jan 2018 10:52:57 -0800
Subject: [PATCH] added active styling to nav bar links
---
react/containers/NavBar/view.jsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx
index 5f76c61e..7ff11cf6 100644
--- a/react/containers/NavBar/view.jsx
+++ b/react/containers/NavBar/view.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
import Logo from 'components/Logo';
import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown';
import request from 'utils/request';
@@ -64,8 +64,8 @@ class NavBar extends React.Component {
<span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
</div>
<div className="nav-bar--right">
- <Link className="nav-bar-link link--nav-active" to="/">Publish</Link>
- <Link className="nav-bar-link link--nav" to="/about">About</Link>
+ <NavLink className="nav-bar-link link--nav" activeClassName="link--nav-active" to="/" exact={true}>Publish</NavLink>
+ <NavLink className="nav-bar-link link--nav" activeClassName="link--nav-active" to="/about">About</NavLink>
{ this.props.channelName ? (
<NavBarChannelDropdown
channelName={this.props.channelName}
@@ -74,7 +74,7 @@ class NavBar extends React.Component {
LOGOUT={LOGOUT}
/>
) : (
- <Link id="nav-bar-login-link" className="nav-bar-link link--nav" to="/login">Channel</Link>
+ <NavLink id="nav-bar-login-link" className="nav-bar-link link--nav" activeClassName="link--nav-active" to="/login">Channel</NavLink>
)}
</div>
</div>