From a36584b8c877d17a87aa3235ffc407c24d4180d4 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 4 Aug 2022 14:26:35 +0800
Subject: [PATCH] Add support for toggling between mobile and desktop view on
 sidebar (#17794)

In the current hamburger menu dropdown, we have a link which allows users to toggle between mobile and desktop view on mobile and touch devices. This commit brings the same behaviour to sidebar.
---
 .../templates/components/sidebar/footer.hbs   |  8 +++++++
 .../tests/acceptance/sidebar-mobile-test.js   | 22 +++++++++++++++++++
 .../tests/acceptance/sidebar-test.js          | 21 ++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs
index fb5a01a4439..1f7aae78311 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs
@@ -1,6 +1,14 @@
 <div class="sidebar-footer-wrapper">
   <div class="sidebar-footer-container">
     <div class="sidebar-footer-actions">
+      {{#if (or this.site.mobileView (and this.siteSettings.enable_mobile_theme this.capabilities.touch))}}
+        <DButton
+          @action={{route-action "toggleMobileView"}}
+          @title={{if this.site.mobileView "desktop_view" "mobile_view"}}
+          @icon={{if this.site.mobileView "desktop" "mobile-alt"}}
+          @class="sidebar-footer-actions-button sidebar-footer-actions-toggle-mobile-view" />
+      {{/if}}
+
       <DButton
         @action={{route-action "showKeyboardShortcutsHelp"}}
         @title="keyboard_shortcuts_help.title"
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js
index e2f85957f40..74970e25105 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js
@@ -1,5 +1,8 @@
+import I18n from "I18n";
 import { test } from "qunit";
+
 import { click, visit } from "@ember/test-helpers";
+
 import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
@@ -66,4 +69,23 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
       "sidebar is not collapsed when clicking on caret to collapse a section in sidebar"
     );
   });
+
+  test("button to toggle between mobile and desktop view", async function (assert) {
+    await visit("/");
+    await click(".hamburger-dropdown");
+
+    assert.ok(
+      exists(
+        `.sidebar-footer-actions-toggle-mobile-view[title="${I18n.t(
+          "desktop_view"
+        )}"]`
+      ),
+      "displays the right title for the button"
+    );
+
+    assert.ok(
+      exists(".sidebar-footer-actions-toggle-mobile-view .d-icon-desktop"),
+      "displays the desktop icon for the button"
+    );
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
index 3388ce6e077..ceabc701979 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
@@ -170,5 +170,26 @@ acceptance(
         "hides the sidebar dropdown"
       );
     });
+
+    test("button to toggle between mobile and desktop view on touch devices ", async function (assert) {
+      const capabilities = this.container.lookup("capabilities:main");
+      capabilities.touch = true;
+
+      await visit("/");
+
+      assert.ok(
+        exists(
+          `.sidebar-footer-actions-toggle-mobile-view[title="${I18n.t(
+            "mobile_view"
+          )}"]`
+        ),
+        "displays the right title for the button"
+      );
+
+      assert.ok(
+        exists(".sidebar-footer-actions-toggle-mobile-view .d-icon-mobile-alt"),
+        "displays the mobile icon for the button"
+      );
+    });
   }
 );