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,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
+      <React.Fragment>
-        delta={40}
+        <FontAwesomeIcon
-        onSwipedLeft={() => this.setState({ showSideBar: false })}
+          icon={burgerIcon}
-        onSwipedRight={() => this.setState({ showSideBar: true })}
+          className={burgerClasses}
-        className="menu-layout__swipeable"
+          onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
-      >
+        />
-        <div className="row menu-layout__swipeable-inner">
+
-          <AsideMenu
+        <Swipeable
-            className="col-lg-2 col-md-3"
+          delta={40}
-            selectedServer={selectedServer}
+          onSwipedLeft={() => this.setState({ showSideBar: false })}
-            showOnMobile={this.state.showSideBar}
+          onSwipedRight={() => this.setState({ showSideBar: true })}
-          />
+          className="menu-layout__swipeable"
-          <div
+        >
-            className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
+          <div className="row menu-layout__swipeable-inner">
-            onClick={() => this.setState({ showSideBar: false })}
+            <AsideMenu
-          >
+              className="col-lg-2 col-md-3"
-            <Switch>
+              selectedServer={selectedServer}
-              <Route
+              showOnMobile={this.state.showSideBar}
-                exact
+            />
-                path="/server/:serverId/list-short-urls/:page"
+            <div
-                component={ShortUrls}
+              className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
-              />
+              onClick={() => this.setState({ showSideBar: false })}
-              <Route
+            >
-                exact
+              <Switch>
-                path="/server/:serverId/create-short-url"
+                <Route
-                component={CreateShortUrl}
+                  exact
-              />
+                  path="/server/:serverId/list-short-urls/:page"
-              <Route
+                  component={ShortUrls}
-                exact
+                />
-                path="/server/:serverId/short-code/:shortCode/visits"
+                <Route
-                component={ShortUrlsVisits}
+                  exact
-              />
+                  path="/server/:serverId/create-short-url"
-            </Switch>
+                  component={CreateShortUrl}
+                />
+                <Route
+                  exact
+                  path="/server/:serverId/short-code/:shortCode/visits"
+                  component={ShortUrlsVisits}
+                />
+              </Switch>
+            </div>
           </div>
-        </div>
+        </Swipeable>
-      </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"