[FIX] website: handle affixed header in full screen mode

The affixed header was not properly repositioned in editor full screen
mode (introduced in 13.4).

closes odoo/odoo#58247

X-original-commit: 7502c8aa6e5422b1ecf446002e187fa2f7ca3aa7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 21 insertions, 8 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index bcf9ebbaf78..70ed4565185 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -72,6 +72,18 @@ const BaseAnimatedHeader = animations.Animation.extend({
     /**
      * @private
      */
+    _adaptFixedHeaderPosition() {
+        // Compensate scrollbar
+        this.el.style.removeProperty('right');
+        if (this.fixedHeader) {
+            const scrollableEl = this.$el.parent().closestScrollable()[0];
+            const style = window.getComputedStyle(this.el);
+            this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important');
+        }
+    },
+    /**
+     * @private
+     */
     _adaptToHeaderChange: function () {
         this._updateMainPaddingTop();
         this.el.classList.toggle('o_top_fixed_element', this.fixedHeader && this._isShown());
@@ -128,14 +140,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
     _toggleFixedHeader: function (useFixed = true) {
         this.fixedHeader = useFixed;
         this.el.classList.toggle('o_header_affixed', useFixed);
-        // Compensate scrollbar
-        if (useFixed) {
-            const scrollableEl = this.$el.parent().closestScrollable()[0];
-            const style = window.getComputedStyle(this.el);
-            this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important');
-        } else {
-            this.el.style.removeProperty('right');
-        }
+        this._adaptFixedHeaderPosition();
         this._adaptToHeaderChange();
     },
     /**
@@ -191,6 +196,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
      * @private
      */
     _updateHeaderOnResize: function () {
+        this._adaptFixedHeaderPosition();
         if (document.body.classList.contains('overflow-hidden')
                 && config.device.size_class > config.device.SIZES.SM) {
             document.body.classList.remove('overflow-hidden');
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 4ef67042fc3..5bac9669000 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -18,6 +18,9 @@ body.o_connected_user {
         #oe_main_menu_navbar, #web_editor-top-edit, .o_we_website_top_actions, #oe_snippets {
             transition: transform 400ms ease 0s !important;
         }
+        .o_header_affixed {
+            transition: top 0.35s !important;
+        }
     }
     &.o_fullscreen {
         padding-top: 0 !important;
@@ -31,6 +34,10 @@ body.o_connected_user {
         .o_we_website_top_actions, #oe_snippets {
             transform: translateX(100%);
         }
+        .o_header_affixed {
+            top: 0 !important;
+            right: 0 !important;
+        }
     }
 }