[FIX] website: prevent the sidebar from being over the content

With this commit, users can no longer have headers that have the sidebar
template and the over the content option at the same time.

Steps to reproduce the problem:
 - Edit a website
 - Edit the navbar
 - Set Header Position to Over the Content
 - Change the navbar template to Sidebar

The navbar is not displayed properly and there is a margin on the left
that should not be there.

task-2877421

closes odoo/odoo#95463

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

addons/website/static/src/js/editor/snippets.options.js

@@ -1980,6 +1980,29 @@ options.registry.WebsiteLevelColor = options.Class.extend({
     },
 });
 
+options.registry.HeaderLayout = options.registry.WebsiteLevelColor.extend({
+    /**
+     * @overide
+     */
+    async customizeWebsiteViews(previewMode, widgetValue, params) {
+        const _super = this._super.bind(this);
+
+        if (params.name === 'header_sidebar_opt') {
+            // When the user selects sidebar as header, make sure that the
+            // header position is regular.
+            await new Promise(resolve => {
+                this.trigger_up('action_demand', {
+                    actionName: 'toggle_page_option',
+                    params: [{name: 'header_overlay', value: false}],
+                    onSuccess: () => resolve(),
+                });
+            });
+        }
+
+        return _super(...arguments);
+    }
+});
+
 options.registry.HeaderNavbar = options.Class.extend({
     /**
      * Particular case: we want the option to be associated on the header navbar

addons/website/views/snippets/snippets.xml

@@ -587,7 +587,7 @@
          data-selector="[data-oe-expression='res_company.partner_id']"
          data-no-check="true"/>
 
-    <div data-js="WebsiteLevelColor"
+    <div data-js="HeaderLayout"
          data-selector="#wrapwrap > header"
          data-no-check="true"
          groups="website.group_website_designer">
@@ -754,7 +754,8 @@
     <div data-js="TopMenuVisibility"
          data-selector="[data-main-object^='website.page('] #wrapwrap > header"
          data-no-check="true">
-        <we-select string="Header Position" id="option_header_visibility" data-no-preview="true">
+        <we-select string="Header Position" data-no-preview="true"
+                   data-dependencies="!header_sidebar_opt">
             <we-button data-visibility="transparent">Over The Content</we-button>
             <we-button data-name="regular_header_visibility_opt"
                        data-visibility="regular">Regular</we-button>