diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index f911b78c0f0df94b2dcc5343cc7a115735792454..5bd686ba72835afdd4c2f0971d7f6743e863ef7c 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -664,11 +664,31 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({ publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({ selector: 'header#top', + disabledInEditableMode: false, events: { 'show.bs.collapse #top_menu_collapse': '_onCollapseShow', 'hidden.bs.collapse #top_menu_collapse': '_onCollapseHidden', }, + /** + * @override + */ + start() { + // This is a fix in stable to move the "call to action" button in the + // navbar for the "boxed" header when the "off-canvas" mobile menu is + // enabled. Without this, the "call to action" button is inaccessible in + // the "off-canvas" mobile menu. + this.offcanvasAndBoxedHeader = false; + // If mobile menu is "off-canvas" and header template is "boxed". + if (this.$target[0].querySelector('.o_offcanvas_menu_toggler') + && this.$target[0].querySelector('.o_header_boxed_background')) { + this.navbarEl = this.$target[0].querySelector('#top_menu'); + this.callToActionEl = this.$target[0].querySelector('#oe_structure_header_boxed_2'); + this.offcanvasAndBoxedHeader = !!this.callToActionEl; + } + return this._super(...arguments); + }, + //-------------------------------------------------------------------------- // Handlers //-------------------------------------------------------------------------- @@ -678,12 +698,20 @@ publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({ */ _onCollapseShow() { this.el.classList.add('o_top_menu_collapse_shown'); + if (this.offcanvasAndBoxedHeader) { + this.callToActionEl.classList.add('nav-item'); + this.navbarEl.append(this.callToActionEl); + } }, /** * @private */ _onCollapseHidden() { this.el.classList.remove('o_top_menu_collapse_shown'); + if (this.offcanvasAndBoxedHeader) { + this.callToActionEl.classList.remove('nav-item'); + this.navbarEl.after(this.callToActionEl); + } }, });