diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js index 8e5a28645d..567340e643 100644 --- a/app/assets/javascripts/discourse/app/controllers/application.js +++ b/app/assets/javascripts/discourse/app/controllers/application.js @@ -19,10 +19,7 @@ export default Controller.extend({ init() { this._super(...arguments); - this.showSidebar = - this.canDisplaySidebar && - !this.keyValueStore.getItem(HIDE_SIDEBAR_KEY) && - !this.site.narrowDesktopView; + this.showSidebar = this.calculateShowSidebar(); }, @discourseComputed @@ -101,6 +98,14 @@ export default Controller.extend({ return enableSidebar; }, + calculateShowSidebar() { + return ( + this.canDisplaySidebar && + !this.keyValueStore.getItem(HIDE_SIDEBAR_KEY) && + !this.site.narrowDesktopView + ); + }, + @action toggleSidebar() { // enables CSS transitions, but not on did-insert diff --git a/app/assets/javascripts/discourse/app/initializers/narrow-desktop.js b/app/assets/javascripts/discourse/app/initializers/narrow-desktop.js index fdd5d769bd..647e6b9195 100644 --- a/app/assets/javascripts/discourse/app/initializers/narrow-desktop.js +++ b/app/assets/javascripts/discourse/app/initializers/narrow-desktop.js @@ -26,9 +26,10 @@ export default { "controller:application" ); site.set("narrowDesktopView", newNarrowDesktopView); - if (newNarrowDesktopView) { - applicationController.set("showSidebar", false); - } + applicationController.set( + "showSidebar", + applicationController.calculateShowSidebar() + ); applicationController.appEvents.trigger( "site-header:force-refresh" ); diff --git a/app/assets/javascripts/discourse/app/lib/narrow-desktop.js b/app/assets/javascripts/discourse/app/lib/narrow-desktop.js index 96c56f82c3..39b15c5d30 100644 --- a/app/assets/javascripts/discourse/app/lib/narrow-desktop.js +++ b/app/assets/javascripts/discourse/app/lib/narrow-desktop.js @@ -9,7 +9,7 @@ const NarrowDesktop = { }, isNarrowDesktopView(width) { - return width < 1100; + return width < 1000; }, }; diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js index aec5992430..60d1f38184 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js @@ -21,8 +21,12 @@ acceptance("Sidebar - Narrow Desktop", function (needs) { assert.ok(!exists("#d-sidebar"), "widge sidebar is collapsed"); + await click(".header-sidebar-toggle .btn"); + + assert.ok(exists("#d-sidebar"), "wide sidebar is displayed"); + const bodyElement = document.querySelector("body"); - bodyElement.style.width = "1000px"; + bodyElement.style.width = "990px"; await waitUntil( () => document.querySelector(".btn-sidebar-toggle.narrow-desktop"), @@ -42,6 +46,13 @@ acceptance("Sidebar - Narrow Desktop", function (needs) { !exists(".sidebar-hamburger-dropdown"), "cloak sidebar is collapsed" ); + + bodyElement.style.width = "1200px"; + await waitUntil(() => document.querySelector("#d-sidebar"), { + timeout: 5000, + }); + assert.ok(exists("#d-sidebar"), "wide sidebar is displayed"); + bodyElement.style.width = null; }); });