Rework main menu
This commit is contained in:
Tom Russell
parent
f03e2de1ec
commit
517e338f39
@ -6,38 +6,33 @@
|
||||
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 */
|
||||
}
|
||||
}
|
||||
.main-header .navbar {
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<NavLink to="/">
|
||||
<Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
|
||||
</NavLink>
|
||||
</span>
|
||||
<button className="navbar-toggler navbar-toggler-right" type="button"
|
||||
<header className="main-header navbar navbar-light">
|
||||
<div className="nav-header">
|
||||
<NavLink to="/">
|
||||
<Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
|
||||
</NavLink>
|
||||
<button className="navbar-toggler" type="button"
|
||||
onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
|
||||
Menu
|
||||
{
|
||||
@ -57,74 +55,115 @@ class Header extends React.Component<HeaderProps, HeaderState> {
|
||||
: <span className="close">×</span>
|
||||
}
|
||||
</button>
|
||||
<div 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’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>
|
||||
</li>
|
||||
{
|
||||
this.props.user?
|
||||
(
|
||||
<li className="nav-item">
|
||||
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Account <span className="shorten-username">({this.props.user.username})</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
):
|
||||
(
|
||||
<Fragment>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Log in
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Sign up
|
||||
</NavLink>
|
||||
</li>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<NavLink to="/data-extracts.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Downloads
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<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?
|
||||
(
|
||||
<li className="nav-item">
|
||||
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Account <span className="shorten-username">({this.props.user.username})</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
):
|
||||
(
|
||||
<Fragment>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Log in
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}>
|
||||
Sign up
|
||||
</NavLink>
|
||||
</li>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
<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’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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user