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

81
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,61 +12,42 @@ 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
})); const handleClick = () => setCollapseMenu(!collapseMenu);
} const handleNavigate = () => setCollapseMenu(true);
handleNavigate() {
this.setState({
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> </NavLink>
<button className="navbar-toggler" type="button" <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; Menu&nbsp;
{ {
this.state.collapseMenu ? collapseMenu ?
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
: <span className="close">&times;</span> : <span className="close">&times;</span>
} }
</button> </button>
</div> </div>
<nav className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}> <nav className={collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<Categories mode='view' />
<hr />
<ul className="navbar-nav flex-column"> <ul className="navbar-nav flex-column">
<li className="nav-item"> <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 View/Edit Maps
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Downloads
</NavLink> </NavLink>
</li> </li>
@ -79,33 +59,33 @@ class Header extends React.Component<HeaderProps, HeaderState> {
</li> </li>
*/} */}
<li className="nav-item"> <li className="nav-item">
<NavLink to="/leaderboard.html" className="nav-link" onClick={this.handleNavigate}> <NavLink to="/leaderboard.html" className="nav-link" onClick={handleNavigate}>
Leaderboard Leaderboard
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Discuss
</a> </a>
</li> </li>
{ {
this.props.user? props.user?
( (
<li className="nav-item"> <li className="nav-item">
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}> <NavLink to="/my-account.html" className="nav-link" onClick={handleNavigate}>
Account <span className="shorten-username">({this.props.user.username})</span> Account <span className="shorten-username">({props.user.username})</span>
</NavLink> </NavLink>
</li> </li>
): ):
( (
<Fragment> <Fragment>
<li className="nav-item"> <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 Log in
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Sign up
</NavLink> </NavLink>
</li> </li>
@ -116,27 +96,27 @@ class Header extends React.Component<HeaderProps, HeaderState> {
<hr /> <hr />
<ul className="navbar-nav flex-column"> <ul className="navbar-nav flex-column">
<li className="nav-item"> <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 About
</a> </a>
</li> </li>
<li className="nav-item"> <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 Data Categories
</a> </a>
</li> </li>
<li className="nav-item"> <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? Who&rsquo;s Involved?
</a> </a>
</li> </li>
<li className="nav-item"> <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 Data Ethics
</a> </a>
</li> </li>
<li className="nav-item"> <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 Colouring Cities Research Programme
</a> </a>
</li> </li>
@ -144,32 +124,32 @@ class Header extends React.Component<HeaderProps, HeaderState> {
<hr /> <hr />
<ul className="navbar-nav flex-column"> <ul className="navbar-nav flex-column">
<li className="nav-item"> <li className="nav-item">
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}> <NavLink to="/contact.html" className="nav-link" onClick={handleNavigate}>
Contact Contact
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Privacy Policy
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Contributor Agreement
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Code of Conduct
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Data Accuracy Agreement
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <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 Ordnance Survey terms of UPRN usage
</NavLink> </NavLink>
</li> </li>
@ -177,7 +157,6 @@ class Header extends React.Component<HeaderProps, HeaderState> {
</nav> </nav>
</header> </header>
); );
}
} }
export default Header; export default Header;