add responsive menu

Author: warmijusti

ui/app/components/HankoAuthButton.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+const MOBILE_BREAKPOINT = 768;
+
 /**
  * React 15 wrapper for the <hotosm-auth> web component.
  *
@@ -8,14 +10,30 @@ import React from "react";
  * and configure the web component imperatively via a ref.
  */
 class HankoAuthButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile: window.innerWidth < MOBILE_BREAKPOINT,
+    };
+    this._handleResize = this._handleResize.bind(this);
+  }
+
   componentDidMount() {
+    window.addEventListener("resize", this._handleResize);
     this._renderWebComponent();
   }
 
   componentDidUpdate() {
     this._renderWebComponent();
   }
 
+  _handleResize() {
+    const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+    if (isMobile !== this.state.isMobile) {
+      this.setState({ isMobile });
+    }
+  }
+
   _renderWebComponent() {
     if (!this._container) return;
 
@@ -59,9 +77,12 @@ class HankoAuthButton extends React.Component {
     if (lang) {
       el.setAttribute("lang", lang);
     }
+
+    el.setAttribute("display", this.state.isMobile ? "bar" : "default");
   }
 
   componentWillUnmount() {
+    window.removeEventListener("resize", this._handleResize);
     if (this._element && this._container) {
       this._container.removeChild(this._element);
       this._element = null;

ui/app/components/NavBar.js

@@ -21,7 +21,9 @@ const NavBar = ({ isLoggedIn, login, logout, locale }) => (
           <span>Export Tool</span>
         </Link>
       </Navbar.Brand>
+      <Navbar.Toggle />
     </Navbar.Header>
+    <Navbar.Collapse>
     <Nav className="pull-right">
       <RequirePermission>
         <li>
@@ -155,6 +157,7 @@ const NavBar = ({ isLoggedIn, login, logout, locale }) => (
         </NavItem>
       )}
     </Nav>
+    </Navbar.Collapse>
   </Navbar>
 );
 

ui/app/css/style.css

@@ -45,6 +45,12 @@ a {
 
 /* nav styles */
 
+@media (max-width: 767px) {
+  .navbar-nav.pull-right {
+    float: none !important;
+  }
+}
+
 .navbar-header {
   padding-right: 21px;
   height: 63px;
@@ -1465,11 +1471,18 @@ p {
   margin-right: auto;
   justify-content: space-between;
 }
+
+
+/* mobile menu */
+.navbar-toggle {
+  border: 0;
+  margin-top: 16px;
+}
 /* hanko auth and tool menu */
 .navbar-nav > li > a.hotosm-tool-menu {
   display: none;
-  padding-top: 7px;
-  padding-bottom: 7px;
+  padding-top: 8px;
+  padding-bottom: 8px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -1479,7 +1492,12 @@ p {
   }
 }
 .navbar-nav > li > a.hotosm-auth {
-  padding-top: 7px;
-  padding-bottom: 7px;
+  padding: 0px;
+}
+@media (min-width: 992px) {
+  .navbar-nav > li > a.hotosm-auth {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
 }