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;
top: 0;
left: 0;
height: 76px;
width: 100%;
background: #fff;
text-decoration: none;
box-shadow: 2px 0px 2px -2px #000;
}
@media (min-width: 768px){
@media (min-width: 990px){
.main-header {
width: 480px; /* to match .info-container menu width */
}
@ -19,25 +18,21 @@
.main-header.navbar {
padding: 0;
}
.main-header .navbar-brand {
margin: 12px;
.nav-header {
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;
}
.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;
margin: 0;
}
.navbar .navbar-toggler {
padding: .5rem .75rem .5rem .75rem;
margin-right: 12px;
}
.navbar .navbar-toggler-icon {
width: 1em;
@ -49,3 +44,23 @@
height: 1em;
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() {
return (
<header className="main-header">
<nav className="navbar navbar-light">
<span className="navbar-brand">
<header className="main-header navbar navbar-light">
<div className="nav-header">
<NavLink to="/">
<Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
</NavLink>
</span>
<button className="navbar-toggler navbar-toggler-right" type="button"
<button className="navbar-toggler" type="button"
onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
Menu&nbsp;
{
@ -57,48 +55,34 @@ class Header extends React.Component<HeaderProps, HeaderState> {
: <span className="close">&times;</span>
}
</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">
<li className="nav-item">
<NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
View/Edit Maps
</NavLink>
</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">
<NavLink to="/data-extracts.html" className="nav-link" onClick={this.handleNavigate}>
Downloads
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}>
Contact
<NavLink to="/showcase.html" className="nav-link" onClick={this.handleNavigate}>
Showcase
</NavLink>
</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?
(
@ -124,7 +108,62 @@ class Header extends React.Component<HeaderProps, HeaderState> {
)
}
</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>
</header>
);