From a65407b9c387c1edef60df7a9f4a7b689da810a9 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 19 Jun 2020 08:55:41 +0000
Subject: [PATCH] [IMP] website, *: add off-canvas and other hamburger menu
 options

*: web, portal

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

X-original-commit: 89bf0d4170f42b40cd46915c7d0160c4818f3b8f
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/scss/bootstrap_overridden.scss |   5 +
 addons/portal/views/portal_templates.xml      |   2 +-
 .../web/static/src/scss/bootstrap_review.scss |  14 ++
 addons/website/models/theme_models.py         |   4 +-
 .../header_template_default.png               | Bin 0 -> 1801 bytes
 .../header_template_hamburger.png             | Bin 0 -> 1835 bytes
 .../header_template_vertical.png              | Bin 0 -> 1933 bytes
 addons/website/static/src/js/content/menu.js  |   2 +-
 .../static/src/js/editor/snippets.options.js  |   8 +
 .../static/src/scss/primary_variables.scss    |   4 +-
 .../static/src/scss/website.edit_mode.scss    |  10 +
 addons/website/static/src/scss/website.scss   | 201 ++++++++++++------
 addons/website/views/snippets/snippets.xml    |  75 ++++---
 addons/website/views/website_templates.xml    |  60 ++++--
 14 files changed, 274 insertions(+), 111 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_options/header_template_default.png
 create mode 100644 addons/website/static/src/img/snippets_options/header_template_hamburger.png
 create mode 100644 addons/website/static/src/img/snippets_options/header_template_vertical.png

diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss
index 3dedc5ef897..243cff2dfbd 100644
--- a/addons/portal/static/src/scss/bootstrap_overridden.scss
+++ b/addons/portal/static/src/scss/bootstrap_overridden.scss
@@ -23,6 +23,11 @@ $font-size-sm: (12 / 16) * 1rem !default;
 $btn-padding-y-sm: (1 / 16) * 1rem !default;
 $btn-padding-x-sm: (5 / 16) * 1rem !default;
 
+// Navbar
+
+$navbar-dark-toggler-border-color: transparent;
+$navbar-light-toggler-border-color: transparent;
+
 // Modals
 
 $modal-lg: $o-modal-lg;
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index aa4fc556690..8db9facdada 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -7,7 +7,7 @@
         </xpath>
         <xpath expr="//div[@id='wrapwrap']/header/img" position="replace">
             <nav class="navbar navbar-expand-md navbar-light bg-light">
-                <div class="container">
+                <div id="top_menu_container" class="container">
                     <a href="/" class="navbar-brand logo">
                         <img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
                     </a>
diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index a196f3e228b..8046968ebad 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -157,3 +157,17 @@ $o-btn-outline-defaults: () !default;
         }
     }
 }
