embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1005 from embark-framework/feature/highlight-header 

Highlight header tab
This commit is contained in:
Iuri Matias 2018-10-30 17:44:08 +01:00 committed by GitHub
parent 473b6fc0ee 0671da2347
commit 10ccb9489f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
embark-ui/src/components/Layout.css
View File

@ -1,3 +1,11 @@
.sidebar-minimizer { .header-nav .active {
display: block !important; color: black !important;
font-weight: bold;
text-decoration: underline;
}
.dark-theme .header-nav .active {
color: white !important;
font-weight: bold;
text-decoration: underline;
} }

6
embark-ui/src/components/Layout.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import {NavLink as RNavLink} from 'react-router-dom';
import {Link, withRouter} from 'react-router-dom'; import {Link, withRouter} from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
@ -36,6 +37,7 @@ import {searchResult} from "../reducers/selectors";
import SearchBar from './SearchBar'; import SearchBar from './SearchBar';
import logo from '../images/logo-new.svg'; import logo from '../images/logo-new.svg';
import './Layout.css';
const HEADER_NAV_ITEMS = [ const HEADER_NAV_ITEMS = [
{name: "Dashboard", to: "/embark", icon: 'tachometer'}, {name: "Dashboard", to: "/embark", icon: 'tachometer'},
@ -125,11 +127,11 @@ class Layout extends React.Component {
renderNav() { renderNav() {
return ( return (
<React.Fragment> <React.Fragment>
<Nav className="d-lg-down-none" navbar> <Nav className="header-nav d-lg-down-none" navbar>
{HEADER_NAV_ITEMS.map((item) => { {HEADER_NAV_ITEMS.map((item) => {
return ( return (
<NavItem className="px-3" key={item.to}> <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} /> <FontAwesome className="mr-2" name={item.icon} />
{item.name} {item.name}
</NavLink> </NavLink>