From 0671da23478b32694b61e66c17d851dfdcb75afe Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Tue, 30 Oct 2018 17:41:12 +0100
Subject: [PATCH] Highlight header tab

---
 embark-ui/src/components/Layout.css | 12 ++++++++++--
 embark-ui/src/components/Layout.js  |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/embark-ui/src/components/Layout.css b/embark-ui/src/components/Layout.css
index 87feec1c4..c109c7b40 100644
--- a/embark-ui/src/components/Layout.css
+++ b/embark-ui/src/components/Layout.css
@@ -1,3 +1,11 @@
-.sidebar-minimizer {
-  display: block !important; 
+.header-nav .active {
+  color: black !important;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.dark-theme .header-nav .active {
+  color: white !important;
+  font-weight: bold;
+  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index ce24961d4..c36b92e76 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {NavLink as RNavLink} from 'react-router-dom';
 import {Link, withRouter} from 'react-router-dom';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
@@ -36,6 +37,7 @@ import {searchResult} from "../reducers/selectors";
 import SearchBar from './SearchBar';
 
 import logo from '../images/logo-new.svg';
+import './Layout.css';
 
 const HEADER_NAV_ITEMS = [
   {name: "Dashboard", to: "/embark", icon: 'tachometer'},
@@ -125,11 +127,11 @@ class Layout extends React.Component {
   renderNav() {
     return (
       <React.Fragment>
-        <Nav className="d-lg-down-none" navbar>
+        <Nav className="header-nav d-lg-down-none" navbar>
           {HEADER_NAV_ITEMS.map((item) => {
             return (
               <NavItem className="px-3" key={item.to}>
-                <NavLink tag={Link} to={item.to}>
+                <NavLink exact activeClassName="active" tag={RNavLink} to={item.to}>
                   <FontAwesome className="mr-2" name={item.icon} />
                   {item.name}
                 </NavLink>