From af4800ad5e2ed4c15fd29b646ec42cbfa8175387 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Thu, 13 Feb 2020 15:38:12 -0500
Subject: [PATCH] Improved UX by displaying hamburger instead of back arrow in
 mobile header on all pages

As of right now, the mobile header displays a back arrow at the top right corner on some pages (specifically discussion pages). This adds no actual value to the user:

- While on non-mobile devices hovering here would bring out the discussion list pane, this is not supported on mobile (and rightly so as it would add unnecessary complexity).
- The only other hypothetical benefit of the back button on mobile is that the button brings the user to the homepage, as opposed to the browser's back button, which might close a window (if the page was opened via a link). However, the hamburger menu more than replaces this functionality: by convention, users know that clicking on the site logo/title in the slideout nav menu will bring them to the homepage (which it does).

In summary, this change makes it much more convenient for users to access their account info/other navbar items, removes a somewhat redundant element, and does not diminish aesthetic.
---
 js/src/admin/AdminApplication.js       | 4 ++--
 js/src/common/components/Navigation.js | 6 ++++--
 js/src/forum/ForumApplication.js       | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/js/src/admin/AdminApplication.js b/js/src/admin/AdminApplication.js
index 96857c55a3..fb9fa90f7a 100644
--- a/js/src/admin/AdminApplication.js
+++ b/js/src/admin/AdminApplication.js
@@ -27,8 +27,8 @@ export default class AdminApplication extends Application {
    * @inheritdoc
    */
   mount() {
-    m.mount(document.getElementById('app-navigation'), Navigation.component({className: 'App-backControl', drawer: true}));
-    m.mount(document.getElementById('header-navigation'), Navigation.component());
+    m.mount(document.getElementById('app-navigation'), Navigation.component({back: false, className: 'App-backControl', drawer: true}));
+    m.mount(document.getElementById('header-navigation'), Navigation.component({back: true, drawer: false}));
     m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
     m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
     m.mount(document.getElementById('admin-navigation'), AdminNav.component());
diff --git a/js/src/common/components/Navigation.js b/js/src/common/components/Navigation.js
index 77f52995ce..fb01a590c5 100644
--- a/js/src/common/components/Navigation.js
+++ b/js/src/common/components/Navigation.js
@@ -26,7 +26,7 @@ export default class Navigation extends Component {
         onmouseenter={pane && pane.show.bind(pane)}
         onmouseleave={pane && pane.onmouseleave.bind(pane)}>
         {history.canGoBack()
-          ? [this.getBackButton(), this.getPaneButton()]
+          ? [this.getBackButton(), this.getPaneButton(), this.getDrawerButton()]
           : this.getDrawerButton()}
       </div>
     );
@@ -45,7 +45,9 @@ export default class Navigation extends Component {
    * @return {Object}
    * @protected
    */
-  getBackButton() {
+    getBackButton() {
+    if (!this.props.back) return '';
+
     const {history} = app;
     const previous = history.getPrevious() || {};
 
diff --git a/js/src/forum/ForumApplication.js b/js/src/forum/ForumApplication.js
index eed6ae5745..ea148c3b77 100644
--- a/js/src/forum/ForumApplication.js
+++ b/js/src/forum/ForumApplication.js
@@ -87,8 +87,8 @@ export default class ForumApplication extends Application {
     this.routes[defaultAction].path = '/';
     this.history.push(defaultAction, this.translator.trans('core.forum.header.back_to_index_tooltip'), '/');
 
-    m.mount(document.getElementById('app-navigation'), Navigation.component({className: 'App-backControl', drawer: true}));
-    m.mount(document.getElementById('header-navigation'), Navigation.component());
+    m.mount(document.getElementById('app-navigation'), Navigation.component({back: false, className: 'App-backControl', drawer: true}));
+    m.mount(document.getElementById('header-navigation'), Navigation.component({back: true, drawer: false}));
     m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
     m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());