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

WIP: Search form in header bar

Browse Source
This commit is contained in:
Tom Raithel
2017-03-20 22:47:46 +01:00
parent 7a6f2d97ac
commit fd029dad9e
7 changed files with 138 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
js/components/Header.js
View File

@@ -1,34 +1,68 @@
import React from 'react';
import classNames from 'classnames';
import Branding from './Branding';
import Link from './Link';
import LogoLink from './LogoLink';
import Search from './Search';
import { getItemPageNames } from '../../common/config';
export default function Header({ pageName }) {
class Header extends React.Component {
constructor(...args) {
super(...args);
this.state = {
searchOpen: false,
};
}
const smallLogo = pageName !== 'index';
openSearch = () => {
this.setState({
searchOpen: true,
});
}
return (
<Branding
logoContent={<LogoLink small={smallLogo} />}
>
<div className="nav">
<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>
closeSearch = () => {
this.setState({
searchOpen: false,
});
}
handleOpenClick = (e) => {
e.preventDefault();
this.openSearch();
}
render() {
const { pageName } = this.props;
const { searchOpen } = this.state;
const smallLogo = pageName !== 'index';
return (
<Branding
logoContent={<LogoLink small={smallLogo} />}
>
<div className="nav">
<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="#" onClick={this.handleOpenClick}>
<span className="icon icon--search icon-link__icon"></span>Search
</a>
<div className={classNames('nav__search', { 'is-open': searchOpen })}>
<Search onClose={this.closeSearch} open={searchOpen} />
</div>
</div>
</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>
</Branding>
);
</Branding>
);
}
}
export default Header;