diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js index 9f3c0006309..bf24ac13a6e 100644 --- a/app/assets/javascripts/discourse/app/components/site-header.js +++ b/app/assets/javascripts/discourse/app/components/site-header.js @@ -236,17 +236,6 @@ const SiteHeaderComponent = MountWidget.extend( this.appEvents.on("user-menu:rendered", this, "_animateMenu"); } - if ( - this.currentUser?.experimental_sidebar_enabled && - !this.site.mobileView - ) { - this.appEvents.on( - "sidebar:docked-state-updated", - this, - "queueRerender" - ); - } - this.dispatch("notifications:changed", "user-notifications"); this.dispatch("header:keyboard-trigger", "header"); this.dispatch("user-menu:navigation", "user-menu"); @@ -363,17 +352,6 @@ const SiteHeaderComponent = MountWidget.extend( this.appEvents.off("user-menu:rendered", this, "_animateMenu"); } - if ( - this.currentUser?.experimental_sidebar_enabled && - !this.site.mobileView - ) { - this.appEvents.off( - "sidebar:docked-state-updated", - this, - "queueRerender" - ); - } - if (this.currentUser) { this.currentUser.off("status-changed", this, "queueRerender"); } diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js index 2e0bfcf8167..891e011a2b0 100644 --- a/app/assets/javascripts/discourse/app/controllers/application.js +++ b/app/assets/javascripts/discourse/app/controllers/application.js @@ -50,9 +50,12 @@ export default Controller.extend({ discourseDebounce(this, this._mainOutletAnimate, 250); this.toggleProperty("showSidebar"); - this.appEvents.trigger("sidebar:docked-state-updated"); - if (!this.site.mobileView) { + if (this.site.desktopView) { + this.appEvents.trigger("header:keyboard-trigger", { + type: "hamburger", + }); + if (this.showSidebar) { this.keyValueStore.removeItem(this.hideSidebarKey); } else { 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 62ce2ab0fb1..38fdaedb003 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs @@ -19,7 +19,7 @@ @icon="keyboard" @class="sidebar-footer-actions-button sidebar-footer-actions-keyboard-shortcuts" /> - {{#if this.site.desktopView}} + {{#if (and this.site.desktopView (not @sidebarDocked))}}
- +
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js index dc5b9a86b50..b7988ffc8cc 100644 --- a/app/assets/javascripts/discourse/app/widgets/header.js +++ b/app/assets/javascripts/discourse/app/widgets/header.js @@ -244,34 +244,32 @@ createWidget("header-icons", { icons.push(search); - if (!attrs.sidebarDocked) { - const hamburger = this.attach("header-dropdown", { - title: "hamburger_menu", - icon: "bars", - iconId: "toggle-hamburger-menu", - active: attrs.hamburgerVisible, - action: "toggleHamburger", - href: "", - classNames: ["hamburger-dropdown"], + const hamburger = this.attach("header-dropdown", { + title: "hamburger_menu", + icon: "bars", + iconId: "toggle-hamburger-menu", + active: attrs.hamburgerVisible, + action: "toggleHamburger", + href: "", + classNames: ["hamburger-dropdown"], - contents() { - let { currentUser } = this; - if (currentUser && currentUser.reviewable_count) { - return h( - "div.badge-notification.reviewables", - { - attributes: { - title: I18n.t("notifications.reviewable_items"), - }, + contents() { + let { currentUser } = this; + if (currentUser && currentUser.reviewable_count) { + return h( + "div.badge-notification.reviewables", + { + attributes: { + title: I18n.t("notifications.reviewable_items"), }, - this.currentUser.reviewable_count - ); - } - }, - }); + }, + this.currentUser.reviewable_count + ); + } + }, + }); - icons.push(hamburger); - } + icons.push(hamburger); if (attrs.user) { icons.push( @@ -339,12 +337,15 @@ createWidget("revamped-hamburger-menu-wrapper", { return { "data-click-outside": true }; }, - html() { + html(attrs) { return [ new RenderGlimmer( this, "div.widget-component-connector", - hbs`` + hbs``, + { + sidebarDocked: attrs.sidebarDocked, + } ), ]; }, @@ -402,10 +403,6 @@ export default createWidget("header", { inTopicRoute = this.router.currentRouteName.startsWith("topic."); } - if (attrs.sidebarDocked) { - state.hamburgerVisible = false; - } - let contents = () => { const headerIcons = this.attach("header-icons", { hamburgerVisible: state.hamburgerVisible, @@ -413,7 +410,6 @@ export default createWidget("header", { searchVisible: state.searchVisible, ringBackdrop: state.ringBackdrop, flagCount: attrs.flagCount, - sidebarDocked: attrs.sidebarDocked, user: this.currentUser, }); @@ -431,7 +427,11 @@ export default createWidget("header", { ); } else if (state.hamburgerVisible) { if (this.currentUser?.experimental_sidebar_enabled) { - panels.push(this.attach("revamped-hamburger-menu-wrapper", {})); + panels.push( + this.attach("revamped-hamburger-menu-wrapper", { + sidebarDocked: attrs.sidebarDocked, + }) + ); } else { panels.push(this.attach("hamburger-menu")); } diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js index 0a32bdb29ac..4404085db4f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js @@ -399,9 +399,9 @@ acceptance("Sidebar - Categories Section", function (needs) { await undockSidebar(); - assert.ok( - Object.keys(topicTrackingState.stateChangeCallbacks).length < - initialCallbackCount + assert.strictEqual( + Object.keys(topicTrackingState.stateChangeCallbacks).length, + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js index 732055afaf4..5e629857558 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js @@ -755,9 +755,9 @@ acceptance("Sidebar - Community Section", function (needs) { await undockSidebar(); - assert.ok( - Object.keys(topicTrackingState.stateChangeCallbacks).length < - initialCallbackCount + assert.strictEqual( + Object.keys(topicTrackingState.stateChangeCallbacks).length, + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js index fd462bef421..a6cbd2182e5 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js @@ -326,9 +326,9 @@ acceptance("Sidebar - Tags section", function (needs) { await undockSidebar(); - assert.ok( - Object.keys(topicTrackingState.stateChangeCallbacks).length < - initialCallbackCount + assert.strictEqual( + Object.keys(topicTrackingState.stateChangeCallbacks).length, + initialCallbackCount ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js index 93179c42efe..aebb1f1fe3d 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js @@ -90,11 +90,9 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) { assert.ok(!exists(".sidebar-container"), "hides the sidebar"); - await click(".hamburger-dropdown"); - assert.ok( exists(".sidebar-hamburger-dropdown"), - "displays the sidebar in hamburger dropdown" + "displays the sidebar in hamburger dropdown automatically after undocking" ); await click("button.sidebar-footer-actions-dock-toggle"); @@ -103,5 +101,22 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) { exists(".sidebar-container"), "displays the sidebar after docking" ); + + assert.notOk( + exists(".sidebar-hamburger-dropdown"), + "hides the sidebar in hamburger dropdown automatically after docking" + ); + + await click(".hamburger-dropdown"); + + assert.ok( + exists(".sidebar-hamburger-dropdown"), + "displays the sidebar in hamburger dropdown even when sidebar is docked" + ); + + assert.notOk( + exists(".sidebar-hamburger-dropdown .sidebar-footer-actions-dock-toggle"), + "does not display sidebar dock toggle in hamburger dropdown when sidebar is docked" + ); }); });