Added burguer icon to show sidebar on mobile devices

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",

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>

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);
+}

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,8 +34,18 @@ 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 (
+      <React.Fragment>
+        <FontAwesomeIcon
+          icon={burgerIcon}
+          className={burgerClasses}
+          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
+        />
+
         <Swipeable
           delta={40}
           onSwipedLeft={() => this.setState({ showSideBar: false })}
@@ -69,6 +82,7 @@ export class MenuLayout extends React.Component {
             </div>
           </div>
         </Swipeable>
+      </React.Fragment>
     );
   }
 }

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;
+}

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;
+  }
+}

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"