Remove categories from header, add link targets

This commit is contained in:
Maciej Ziarkowski 2021-01-25 01:34:41 +00:00
parent 44a3725058
commit de2094eb29

View File

@ -1,11 +1,10 @@
import React, { Fragment } from 'react';
import React, { Fragment, useState } from 'react';
import { NavLink } from 'react-router-dom';
import './header.css';
import { Logo } from './components/logo';
import { User } from './models/user';
import Categories from './building/categories';
interface HeaderProps {
@ -13,61 +12,42 @@ interface HeaderProps {
animateLogo: boolean;
}
interface HeaderState {
collapseMenu: boolean;
}
/**
* Render the main header using a responsive design
*/
class Header extends React.Component<HeaderProps, HeaderState> {
constructor(props) {
super(props);
this.state = {collapseMenu: true};
this.handleClick = this.handleClick.bind(this);
this.handleNavigate = this.handleNavigate.bind(this);
}
handleClick() {
this.setState(state => ({
collapseMenu: !state.collapseMenu
}));
}
const Header : React.FC<HeaderProps> = (props) => {
const [collapseMenu, setCollapseMenu] = useState(true);
const handleClick = () => setCollapseMenu(!collapseMenu);
const handleNavigate = () => setCollapseMenu(true);
handleNavigate() {
this.setState({
collapseMenu: true
});
}
render() {
return (
<header className="main-header navbar navbar-light">
<div className="nav-header">
<NavLink to="/">
<Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
<Logo variant={props.animateLogo ? 'animated' : 'default'}/>
</NavLink>
<button className="navbar-toggler" type="button"
onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
onClick={handleClick} aria-expanded={!collapseMenu} aria-label="Toggle navigation">
Menu&nbsp;
{
this.state.collapseMenu ?
collapseMenu ?
<span className="navbar-toggler-icon"></span>
: <span className="close">&times;</span>
}
</button>
</div>
<nav className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<Categories mode='view' />
<hr />
<nav className={collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<ul className="navbar-nav flex-column">
<li className="nav-item">
<NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/view/categories" className="nav-link" onClick={handleNavigate}>
View/Edit Maps
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/data-extracts.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/data-extracts.html" className="nav-link" onClick={handleNavigate}>
Downloads
</NavLink>
</li>
@ -79,33 +59,33 @@ class Header extends React.Component<HeaderProps, HeaderState> {
</li>
*/}
<li className="nav-item">
<NavLink to="/leaderboard.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/leaderboard.html" className="nav-link" onClick={handleNavigate}>
Leaderboard
</NavLink>
</li>
<li className="nav-item">
<a className="nav-link" href="https://discuss.colouring.london">
<a className="nav-link" href="https://discuss.colouring.london" target="_blank">
Discuss
</a>
</li>
{
this.props.user?
props.user?
(
<li className="nav-item">
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}>
Account <span className="shorten-username">({this.props.user.username})</span>
<NavLink to="/my-account.html" className="nav-link" onClick={handleNavigate}>
Account <span className="shorten-username">({props.user.username})</span>
</NavLink>
</li>
):
(
<Fragment>
<li className="nav-item">
<NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/login.html" className="nav-link" onClick={handleNavigate}>
Log in
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/sign-up.html" className="nav-link" onClick={handleNavigate}>
Sign up
</NavLink>
</li>
@ -116,27 +96,27 @@ class Header extends React.Component<HeaderProps, HeaderState> {
<hr />
<ul className="navbar-nav flex-column">
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london">
<a className="nav-link" href="https://pages.colouring.london" target="_blank">
About
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories" target="_blank">
Data Categories
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved" target="_blank">
Who&rsquo;s Involved?
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/data-ethics">
<a className="nav-link" href="https://pages.colouring.london/data-ethics" target="_blank">
Data Ethics
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/colouring-cities">
<a className="nav-link" href="https://pages.colouring.london/colouring-cities" target="_blank">
Colouring Cities Research Programme
</a>
</li>
@ -144,32 +124,32 @@ class Header extends React.Component<HeaderProps, HeaderState> {
<hr />
<ul className="navbar-nav flex-column">
<li className="nav-item">
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/contact.html" className="nav-link" onClick={handleNavigate}>
Contact
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/privacy-policy.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/privacy-policy.html" className="nav-link" onClick={handleNavigate}>
Privacy Policy
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/contributor-agreement.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/contributor-agreement.html" className="nav-link" onClick={handleNavigate}>
Contributor Agreement
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/code-of-conduct.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/code-of-conduct.html" className="nav-link" onClick={handleNavigate}>
Code of Conduct
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/data-accuracy.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/data-accuracy.html" className="nav-link" onClick={handleNavigate}>
Data Accuracy Agreement
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/ordnance-survey-uprn.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/ordnance-survey-uprn.html" className="nav-link" onClick={handleNavigate}>
Ordnance Survey terms of UPRN usage
</NavLink>
</li>
@ -178,6 +158,5 @@ class Header extends React.Component<HeaderProps, HeaderState> {
</header>
);
}
}
export default Header;