Highlight header tab

This commit is contained in:
Anthony Laibe 2018-10-30 17:41:12 +01:00
parent 8c28a597d8
commit 0671da2347
2 changed files with 14 additions and 4 deletions

View File

@ -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;
}

View File

@ -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>