+
+// Compensate navbar brand padding if no visible border
+@if alpha($navbar-dark-toggler-border-color) < 0.001 {
+    .navbar-dark .navbar-toggler {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+@if alpha($navbar-light-toggler-border-color) < 0.001 {
+    .navbar-light .navbar-toggler {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 60323f3b57d..a5932bce5cc 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -184,8 +184,8 @@ class Theme(models.AbstractModel):
 
         # Reinitialize header templates
         self.disable_view('website.template_header_hamburger')
-        self.disable_view('website.template_header_hamburger_left')
-        self.disable_view('website.template_header_navbar_text_center')
+        self.disable_view('website.template_header_vertical')
+        self.disable_view('website.option_header_hamburger_center_logo')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/img/snippets_options/header_template_default.png b/addons/website/static/src/img/snippets_options/header_template_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..80b79170ffbd479d839d848652399f373b2aea41
GIT binary patch
literal 1801
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

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger.png b/addons/website/static/src/img/snippets_options/header_template_hamburger.png
new file mode 100644
index 0000000000000000000000000000000000000000..d85bc179e783b39c5a22c23084d028fd257ba130
GIT binary patch
literal 1835
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
Z7yuydVE-0$gslJo002ovPDHLkV1oNrX)FK$

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/img/snippets_options/header_template_vertical.png b/addons/website/static/src/img/snippets_options/header_template_vertical.png
new file mode 100644
index 0000000000000000000000000000000000000000..15dc33fc232d631322899e27c6fa1833b086400d
GIT binary patch
literal 1933
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
T-Vhav00000NkvXXu0mjfEB>gv

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 1a1f9bc38ac..68ee1aae2a3 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -403,7 +403,7 @@ publicWidget.registry.autohideMenu = publicWidget.Widget.extend({
         this.$topMenu = this.$('#top_menu');
         this.noAutohide = this.$el.is('.o_no_autohide_menu');
         if (!this.noAutohide) {
-            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu'));
+            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu, .o_offcanvas_logo_container'));
 
             // The previous code will make sure we wait for images to be fully
             // loaded before initializing the auto more menu. But in some cases,
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6b4c5414fe1..b94b0310e35 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1767,6 +1767,14 @@ options.registry.collapse = options.Class.extend({
 });
 
 options.registry.Header = options.Class.extend({
+    /**
+     * @override
+     */
+    async updateUI() {
+        await this._super(...arguments);
+        const isHamburger = this.$('.navbar-toggler').is(':visible');
+        this.$el.find('#hamburger_opt_label').toggleClass('d-none', isHamburger);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index a68242f5c4e..96511e6472a 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -260,9 +260,11 @@ $o-base-website-values-palette: (
     'navbar-font': null,
     'buttons-font': null,
 
-    'header-template': 'logo_menu',
+    'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
     'header-font-size': null, // Default to BS (normal font-size)
     'logo-height': null, // Default to navbar height (see portal)
+    'hamburger-type': 'default', // 'default' / 'off-canvas'
+    'hamburger-position': 'right', // 'right' / 'left' / 'center'
 
     'footer-template': 'products_contacts_about_us',
     'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 72288fbebaa..a5763900af2 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -171,3 +171,13 @@ body.editor_enable.editor_has_snippets {
         top: var(--o-we-toolbar-height) !important;
     }
 }
+
+.editor_enable {
+    @if o-website-value('hamburger-type') == 'off-canvas' {
+        #top_menu_collapse {
+            &.collapsing, &.show {
+                left: $o-we-sidebar-width;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6d57c9b4fc9..5e654dc2db4 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -691,14 +691,6 @@ $-transition-duration: 200ms;
         transition: transform $-transition-duration;
     }
 
-    .navbar-collapse {
-        @if o-website-value('header-template') != 'logo_hamburger' {
-            max-height: 70vh;
-        }
-        &.show {
-            overflow-y: auto;
-        }
-    }
     &.o_header_is_scrolled {
         .navbar-brand {
             font-size: $o-theme-navbar-fixed-logo-height / $line-height-base;
@@ -707,11 +699,12 @@ $-transition-duration: 200ms;
                 height: $o-theme-navbar-fixed-logo-height;
             }
         }
-        @include media-breakpoint-up(md) {
-            @if (index(('menu_logo_below', 'logo_menu_below'), o-website-value('header-template'))) != null {
+        @if o-website-value('header-template') == 'vertical' {
+            @include media-breakpoint-up(md) {
                 .navbar-brand {
                     font-size: 0px;
                     opacity: 0;
+
                     img {
                         height: 0px;
                     }
@@ -761,15 +754,22 @@ $-transition-duration: 200ms;
     }
 }
 
-// Header templates
+$-off-canvas-hamburger: o-website-value('hamburger-type') == 'off-canvas';
+$-hamburger-left: o-website-value('hamburger-position') == 'left';
+$-hamburger-center: o-website-value('hamburger-position') == 'center';
+$-hamburger-right: o-website-value('hamburger-position') == 'right';
+
 header {
     &#top {
         // We need this z-index for the shadow option of the header
         z-index: $zindex-modal - 20;
     }
     &:not(.o_header_no_transition) {
+        #top_menu_container {
+            transition: all $-transition-duration;
+        }
         .navbar-brand {
-            transition: font-size $-transition-duration, opacity $-transition-duration ease-out;
+            transition: margin $-transition-duration, font-size $-transition-duration, opacity $-transition-duration ease-out;
 
             img {
                 transition: height $-transition-duration;
@@ -777,72 +777,149 @@ header {
         }
     }
 
+    &:not(.o_header_is_scrolled) {
+        $-is-hamburger: o-website-value('header-template') == 'hamburger';
+        $-is-vertical: o-website-value('header-template') == 'vertical';
+        @include media-breakpoint-up(md) {
+            @if $-is-hamburger or $-is-vertical {
+                #top_menu_container {
+                    padding-top: $spacer * 0.5;
+                    padding-bottom: $spacer * 0.5;
+                }
+            }
+            @if $-is-vertical {
+                .navbar-brand {
+                    margin-bottom: $spacer;
+                }
+            }
+        }
+    }
+
+    .navbar {
+        flex-direction: if($-hamburger-left, row-reverse, row);
+    }
+    #top_menu_container {
+        flex-direction: inherit;
+    }
+    @if $-hamburger-right {
+        .navbar-brand {
+            margin-right: 0;
+            margin-left: $navbar-padding-x;
+        }
+    } @else if $-hamburger-center {
+        .collapsing, .show {
+            #top_menu {
+                @if not $-off-canvas-hamburger {
+                    padding-top: 15vh;
+                    padding-bottom: 15vh;
+                }
+                text-align: center;
+            }
+        }
+    }
+
     @include media-breakpoint-up(md) {
         // Allow to center the logo, ignoring the toggler space
         .o_navbar_toggler_container {
             flex: 0 0 0;
             min-width: 0;
+            direction: if($-hamburger-left, ltr, rtl);
         }
     }
-    @if index(('hamburger_logo', 'logo_hamburger'), o-website-value('header-template')) {
-        .navbar-brand {
-            text-align: center;
-        }
-        .navbar-brand, .logo img {
-            margin: auto;
-        }
-        .navbar-nav {
-            margin-top: $spacer / 2;
-        }
-        @if o-website-value('header-template') == 'logo_hamburger' {
-            .o_navbar_toggler_container {
-                direction: rtl;
-            }
-            &:not(.o_header_is_scrolled) .container {
-                padding-top: $spacer;
-                padding-bottom: $spacer;
-            }
-            .container {
-                transition: padding 200ms;
+}
 
-                #top_menu.navbar-nav {
-                    height: 90vh;
-                    padding-top : 10vh;
+@if $-off-canvas-hamburger {
+    #top_menu_collapse {
+        flex-direction: if($-hamburger-left, row, row-reverse);
+
+        &.collapsing, &.show {
+            @include o-position-absolute(0, 0, 0, 0);
+            position: fixed;
+            display: flex;
+            align-items: stretch;
+            z-index: $zindex-sticky;
+            transition: none;
+            transform: none;
+
+            .o_offcanvas_menu_backdrop {
+                @include o-position-absolute(0, 0, 0, 0);
+                opacity: .2;
+                cursor: pointer;
+            }
+
+            #top_menu {
+                overflow: auto;
+                flex-wrap: nowrap;
+                @if $-hamburger-center {
+                    width: 100%;
+                    max-width: none;
+                } @else {
+                    max-width: 560px;
+                }
+                background-color: o-color('menu');
+                transition: transform $-transition-duration cubic-bezier(.694, .0482, .335, 1);
+
+                @if $-hamburger-center {
+                    .o_offcanvas_menu_backdrop {
+                        display: none;
+                    }
+                    .o_offcanvas_menu_toggler {
+                        max-width: 90%;
+                    }
+                }
+
+                .nav-item, .o_offcanvas_logo {
+                    padding-left: $grid-gutter-width;
+                    padding-right: $grid-gutter-width;
+                }
+                .nav-item, .dropdown-menu {
+                    text-align: inherit;
+                }
+
+                // Open all dropdowns
+                .dropdown-toggle {
+                    padding-bottom: $nav-link-padding-y*0.5;
+
+                    &:after {
+                        content: none;
+                    }
                 }
                 .dropdown-menu {
-                    text-align: center;
+                    display: block;
+                    padding-top:0;
+                    border: 0;
+                    background: inherit;
+                    color: inherit;
+                }
+                .dropdown-item {
+                    padding-left: .5em;
+                    padding-right: .5em;
                 }
             }
-        }
-    } @else if index(('logo_menu_below', 'menu_logo_below'), o-website-value('header-template')) {
-        .navbar-brand {
-            text-align: center;
-        }
-        .navbar-expand-md {
-            > .container {
-                flex-wrap: wrap;
-            }
-            .navbar-collapse {
-                flex-basis: 100%;
+
+            .o_connected_user header:not(.o_header_is_scrolled) &,
+            .o_connected_user header.o_header_affixed & {
+                padding-top: $o-navbar-height;
             }
         }
-        .navbar-brand, #top_menu.navbar-nav, .logo img {
-            margin: auto;
-        }
-        .navbar-brand {
-            @include media-breakpoint-up(md) {
-                @if o-website-value('header-template') == 'menu_logo_below' {
-                    margin-top: $navbar-padding-y;
-                } @else {
-                    margin-bottom: $navbar-padding-y;
-                }
+        &.collapsing #top_menu {
+            @if o-website-value('hamburger-position') == 'center' {
+                transform: translateY(-100%);
+            } @else if o-website-value('hamburger-position') == 'left' {
+                transform: translateX(-100%);
+            } @else if o-website-value('hamburger-position') == 'right' {
+                transform: translateX(100%);
             }
         }
-        @if o-website-value('header-template') == 'menu_logo_below' {
-            .navbar-collapse {
-                @include media-breakpoint-up(md) {
-                    order: -1;
-                }
+        &.show #top_menu {
+            transform: translate(0);
+        }
+
+        .o_offcanvas_menu_backdrop {
+            @if $-hamburger-left {
+                background-image: linear-gradient(90deg, currentColor 20%, transparent);
+            } @else {
+                background-image: linear-gradient(-90deg, currentColor 20%, transparent);
             }
         }
     }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 32a329a1f0f..3265f9f79ff 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -516,7 +516,7 @@
 
     <div data-js="menu_data"
          data-selector="#top_menu li > a"
-         data-exclude=".dropdown-toggle, li.o_header_menu_button a"
+         data-exclude=".dropdown-toggle, li.o_header_menu_button a, [data-toggle], .o_offcanvas_logo"
          data-no-check="true"/>
 
     <div data-js="company_data"
@@ -558,36 +558,52 @@
             <we-fontfamilypicker data-variable="navbar-font"/>
             <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
         </we-row>
-        <we-select id="header_templates_select" data-variable="header-template" string="Template" data-reload="/">
-            <we-button id="option_template_header_logo_menu"
+
+        <we-select string="Template" data-variable="header-template" data-reload="/">
+            <we-button title="Default"
                        data-name="header_logo_menu_opt"
                        data-customize-website-views=""
-                       data-customize-website-variable="'logo_menu'"
-                       string="Logo - Menu"/>
-            <we-button id="option_template_header_hamburger_logo_centered"
-                       data-name="header_hamburger_logo_centered_opt"
-                       data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
-                       data-customize-website-variable="'hamburger_logo'"
-                       string="Hamburger - Logo"/>
-            <we-button id="option_template_header_logo_menu_below"
-                       data-name="header_logo_menu_below_opt"
-                       data-customize-website-views=""
-                       data-customize-website-variable="'logo_menu_below'"
-                       string="Logo (Top) - Menu"/>
-            <we-button id="option_template_header_menu_logo_below"
-                       data-name="header_menu_logo_below_opt"
-                       data-customize-website-views=""
-                       data-customize-website-variable="'menu_logo_below'"
-                       string="Menu - Logo (Bottom)"/>
-            <we-button id="option_template_header_logo_hamburger"
-                       data-name="header_logo_hamburger_opt"
-                       data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
-                       data-customize-website-variable="'logo_hamburger'"
-                       string="Logo - Hamburger (cover)"/>
+                       data-customize-website-variable="'default'"
+                       data-img="/website/static/src/img/snippets_options/header_template_default.png"/>
+            <we-button title="Hamburger menu"
+                       data-name="header_hamburger_opt"
+                       data-customize-website-views="website.template_header_hamburger"
+                       data-customize-website-variable="'hamburger'"
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger.png"/>
+            <we-button title="Vertical"
+                       data-name="header_vertical_opt"
+                       data-customize-website-views="website.template_header_vertical"
+                       data-customize-website-variable="'vertical'"
+                       data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
         </we-select>
-        <we-select id="header_effect_list" string="Effect">
-            <we-button id="option_header_effect_standard"
-                       data-name="header_effect_standard_opt"
+
+        <we-title id="hamburger_opt_label">Hamburger (Mobile)</we-title>
+        <we-select string="⌙ Type" data-variable="hamburger-type" data-reload="/">
+            <we-button data-customize-website-variable="'default'"
+                       data-customize-website-views="">Default</we-button>
+            <we-button data-name="off_canvas_menu_opt"
+                       data-customize-website-variable="'off-canvas'"
+                       data-customize-website-views="website.option_header_off_canvas">Off-Canvas</we-button>
+        </we-select>
+        <we-select string="⌙ Position" data-variable="hamburger-position" data-reload="/">
+            <we-button data-customize-website-variable="'right'">Right</we-button>
+            <we-button data-customize-website-variable="'left'">Left</we-button>
+            <we-button data-customize-website-variable="'center'">Center / Full</we-button>
+        </we-select>
+        <we-select string="⌙ Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
+        </we-select>
+        <we-checkbox string="Center Main Logo"
+                     data-dependencies="header_hamburger_opt"
+                     data-apply-to=".navbar-brand"
+                     data-customize-website-views="website.option_header_hamburger_center_logo"
+                     data-select-class="mx-md-auto"
+                     data-no-preview="true"/>
+
+        <we-select id="header_visibilities_list" string="Header Visibility">
+            <we-button id="option_header_visibility_standard"
+                       data-name="header_visibility_standard_opt"
                        data-select-class="o_header_standard"
                        data-customize-website-views="website.header_visibility_standard"
                        string="Standard"/>
@@ -612,7 +628,8 @@
                        data-customize-website-views="website.header_visibility_fade_out"
                        string="Fade Out"/>
         </we-select>
-        <we-select id="option_header_dropdown" string="Sub Menus" data-no-preview="true">
+
+        <we-select id="option_header_dropdown" string="Sub Menus" data-dependencies="!header_hamburger_opt" data-no-preview="true">
             <we-button data-select-class="o_hoverable_dropdown"
                        data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
             <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ed2e5afeb69..2f772481ce6 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -128,8 +128,11 @@
         <!-- Background now controlled by css configuration, using color combinations -->
         <attribute name="class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
     </xpath>
+    <xpath expr="//header//div[@id='top_menu_collapse']" position="attributes">
+        <attribute name="class" separator=" " add="flex-grow-0"/>
+    </xpath>
     <xpath expr="//header//ul[@id='top_menu']" position="attributes">
-        <attribute name="class" separator=" " add="o_menu_loading"/>
+        <attribute name="class" separator=" " add="o_menu_loading" remove="text-right ml-auto"/>
     </xpath>
     <xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="attributes">
         <attribute name="t-if">website.user_id != user_id</attribute>
@@ -222,30 +225,51 @@
 </template>
 
 <!-- Header templates -->
-<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Logo Hamburger" active="False">
+<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
     <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
         <attribute name="class" remove="navbar-expand-md" separator=" "/>
     </xpath>
     <xpath expr="//header//button[hasclass('navbar-toggler')]" position="replace">
         <div class="o_navbar_toggler_container">$0</div>
     </xpath>
-</template>
-
-<template id="template_header_navbar_text_center" inherit_id="website.layout" name="Template Header Navbar Text Center" active="False">
-    <xpath expr="//header//ul[hasclass('nav')]" position="attributes">
-        <attribute name="class" remove="text-right" add="text-center" separator=" "/>
+    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " remove="text-right"/>
     </xpath>
 </template>
 
-<template id="template_header_hamburger_left" inherit_id="website.layout" name="Template Header Hamburger" active="False">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="before">
-        <div class="o_navbar_toggler_container o_not_editable"></div>
+<template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
+    <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
+        <attribute name="class" add="flex-md-column" separator=" "/>
     </xpath>
-    <xpath expr="//div[hasclass('o_navbar_toggler_container')]" position="inside">
-        <xpath expr="//header//button[hasclass('navbar-toggler')]" position="move"/>
+</template>
+
+<!-- Navbar Hamburger Options -->
+<template id="option_header_off_canvas" inherit_id="website.layout" name="Off-Canvas Header" active="False">
+    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " add="position-relative"/>
     </xpath>
-    <xpath expr="//header//ul[hasclass('nav')]" position="attributes">
-        <attribute name="class" remove="text-right" add="text-left" separator=" "/>
+    <xpath expr="//header//ul[@id='top_menu']" position="before">
+        <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
+    </xpath>
+    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="before">
+        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0">
+            <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
+                <span class="fa-2x">&#215;</span>
+            </a>
+        </li>
+    </xpath>
+    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="after">
+        <li class="o_offcanvas_logo_container order-last navbar-toggler py-4 order-1 mt-auto text-center border-0">
+            <a href="/" class="o_offcanvas_logo text-center">My Website</a>
+        </li>
+    </xpath>
+</template>
+
+<template id="option_header_off_canvas_logo_show" inherit_id="website.option_header_off_canvas" name="Show Logo (Off-Canvas)">
+    <xpath expr="//header//a[hasclass('o_offcanvas_logo')]" position="replace">
+        <a href="/" class="o_offcanvas_logo logo">
+            <span t-field="website.logo" t-options="{'widget': 'image', 'style': 'max-width: 200px'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
+        </a>
     </xpath>
 </template>
 
@@ -256,6 +280,12 @@
     </xpath>
 </template>
 
+<template id="option_header_hamburger_center_logo" inherit_id="website.template_header_hamburger" name="Template Header Hamburger Center Logo" active="False">
+    <xpath expr="//header//a[hasclass('navbar-brand')]" position="attributes">
+        <attribute name="class" separator=" " add="mx-md-auto"/>
+    </xpath>
+</template>
+
 <template id="layout_logo_show" inherit_id="website.layout" name="Show Logo">
     <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
         <a href="/" class="navbar-brand logo">
@@ -270,7 +300,7 @@
     </xpath>
 </template>
 
-<template id="header_visibility_standard" inherit_id="website.layout" name="Header Effect Standard">
+<template id="header_visibility_standard" inherit_id="website.layout" name="Header Visibility Standard">
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="o_header_standard" separator=" "/>
     </xpath>