a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove categories from header, add link targets

Browse Source
This commit is contained in:
Maciej Ziarkowski 2021-01-25 01:34:41 +00:00
parent 44a3725058
commit de2094eb29
1 changed files with 136 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
app/src/frontend/header.tsx
View File

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