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

Rework main menu

Browse Source
This commit is contained in:
Tom Russell 2020-02-03 21:24:14 +00:00
parent f03e2de1ec
commit 517e338f39
2 changed files with 149 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/src/frontend/header.css
View File

@ -6,38 +6,33 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 76px;
width: 100%; width: 100%;
background: #fff;
text-decoration: none; text-decoration: none;
box-shadow: 2px 0px 2px -2px #000;
} }
@media (min-width: 768px){ @media (min-width: 990px){
.main-header { .main-header {
width: 480px; /* to match .info-container menu width */ width: 480px; /* to match .info-container menu width */
} }
} }
.main-header .navbar { .main-header.navbar {
padding: 0; padding: 0;
} }
.main-header .navbar-brand { .nav-header {
margin: 12px; z-index: 1;
display: flex;
justify-content: space-between;
width: 100%;
padding: 12px;
background: #fff;
border-right: 1px solid #000;
}
.nav-header a {
padding: 0; padding: 0;
} margin: 0;
.main-header .navbar-collapse {
height: calc(100vh - 76px);
overflow-y: auto;
transition: height 0.3s;
}
.navbar-collapse.collapse {
display: block ;
height: 0;
}
.navbar .nav-link {
padding: .5rem 1rem;
} }
.navbar .navbar-toggler { .navbar .navbar-toggler {
padding: .5rem .75rem .5rem .75rem; padding: .5rem .75rem .5rem .75rem;
margin-right: 12px;
} }
.navbar .navbar-toggler-icon { .navbar .navbar-toggler-icon {
width: 1em; width: 1em;
@ -49,3 +44,23 @@
height: 1em; height: 1em;
padding: 0 3px; padding: 0 3px;
} }
.main-header .navbar-collapse {
height: calc(100vh - 76px);
display: block;
overflow-y: auto;
transition: transform 0.3s;
transform: translateY(0);
background: #fff;
border-right: 1px solid #000;
}
.navbar-collapse.collapse {
transform: translateY(-100vh);
}
.navbar .nav-link {
padding: .5rem 1rem;
}
.navbar hr {
height: 2px;
width: auto;
margin: 1em;
}

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

@ -41,14 +41,12 @@ class Header extends React.Component<HeaderProps, HeaderState> {
render() { render() {
return ( return (
<header className="main-header"> <header className="main-header navbar navbar-light">
<nav className="navbar navbar-light"> <div className="nav-header">
<span className="navbar-brand"> <NavLink to="/">
<NavLink to="/"> <Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
<Logo variant={this.props.animateLogo ? 'animated' : 'default'}/> </NavLink>
</NavLink> <button className="navbar-toggler" type="button"
</span>
<button className="navbar-toggler navbar-toggler-right" type="button"
onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation"> onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
Menu&nbsp; Menu&nbsp;
{ {
@ -57,74 +55,115 @@ class Header extends React.Component<HeaderProps, HeaderState> {
: <span className="close">&times;</span> : <span className="close">&times;</span>
} }
</button> </button>
<div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}> </div>
<ul className="navbar-nav flex-column"> <nav className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<li className="nav-item"> <ul className="navbar-nav flex-column">
<NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}> <li className="nav-item">
View/Edit Maps <NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
</NavLink> View/Edit Maps
</li> </NavLink>
<li className="nav-item"> </li>
<a className="nav-link" href="https://pages.colouring.london"> <li className="nav-item">
About <NavLink to="/data-extracts.html" className="nav-link" onClick={this.handleNavigate}>
</a> Downloads
</li> </NavLink>
<li className="nav-item"> </li>
<a className="nav-link" href="https://pages.colouring.london/buildingcategories"> <li className="nav-item">
Data Categories <NavLink to="/showcase.html" className="nav-link" onClick={this.handleNavigate}>
</a> Showcase
</li> </NavLink>
<li className="nav-item"> </li>
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved"> <li className="nav-item">
Who&rsquo;s Involved? <NavLink to="/leaderboards.html" className="nav-link" onClick={this.handleNavigate}>
</a> Leaderboards
</li> </NavLink>
<li className="nav-item"> </li>
<a className="nav-link" href="https://pages.colouring.london/data-ethics"> <li className="nav-item">
Data Ethics <a className="nav-link" href="https://discuss.colouring.london">
</a> Discuss
</li> </a>
<li className="nav-item"> </li>
<a className="nav-link" href="https://discuss.colouring.london"> {
Discuss this.props.user?
</a> (
</li> <li className="nav-item">
<li className="nav-item"> <NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/data-extracts.html" className="nav-link" onClick={this.handleNavigate}> Account <span className="shorten-username">({this.props.user.username})</span>
Downloads </NavLink>
</NavLink> </li>
</li> ):
<li className="nav-item"> (
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}> <Fragment>
Contact <li className="nav-item">
</NavLink> <NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}>
</li> Log in
{ </NavLink>
this.props.user? </li>
( <li className="nav-item">
<li className="nav-item"> <NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}>
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}> Sign up
Account <span className="shorten-username">({this.props.user.username})</span> </NavLink>
</NavLink> </li>
</li> </Fragment>
): )
( }
<Fragment> </ul>
<li className="nav-item"> <hr />
<NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}> <ul className="navbar-nav flex-column">
Log in <li className="nav-item">
</NavLink> <a className="nav-link" href="https://pages.colouring.london">
</li> About
<li className="nav-item"> </a>
<NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}> </li>
Sign up <li className="nav-item">
</NavLink> <a className="nav-link" href="https://pages.colouring.london/buildingcategories">
</li> Data Categories
</Fragment> </a>
) </li>
} <li className="nav-item">
</ul> <a className="nav-link" href="https://pages.colouring.london/whoisinvolved">
</div> Who&rsquo;s Involved?
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/data-ethics">
Data Ethics
</a>
</li>
</ul>
<hr />
<ul className="navbar-nav flex-column">
<li className="nav-item">
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}>
Contact
</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> </nav>
</header> </header>
); );