From 517e338f398112710239538e7304de0a04651301 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 3 Feb 2020 21:24:14 +0000
Subject: [PATCH] Rework main menu

---
 app/src/frontend/header.css |  53 ++++++----
 app/src/frontend/header.tsx | 191 ++++++++++++++++++++++--------------
 2 files changed, 149 insertions(+), 95 deletions(-)

diff --git a/app/src/frontend/header.css b/app/src/frontend/header.css
index 2e5500b5..9d9dc16d 100644
--- a/app/src/frontend/header.css
+++ b/app/src/frontend/header.css
@@ -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;
+}
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index ba750be2..21478915 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -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&nbsp;
                         {
@@ -57,74 +55,115 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                                 : <span className="close">&times;</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&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>
-                            </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&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>
         );