AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Link component

Browse Source
This commit is contained in:
Tom Raithel
2017-02-21 21:54:38 +01:00
parent c0dd1809e3
commit f284b4b310
9 changed files with 76 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/components/Header.js
View File

@@ -1,19 +1,27 @@
import React from 'react';
import Link from './Link';
export default function Header({ navigate }) {
const handleClick = (pageName) => (e) => {
e.preventDefault();
navigate(pageName);
};
export default function Header() {
return (
<div className="branding">
<a onClick={handleClick('index')} className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
<Link pageName="index" className="branding__logo"><img src="/assets/logo.svg"/></Link>
<div className="branding__content">
<div className="nav">
<div onClick={handleClick('help')} className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
<div onClick={handleClick('overview')} className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
<div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
<div className="nav__item">
<Link pageName="help" className="icon-link">
<span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
</Link>
</div>
<div className="nav__item">
<Link pageName="overview" className="icon-link">
<span className="icon icon--overview icon-link__icon"></span>Technologies Overview
</Link>
</div>
<div className="nav__item">
<a className="icon-link" href="#todo">
<span className="icon icon--search icon-link__icon"></span>Search
</a>
</div>
</div>
</div>
</div>