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

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

@ -6,12 +6,11 @@
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 */
} }
@ -19,25 +18,21 @@
.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;
}

107
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>
</span> <button className="navbar-toggler" type="button"
<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,48 +55,34 @@ 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>
<nav className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<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={this.handleNavigate}>
View/Edit Maps View/Edit Maps
</NavLink> </NavLink>
</li> </li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london">
About
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories">
Data Categories
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved">
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>
<li className="nav-item">
<a className="nav-link" href="https://discuss.colouring.london">
Discuss
</a>
</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={this.handleNavigate}>
Downloads Downloads
</NavLink> </NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}> <NavLink to="/showcase.html" className="nav-link" onClick={this.handleNavigate}>
Contact Showcase
</NavLink> </NavLink>
</li> </li>
<li className="nav-item">
<NavLink to="/leaderboards.html" className="nav-link" onClick={this.handleNavigate}>
Leaderboards
</NavLink>
</li>
<li className="nav-item">
<a className="nav-link" href="https://discuss.colouring.london">
Discuss
</a>
</li>
{ {
this.props.user? this.props.user?
( (
@ -124,7 +108,62 @@ class Header extends React.Component<HeaderProps, HeaderState> {
) )
} }
</ul> </ul>
</div> <hr />
<ul className="navbar-nav flex-column">
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london">
About
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories">
Data Categories
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved">
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>
); );