From cb3186395d2f83050cf63f61230e0dc5f5202598 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Aug 2018 08:51:20 +0200
Subject: [PATCH] Added burguer icon to show sidebar on mobile devices

---
 package.json               |  1 +
 src/common/MainHeader.js   | 11 ++++-
 src/common/MainHeader.scss |  8 ++++
 src/common/MenuLayout.js   | 84 ++++++++++++++++++++++----------------
 src/common/MenuLayout.scss | 21 ++++++++++
 src/index.scss             |  7 ++++
 yarn.lock                  |  2 +-
 7 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 804f8756..53e04ed3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
+    "classnames": "^2.2.6",
     "moment": "^2.22.2",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
index d896bd5f..54261623 100644
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -1,4 +1,5 @@
 import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Link, withRouter } from 'react-router-dom'
@@ -6,6 +7,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
 import ServersDropdown from '../servers/ServersDropdown';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
+import classnames from 'classnames';
 
 export class MainHeader extends React.Component {
   state = { isOpen: false };
@@ -24,13 +26,20 @@ export class MainHeader extends React.Component {
   render() {
     const { location } = this.props;
     const createServerPath = '/server/create';
+    const toggleClass = classnames('main-header__toggle-icon', {
+      'main-header__toggle-icon--opened': this.state.isOpen,
+    });
 
     return (
       <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
         <NavbarBrand tag={Link} to="/">
           <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
         </NavbarBrand>
-        <NavbarToggler onClick={this.toggle} />
+
+        <NavbarToggler onClick={this.toggle}>
+          <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
+        </NavbarToggler>
+
         <Collapse navbar isOpen={this.state.isOpen}>
           <Nav navbar className="ml-auto">
             <NavItem>
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 9c2dca92..61ef23bb 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -13,3 +13,11 @@
   width: 26px;
   margin-right: 5px;
 }
+
+.main-header__toggle-icon {
+  width: 20px;
+  transition: transform 300ms;
+}
+.main-header__toggle-icon--opened {
+  transform: rotate(180deg);
+}
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index f999483d..c6076794 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -9,6 +9,9 @@ import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
 import AsideMenu from './AsideMenu';
 import { pick } from 'ramda';
 import Swipeable from 'react-swipeable';
+import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
 import './MenuLayout.scss';
 
 export class MenuLayout extends React.Component {
@@ -31,44 +34,55 @@ export class MenuLayout extends React.Component {
 
   render() {
     const { selectedServer } = this.props;
+    const burgerClasses = classnames('menu-layout__burger-icon', {
+      'menu-layout__burger-icon--active': this.state.showSideBar,
+    });
 
     return (
-      <Swipeable
-        delta={40}
-        onSwipedLeft={() => this.setState({ showSideBar: false })}
-        onSwipedRight={() => this.setState({ showSideBar: true })}
-        className="menu-layout__swipeable"
-      >
-        <div className="row menu-layout__swipeable-inner">
-          <AsideMenu
-            className="col-lg-2 col-md-3"
-            selectedServer={selectedServer}
-            showOnMobile={this.state.showSideBar}
-          />
-          <div
-            className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-            onClick={() => this.setState({ showSideBar: false })}
-          >
-            <Switch>
-              <Route
-                exact
-                path="/server/:serverId/list-short-urls/:page"
-                component={ShortUrls}
-              />
-              <Route
-                exact
-                path="/server/:serverId/create-short-url"
-                component={CreateShortUrl}
-              />
-              <Route
-                exact
-                path="/server/:serverId/short-code/:shortCode/visits"
-                component={ShortUrlsVisits}
-              />
-            </Switch>
+      <React.Fragment>
+        <FontAwesomeIcon
+          icon={burgerIcon}
+          className={burgerClasses}
+          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
+        />
+
+        <Swipeable
+          delta={40}
+          onSwipedLeft={() => this.setState({ showSideBar: false })}
+          onSwipedRight={() => this.setState({ showSideBar: true })}
+          className="menu-layout__swipeable"
+        >
+          <div className="row menu-layout__swipeable-inner">
+            <AsideMenu
+              className="col-lg-2 col-md-3"
+              selectedServer={selectedServer}
+              showOnMobile={this.state.showSideBar}
+            />
+            <div
+              className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
+              onClick={() => this.setState({ showSideBar: false })}
+            >
+              <Switch>
+                <Route
+                  exact
+                  path="/server/:serverId/list-short-urls/:page"
+                  component={ShortUrls}
+                />
+                <Route
+                  exact
+                  path="/server/:serverId/create-short-url"
+                  component={CreateShortUrl}
+                />
+                <Route
+                  exact
+                  path="/server/:serverId/short-code/:shortCode/visits"
+                  component={ShortUrlsVisits}
+                />
+              </Switch>
+            </div>
           </div>
-        </div>
-      </Swipeable>
+        </Swipeable>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss
index ad05ef23..724291da 100644
--- a/src/common/MenuLayout.scss
+++ b/src/common/MenuLayout.scss
@@ -1,3 +1,5 @@
+@import '../utils/base';
+
 .menu-layout__swipeable {
   $offset: 15px;
   height: 100%;
@@ -10,3 +12,22 @@
 .menu-layout__swipeable-inner {
   height: 100%;
 }
+
+.menu-layout__burger-icon {
+  display: none;
+  transition: color 300ms;
+  position: fixed;
+  top: 18px;
+  z-index: 1035;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: rgba(255,255,255,.5);
+
+  @media (max-width: $smMax) {
+    display: inline-block;
+  }
+}
+
+.menu-layout__burger-icon--active {
+  color: white;
+}
diff --git a/src/index.scss b/src/index.scss
index 2dc3857f..9e7eb41f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -42,3 +42,10 @@ body,
 .react-datepicker-wrapper {
   display: block !important;
 }
+
+.navbar-brand {
+  @media (max-width: $smMax) {
+    margin-right: auto !important; // This is needed to override a third party style
+    margin: 0 auto;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 85ebf0a4..0991aac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1555,7 +1555,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"