From 1971bf39810468b2b67e2ecd3c86c663d5cffcfd Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 6 May 2021 16:04:41 +0200
Subject: [PATCH] [REF] web, website: refine and simplify dropdown design

Prior to this commit, Bootstrap dropdowns, jQueryUI dropdowns and Odoo
dropdowns where styled independently leading to visual inconsistencies
and code repetition.

This commit will customize and improve the Bootstrap design using as
much as possible predefined variables. Then it will simply '@extend'
owl/jQueryUI classes in order to visually match the bootstrap ones.

Since dropdown classes are used in the top-menu (and its design is
partially shared with frontend apps), this commit provides the necessary
adaptations for this component as well.
---
 addons/google_drive/static/src/xml/gdrive.xml |   2 +-
 addons/web/__manifest__.py                    |   1 -
 .../web/static/src/core/debug/debug_menu.xml  |   2 +-
 .../static/src/core/dropdown/dropdown.scss    | 137 ++++---
 .../web/static/src/core/dropdown/dropdown.xml |   2 +-
 .../legacy/js/views/graph/graph_controller.js |   2 +-
 .../src/legacy/scss/bootstrap_overridden.scss |  15 +-
 .../web/static/src/legacy/scss/dropdown.scss  |  88 +----
 .../src/legacy/scss/dropdown_extra.scss       |  52 +--
 .../static/src/legacy/scss/dropdown_menu.scss |  46 ---
 .../src/legacy/scss/kanban_dashboard.scss     |  11 +-
 .../static/src/legacy/scss/kanban_view.scss   |   1 -
 addons/web/static/src/legacy/scss/navbar.scss | 348 ++++++++++--------
 .../static/src/legacy/scss/navbar_mobile.scss | 177 ++++-----
 .../src/legacy/scss/primary_variables.scss    |   2 +
 .../static/src/legacy/scss/search_view.scss   |  83 -----
 addons/web/static/src/legacy/scss/utils.scss  |  27 +-
 addons/web/static/src/legacy/xml/base.xml     |  13 +-
 .../static/src/webclient/navbar/navbar.scss   | 106 +-----
 .../static/src/webclient/navbar/navbar.xml    |   2 +-
 .../switch_company_menu.xml                   |  22 +-
 .../static/tests/legacy/views/pivot_tests.js  |   7 +-
 .../webclient/switch_company_menu_tests.js    |   2 +-
 .../website/static/src/scss/website.ui.scss   |   9 +-
 .../views/website_navbar_templates.xml        |  10 +-
 25 files changed, 475 insertions(+), 692 deletions(-)
 delete mode 100644 addons/web/static/src/legacy/scss/dropdown_menu.scss

diff --git a/addons/google_drive/static/src/xml/gdrive.xml b/addons/google_drive/static/src/xml/gdrive.xml
index d12b3459516..db1e3a11c8a 100644
--- a/addons/google_drive/static/src/xml/gdrive.xml
+++ b/addons/google_drive/static/src/xml/gdrive.xml
@@ -1,7 +1,7 @@
 <templates>
     <t t-name="GoogleDriveMenu" owl="1">
         <li>
-            <ul class="o_embed_menu">
+            <ul class="o_embed_menu p-0">
                 <li t-foreach="props.items" t-as="gdriveItem" t-key="gdriveItem.id"
                     role="menuitem"
                     class="o_menu_item oe_share_gdoc_item dropdown-item"
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 8f9f5875486..90559898922 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -123,7 +123,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/web_calendar.scss',
             'web/static/src/legacy/scss/search_view.scss',
             'web/static/src/legacy/scss/search_panel.scss',
-            'web/static/src/legacy/scss/dropdown_menu.scss',
             'web/static/src/legacy/scss/data_export.scss',
             'base/static/src/scss/onboarding.scss',
             'web/static/src/legacy/scss/attachment_preview.scss',
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 09825e24f78..dfbd68405b9 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -5,7 +5,7 @@
         <Dropdown class="o_debug_manager"
           beforeOpen="beforeOpenDropdown"
           t-on-dropdown-item-selected.stop="onDropdownItemSelected"
-          menuClass="'o_dropdown_menu_right'">
+          togglerClass="'btn btn-link'">
             <span class="fa fa-bug"/>
             <t t-set-slot="menu">
                 <t t-foreach="getElements()" t-as="element" t-key="element_index">
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 0901cbb08bf..64fac3d8ff1 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -1,59 +1,114 @@
-.o_dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-// Menu
-ul.o_dropdown_menu {
-  background-color: $white;
-  border: 1px solid $gray-300;
-  border-radius: 3px;
-  box-shadow: 0 6px 12px -4px rgba($black, 0.25);
-  color: $o-main-text-color;
-  list-style: none;
-  margin: 0;
-  max-height: 90vh;
-  overflow: auto;
-  padding: 0.5rem 0;
-  position: absolute;
+// = Default Boostrap Classes customizations
+// ----------------------------------------------------------------------------
+.dropdown-menu {
   min-width: 100%;
-  z-index: 1000;
+  max-height: 70vh;
+  overflow: auto;
+  background-clip: border-box;
+  box-shadow: $o-dropdown-box-shadow;
+}
 
-  &.o_dropdown_menu_right {
-    right: 0;
-    left: auto;
+.dropdown-item {
+  &.active {
+    position: relative;
+    @extend .font-weight-bold;
+
+    &:before {
+      @include o-position-absolute(0);
+      transform: translate(-1.5em, 90%);
+      font: .7em/1em FontAwesome;
+      color: $primary;
+      content: "\f00c";
+    }
+  }
+
+  &.selected { // Legacy
+    @extend .dropdown-item.active;
+  }
+
+  // Using <a> tags inside a '.dropdown-item' elements  should not be necessary
+  // since the class in usually applied to the <a> tag itself.
+  // The following rules will handle custom layouts needs (eg '.o_user_menu').
+  &:not(.disabled):not(:disabled) a:not(.disabled):not(:disabled) {
+    @include o-hover-text-color($dropdown-link-color, $dropdown-link-hover-color);
+    font-weight: inherit;
+  }
+
+  &.disabled a, &:disabled a {
+    @include o-hover-text-color(
+      $dropdown-link-disabled-color,
+      $dropdown-link-disabled-color);
   }
 }
 
-// Toggler and items
-button.o_dropdown_toggler,
-li.o_dropdown_item {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0 1.6rem;
-  position: relative;
-  user-select: none;
-  white-space: nowrap;
+.dropdown-header {
+  @extend .font-weight-bold;
+  padding-bottom: .1em;
 
-  * {
-    color: inherit;
+  &:not(:first-child) {
+    margin-top: .3em;
+  }
+}
+
+.dropdown-divider:first-child {
+  display: none;
+}
+
+.o_rtl {
+  .dropdown-menu {
+    @extend .dropdown-menu-right;
+  }
+}
+
+// = Extend Owl custom classes to visually match Boostrap ones
+// ----------------------------------------------------------------------------
+.o_dropdown {
+  @extend .dropdown;
+
+  &_menu {
+    @extend .dropdown-menu;
+
+    &.o_dropdown_menu_right {
+      @extend .dropdown-menu-right;
+    }
   }
 
+  &_item {
+    @extend .dropdown-item;
+
+    &.o_dropdown_active {
+      @extend .dropdown-item:hover;
+    }
+  }
+
+  &_menu_group {
+    @extend .dropdown-header;
+  }
+}
+
+// = Owl components specific rules
+// -----------------------------------------------------------------------------
+.o_dropdown_item:not(.disabled):not(:disabled) {
+  // Needed 'cause <DropdownItem> generate <li> html tags that for browsers are
+  // normally not clickable.
+  cursor: pointer;
+}
+
+button.o_dropdown_toggler, button.o_dropdown_toggler_btn {
   > span {
     min-width: max-content;
   }
 
-  &:focus,
-  &:active,
-  &:focus:active,
-  &.o_dropdown_active {
+  &%--state-active {
     outline: none;
+    box-shadow: none !important;
   }
 
-  &:hover,
   &.o_dropdown_active {
-    background-color: rgba($black, 0.08);
+    @extend %--state-active;
+  }
+
+  @include hover-focus-active() {
+    @extend %--state-active;
   }
 }
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index 648f02ef00b..5027db86d66 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -14,7 +14,7 @@
           <t t-slot="default" />
         </span>
       </button>
-      <ul t-if="state.open" class="o_dropdown_menu" t-att-class="props.menuClass">
+      <ul t-if="state.open" class="o_dropdown_menu d-block overflow-auto" t-att-class="props.menuClass">
         <t t-slot="menu" />
       </ul>
     </div>
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_controller.js b/addons/web/static/src/legacy/js/views/graph/graph_controller.js
index b7bb10ea0c2..ec07282893c 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_controller.js
@@ -195,7 +195,7 @@ var GraphController = AbstractController.extend({
         // Update button classes accordingly to the current mode
         const buttons = actionsContainer.querySelectorAll('.o_dropdown_toggler_btn');
         for (const button of buttons) {
-            button.classList.remove('o_dropdown_toggler_btn', 'btn-secondary');
+            button.classList.remove('btn-secondary');
             if (this.isEmbedded) {
                 button.classList.add('btn-outline-secondary');
             } else {
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index c1ad6682116..b6b34f32400 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -24,6 +24,12 @@ $black:    #000 !default;
 $primary: $o-brand-primary !default;
 $secondary: $white !default;
 
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: false !default; // Disable pseudo element caret on .dropdown-toggle.
+
 // Body
 //
 // Settings for the `<body>` element.
@@ -93,10 +99,15 @@ $dropdown-border-color: $gray-300 !default;
 
 $dropdown-link-color: $o-main-text-color !default;
 $dropdown-link-hover-color: $gray-900 !default;
-$dropdown-link-hover-bg: $gray-200 !default;
+$dropdown-link-hover-bg: rgba($black, 0.08) !default;
 
 $dropdown-link-active-color: $gray-900 !default;
-$dropdown-link-active-bg: $gray-300 !default;
+$dropdown-link-active-bg: transparent !default;
+
+$dropdown-link-disabled-color: $o-main-color-muted !default;
+
+$dropdown-item-padding-y: $o-dropdown-vpadding !default;
+$dropdown-item-padding-x: $o-dropdown-hpadding !default;
 
 // Z-index master list
 
diff --git a/addons/web/static/src/legacy/scss/dropdown.scss b/addons/web/static/src/legacy/scss/dropdown.scss
index 30db84f2b3d..d8a6dec9f08 100644
--- a/addons/web/static/src/legacy/scss/dropdown.scss
+++ b/addons/web/static/src/legacy/scss/dropdown.scss
@@ -1,32 +1,33 @@
-%dropdown-li-a-padding {
-    padding: 3px $o-dropdown-hpadding;
-}
+// = jQueryUI dropdown adaptations
+// ----------------------------------------------------------------------------
+.ui-widget.ui-autocomplete {
+    @extend .dropdown-menu;
+    top: 0;       // Compute initial position
+    min-width: 0; // Compute initial width
 
-.ui-autocomplete { // Copy style of bootstrap dropdown
-    background-image: none;
-    background-color: $dropdown-bg;
-    border: $dropdown-border-width solid $dropdown-border-color;
-    font-size: $font-size-base;
-    padding: 5px 0px;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
+    // Needed because .ui-widget are rendered at a
+    // lower stacking contex compared to modals.
+    z-index: $zindex-modal + 1;
 
     .ui-menu-item {
         padding: 0;
-        > a {
-            display: block;
-            color: $dropdown-link-color;
 
-            @extend %dropdown-li-a-padding;
+        > a {
+            @extend .dropdown-item;
 
             &.ui-state-active {
-                border: none;
-                font-weight: normal;
                 margin: 0;
+                border: none;
+                font-weight: $font-weight-normal;
+                color: $dropdown-link-hover-color;
+                background-color: $dropdown-link-hover-bg;
             }
         }
+
         &.o_m2o_dropdown_option, &.o_m2o_start_typing {
-            text-indent: 20px
+            text-indent: $o-dropdown-hpadding * .5;
         }
+
         &.o_m2o_start_typing {
             font-style: italic;
             cursor: default;
@@ -36,56 +37,3 @@
         }
     }
 }
-
-.dropdown-menu {
-    box-shadow: 0 6px 12px -4px rgba(black, 0.25);
-
-    .o_inline_dropdown {
-        position: relative;
-
-        & > .dropdown-menu {
-            top: 0;
-            left: 100%;
-        }
-        &:hover .dropdown-menu {
-            display: block;
-        }
-    }
-}
-
-@mixin dropdown-menu-mixin {
-    .show .dropdown-menu {
-        > * {
-            position: relative; // to allow absolute positionning inside the items
-        }
-
-        .dropdown-item {
-            &:focus, &:active, &:focus:active {
-                outline: none;
-            }
-
-            @extend %dropdown-li-a-padding;
-        }
-
-        .dropdown-header {
-            @extend %dropdown-li-a-padding;
-            color: $o-main-text-color;
-
-            @include media-breakpoint-down(sm) {
-                color: white;
-                text-decoration: underline;
-            }
-        }
-    }
-}
-
-@include dropdown-menu-mixin;
-.navbar-nav {
-    @include dropdown-menu-mixin;
-}
-
-.o_rtl {
-    .dropdown-menu {
-        left: auto;
-    }
-}
diff --git a/addons/web/static/src/legacy/scss/dropdown_extra.scss b/addons/web/static/src/legacy/scss/dropdown_extra.scss
index e4f68ec0447..ad1df061a2f 100644
--- a/addons/web/static/src/legacy/scss/dropdown_extra.scss
+++ b/addons/web/static/src/legacy/scss/dropdown_extra.scss
@@ -1,60 +1,12 @@
 .ui-autocomplete .ui-menu-item {
-    > a.ui-state-active {
-        background-color: $o-brand-odoo;
-        color: white;
-    }
     &.o_m2o_dropdown_option > a {
         color: $o-brand-odoo;
+
         &.ui-state-active {
-            color: white;
+            color: darken($o-brand-odoo, 10%);
         }
     }
     &.o_m2o_start_typing > a.ui-state-active {
         color: $dropdown-link-color;
     }
 }
-
-.oe_dropdown, .oe_dropdown_toggle {
-    position: relative;
-    cursor: pointer;
-}
-.oe_dropdown_toggle {
-    color: #2B2B2B;
-    font-weight: normal;
-}
-.oe_dropdown_menu {
-    display: none;
-    position: absolute;
-    z-index: 3;
-    margin: 0;
-    border: 1px solid #afafb6;
-    background: white;
-    padding: 4px 0;
-    min-width: 140px;
-    text-align: left;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-    &.oe_opened {
-        display: block;
-    }
-    > li {
-        list-style-type: none;
-        float: none;
-        display: block;
-        position: relative;
-        margin: 0;
-        padding: 2px 8px;
-        &:hover {
-            background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
-            box-shadow: none;
-        }
-        > a {
-            white-space: nowrap;
-            display: block;
-            color: #4c4c4c;
-            text-decoration: none;
-            &:hover {
-                text-decoration: none;
-            }
-        }
-    }
-}
diff --git a/addons/web/static/src/legacy/scss/dropdown_menu.scss b/addons/web/static/src/legacy/scss/dropdown_menu.scss
deleted file mode 100644
index d2da44a3125..00000000000
--- a/addons/web/static/src/legacy/scss/dropdown_menu.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.o_dropdown_menu {
-    > .dropdown-divider:first-child {
-        display: none;
-    }
-
-    min-width: 150px;
-    max-height: calc(100vh - 140px); // FIXME
-    overflow: auto;
-
-    .o_menu_item {
-        position: relative;
-
-        > .dropdown-item {
-            color: $o-main-text-color;
-
-            &:hover {
-                color: darken($o-main-text-color, 10%);
-            }
-        }
-    }
-}
-
-.dropdown-item {
-    position: relative;
-    color: $o-main-text-color;
-
-    &:hover {
-        color: darken($o-main-text-color, 10%);
-    }
-
-    &.selected { // TODO why not using standard BS4 "active" class ?
-        color: darken($o-main-text-color, 10%);
-        font-weight: bold;
-
-        &:before {
-            font-family: FontAwesome;
-            position: absolute;
-            left: 4px;
-            content: "\f00c";
-        }
-    }
-    .o_trash_button {
-        padding-left: 8px;
-        @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-    }
-}
\ No newline at end of file
diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
index 92dc3aaa586..fe06c5c1031 100644
--- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
@@ -26,6 +26,7 @@
 
         .o_kanban_manage_toggle_button {
             @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
+            @include o-position-absolute(0, 0);
             height: $o-kanban-manage-toggle-height;
         }
 
@@ -199,15 +200,9 @@
         }
     }
 
-    .o_favorite, .o_kanban_manage_toggle_button {
-        @include o-position-absolute(0, 0);
-        padding: $o-kanban-record-margin;
-    }
-
     .o_favorite {
-        top: 3px;
-        left: 0;
-        right: auto;
+        @include o-position-absolute(3px, $left: 0);
+        padding: $o-kanban-record-margin;
     }
 
     // Emphasize records' colors when necessary
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 8e0d232148f..49d9c91f64c 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -251,7 +251,6 @@
             }
             .dropdown-menu {
                 @include o-kanban-dropdown-menu;
-                right: (-$o-kanban-inside-hgutter - 1);
                 min-width: 11rem;
             }
         }
diff --git a/addons/web/static/src/legacy/scss/navbar.scss b/addons/web/static/src/legacy/scss/navbar.scss
index b4c1872e7ce..2a41aac546e 100644
--- a/addons/web/static/src/legacy/scss/navbar.scss
+++ b/addons/web/static/src/legacy/scss/navbar.scss
@@ -1,171 +1,193 @@
-body.o_is_superuser .o_menu_systray {
-    background: repeating-linear-gradient(
-        135deg,
-        #d9b904, #d9b904 10px,
-        #373435 10px, #373435 20px
-    );
-    border-bottom-left-radius: 20px;
+
+// This file is included in both backend and frontend bundles.
+// Bundle-specific rules can be found in 'webclient/navbar.scss' (backend) and
+// 'website.ui.scss' (frontend).
+
+// = Main Navbar
+// ============================================================================
+.o_main_navbar {
+  background-color: $o-brand-odoo;
+  border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+  display: grid;
+  height: $o-navbar-height;
+  gap: 0px 0px;
+  grid-template-areas: "apps brand sections systray";
+  grid-template-columns:
+    minmax($o-navbar-height, max-content)
+    max-content
+    minmax($o-navbar-height, 1fr)
+    fit-content(100%);
+  grid-template-rows: $o-navbar-height;
+  min-width: min-content;
+
+  // = Scoped Variables
+  //
+  // Variables scoped within the current context that mirror backend's
+  // boostrap values.
+  // --------------------------------------------------------------------------
+  $-backend-font-weight-bold: 500;
+  $-backend-entry-hover-bg: rgba(0, 0, 0, .08);
+  $-backend-h3-font-size: 17px;
+  $-backend-h2-font-size: 20px;
+  $-backend-entry-hpadding: 20px;
+  $-backend-entry-vpadding: 3px;
+
+  // = % PseudoClasses
+  //
+  // Regroup rules shared across different elements
+  // --------------------------------------------------------------------------
+  %-main-navbar-entry-base {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: $o-navbar-height;
+    cursor: pointer;
+    user-select: none;
+
+    @include o-hover-text-color(rgba($white, .9), $white);
+  }
+
+  %-main-navbar-entry-padding {
+    padding: 0 $o-horizontal-padding;
+  }
+
+  %-main-navbar-entry-bg-hover {
+    @include hover() {
+      background-color: $-backend-entry-hover-bg;
+    }
+  }
+
+  %-main-navbar-entry-active {
+    @include plain-hover-focus() {
+      background: $-backend-entry-hover-bg;
+      outline: 1px solid $o-navbar-inverse-link-hover-bg;
+      outline-offset: -1px;
+      color: $white;
+    }
+  }
+
+  // = Reset browsers defaults
+  // --------------------------------------------------------------------------
+  > ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // = Owl <Dropdown> components
+  // --------------------------------------------------------------------------
+  .o_dropdown .o_dropdown_toggler {
+    @extend %-main-navbar-entry-base;
+    @extend %-main-navbar-entry-padding;
+    @extend %-main-navbar-entry-bg-hover;
+    border: 0;
+    white-space: nowrap;
+
+    &, &:focus {
+      background: none;
+    }
+
+    &.o_dropdown_active {
+      @extend %-main-navbar-entry-active;
+    }
+  }
+
+  ul.o_dropdown_menu {
+    margin-top: 0;
+    border-top: 0;
+    @include border-top-radius(0);
+  }
+
+  .o_dropdown_menu_group_entry {
+    padding-left: $o-dropdown-hpadding * 1.5;
+
+    + .o_dropdown_item:not(.o_dropdown_menu_group_entry) {
+      margin-top: .8em;
+    }
+  }
+
+  // = Legacy elements adaptations
+  // --------------------------------------------------------------------------
+  > ul {
+    > li > a, > li > label:only-child, .o_dropdown_toggler {
+      padding: 0 $dropdown-item-padding-x * .5;
+    }
 
     > li {
-        > a, > label {
-            &:hover {
-                background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
-            }
-        }
+      &, > a {
+        @extend %-main-navbar-entry-base;
+      }
+
+      &.show > a {
+        @extend %-main-navbar-entry-active;
+      }
+
+      > a {
+        @extend %-main-navbar-entry-bg-hover;
+      }
+    }
+  }
+
+  // = Main Navbar Elements
+  // --------------------------------------------------------------------------
+  .o_menu_toggle, .o_navbar_apps_menu {
+    @extend %-main-navbar-entry-base;
+    font-size: $-backend-h3-font-size;
+    grid-area: apps;
+  }
+
+  .o_menu_toggle { // Enterprise-legacy only
+    @extend %-main-navbar-entry-padding;
+  }
+
+  .o_menu_brand {
+    @extend %-main-navbar-entry-base;
+    @extend %-main-navbar-entry-padding;
+    padding-left: 0;
+    grid-area: brand;
+    font-size: $-backend-h2-font-size;
+    font-weight: $-backend-font-weight-bold;
+
+    @include hover() {
+      background-color: transparent;
+    }
+  }
+
+  .o_menu_sections {
+    display: flex;
+    grid-area: sections;
+
+    > .o_dropdown_item {
+      @extend %-main-navbar-entry-padding;
     }
 
-    .show .dropdown-toggle {
-        background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
+    .o_more_dropdown_section_group {
+      padding: $-backend-entry-vpadding $-backend-entry-hpadding;
+      margin-top: .8em;
+
+      &:first-child {
+        margin-top: $dropdown-padding-y * -1;
+        padding-top: $dropdown-padding-y * 1.5;
+      }
     }
+  }
+
+  .o_menu_systray {
+    grid-area: systray;
+    display: flex;
+  }
 }
-.o_main_navbar {
-    position: relative;
-    height: $o-navbar-height;
-    border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+
+// = SuperUser Design
+// ============================================================================
+body.o_is_superuser .o_menu_systray {
+  position: relative;
+  background: repeating-linear-gradient(135deg, #d9b904, #d9b904 10px, #373435 10px, #373435 20px);
+
+  &:before {
+    content: "";
+    @include o-position-absolute(2px, 2px, 2px, 2px);
     background-color: $o-brand-odoo;
-    color: white;
-
-    > a, > button {
-        float: left;
-        height: $o-navbar-height;
-        border: none;
-        padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding;
-        line-height: $o-navbar-height;
-        background-color: transparent;
-        text-align: center;
-        color: inherit;
-
-        font-size: 18px;
-        user-select: none;
-
-        &:hover, &:focus {
-            background-color: $o-navbar-inverse-link-hover-bg;
-            color: inherit;
-        }
-        &:focus, &:active, &:focus:active {
-            outline: none;
-        }
-    }
-
-    .o_app {
-        cursor: pointer;
-    }
-
-    > .o_menu_brand {
-        display: block;
-        float: left;
-        margin-right: 35px;
-        user-select: none;
-        color: white;
-        font-size: 22px;
-        font-weight: 500;
-        line-height: $o-navbar-height;
-        cursor: pointer;
-    }
-
-    > .o_menu_toggle {
-        margin-right: 5px;
-    }
-
-    > ul {
-        display: block;
-        float: left;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        > li {
-            position: relative;
-            display: block;
-            float: left;
-
-            > a {
-                display: block;
-
-                &:focus, &:active, &:focus:active {
-                    outline: none;
-                }
-                &, &:hover, &:focus {
-                    text-decoration: none;
-                }
-            }
-
-            > a, > label {
-                height: $o-navbar-height;
-                padding: 0 10px;
-                color: white;
-                line-height: $o-navbar-height;
-
-                &:hover {
-                    background-color: $o-navbar-inverse-link-hover-bg;
-                }
-            }
-
-            &.o_extra_menu_items {
-                > a {
-                    width: $o-navbar-height;
-                    text-align: center;
-                }
-                &.show > ul {
-                    padding: 0;
-
-                    > li {
-                        > a {
-                            background-color: $o-brand-odoo;
-                            color: white;
-                            border-bottom: 1px solid $o-brand-lightsecondary;
-
-                            &.dropdown-toggle {
-                                background-color: lighten($o-brand-odoo, 15%);
-                                pointer-events: none; // hack to prevent clicking on it because dropdown always opened
-                            }
-                        }
-                        > .dropdown-menu { // remove dropdown-menu default style as it is nested in another one
-                            position: static;
-                            float: none;
-                            display: block;
-                            border: none;
-                            box-shadow: none;
-                            max-height: none;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.o_menu_systray {
-            float: right;
-        }
-    }
-
-    .dropdown-menu.show {
-        max-height: 90vh; // the dropdown should not overstep the viewport
-        min-width: 100%;
-        overflow: auto;
-        margin-top: 0;
-
-        @for $index from 3 through 5 {
-            .o_menu_header_lvl_#{$index}, .o_menu_entry_lvl_#{$index} {
-                padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
-            }
-        }
-    }
-
-    .show .dropdown-toggle {
-        background-color: $o-navbar-inverse-link-hover-bg;
-    }
-    .o_user_menu {
-        margin-left: 6px;
-
-        > a {
-            padding-right: $o-horizontal-padding;
-        }
-
-        .oe_topbar_avatar {
-            height: 26px;
-            width: 26px;
-            object-fit: cover;
-            transform: translateY(-2px);
-        }
-    }
+  }
 }
diff --git a/addons/web/static/src/legacy/scss/navbar_mobile.scss b/addons/web/static/src/legacy/scss/navbar_mobile.scss
index f4593436163..f043c0feb8f 100644
--- a/addons/web/static/src/legacy/scss/navbar_mobile.scss
+++ b/addons/web/static/src/legacy/scss/navbar_mobile.scss
@@ -1,90 +1,101 @@
+// Achieve a top-menu design visually similar to the backend's 'burger' one.
 
-.o_main_navbar {
-    .o_app {
-        @include media-breakpoint-down(sm) {
-            float: none;
-            margin: 0;
-            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-            color: transparent !important;
-        }
-    }
-
-    > .o_menu_brand {
-        @include media-breakpoint-down(sm) {
-            float: none;
-            margin: 0;
-            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-            color: transparent !important;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        transition: height 200ms linear 0s;
-
-        position: relative;
-        height: $o-navbar-height;
-
-        > ul {
-            > li {
-                float: none;
-                .dropdown-backdrop {
-                    display: none;
-                }
-
-                .dropdown-menu.show {
-                    max-height: none;
-                }
-            }
-
-            &.o_menu_sections {
-                width: 100%;
-                display: none;
-
-                .dropdown-menu.show {
-                    position: static;
-                    float: none;
-                    background-color: transparent;
-                    box-shadow: none;
-                    border: none;
-                    overflow: visible;
-
-                    > .dropdown-item {
-                        background-color: transparent;
-                        color: inherit;
-                    }
-                }
-            }
-
-            &.o_menu_systray {
-                @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
-                height: $o-navbar-height;
-                text-align: right;
-
-                > li {
-                    display: inline-block;
-
-                    .dropdown-menu.show {
-                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
-                        position: fixed;
-                        width: auto;
-                    }
-                }
-
-                .o_user_menu .oe_topbar_name {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
+// = Mobile Main Navbar
+// ============================================================================
 @include media-breakpoint-down(sm) {
-    body.o_mobile_menu_opened > .o_main_navbar {
-        height: 100%;
-        overflow: auto;
-        .o_menu_sections {
+    #oe_main_menu_navbar.o_main_navbar {
+
+        // = Scoped Variables
+        //
+        // Variables scopend within the current context that mirror backend's
+        // boostrap values.
+        // --------------------------------------------------------------------
+        $-bg: darken($o-brand-odoo, 10%);
+        $-color: color-yiq($-bg);
+        $-font-size-base: 16px;
+        $-font-size-lg: 18px;
+        $-entry-hover-bg: rgba(invert($-color), .08);
+
+        // = Invalidate top-menu native 'grid' layout
+        // --------------------------------------------------------------------
+        &, .o_menu_sections li, .dropdown-menu.show {
             display: block;
         }
+
+        .o_menu_sections li, .dropdown-menu.show {
+            position: relative;
+            width: 100%;
+            height: auto;
+        }
+
+        // = Design
+        // --------------------------------------------------------------------
+        .o_mobile_menu_toggle,
+        .dropdown-toggle,
+        .dropdown-item,
+        .o_menu_sections > .css_published {
+            height: $o-navbar-height;
+            @include o-hover-text-color(rgba($-color, .9), $-color);
+        }
+
+        .o_menu_sections {
+            @include o-position-absolute($o-navbar-height, 0, 0, 0);
+            display: none;
+            overflow: auto;
+            background-color: $-bg;
+
+            > li > a {
+                font-size: $-font-size-lg;
+            }
+
+            li.css_published:hover {
+                background-color: $-entry-hover-bg;
+            }
+        }
+
+        .dropdown-divider {
+            border-top-color: rgba($-color, .06);
+            margin-left: $dropdown-item-padding-x;
+            margin-right: $dropdown-item-padding-x;
+        }
+
+        .dropdown.show {
+            &, .dropdown-toggle, .dropdown-item, .dropdown-menu {
+                background-color: darken($-bg, 5%);
+            }
+
+            > .dropdown-toggle {
+                @include o-hover-text-color($-color, $-color);
+                outline: 0;
+                box-shadow: inset 0 1px 0 rgba(invert($-color), .1);
+            }
+
+            .dropdown-menu {
+                border: 0;
+                padding-top: 0;
+                box-shadow: inset 0 -1px 0 rgba($-color, .1);
+            }
+
+            .dropdown-item {
+                display: flex;
+                align-items: center;
+                font-size: $-font-size-base;
+            }
+        }
+
+        // = Toggle Menu (open)
+        // --------------------------------------------------------------------
+        body.o_mobile_menu_opened > & {
+            height: 100%;
+
+            .o_menu_sections {
+                display: block;
+            }
+
+            .o_mobile_menu_toggle:before {
+                content: "\f00d"
+            }
+        }
     }
 }
 
diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss
index 44fd1a8625c..685673a2594 100644
--- a/addons/web/static/src/legacy/scss/primary_variables.scss
+++ b/addons/web/static/src/legacy/scss/primary_variables.scss
@@ -71,6 +71,8 @@ $o-form-spacing-unit: 5px !default;
 $o-horizontal-padding: 16px !default;
 $o-innergroup-rpadding: 45px !default;
 $o-dropdown-hpadding: 20px !default;
+$o-dropdown-vpadding: 3px !default;
+$o-dropdown-box-shadow: 0 1rem 1.1rem rgba(#000, .1) !default;
 
 $o-sheet-vpadding: 24px !default;
 
diff --git a/addons/web/static/src/legacy/scss/search_view.scss b/addons/web/static/src/legacy/scss/search_view.scss
index f52c9e9f8bf..e58e21d1326 100644
--- a/addons/web/static/src/legacy/scss/search_view.scss
+++ b/addons/web/static/src/legacy/scss/search_view.scss
@@ -80,89 +80,6 @@
     }
 }
 
-.o_search_options .o_dropdown_toggler_btn:first-child {
-    // apply the padding to the first element so that when the `favorites` menu goes under
-    // the `filters` menu, they're still aligned
-    margin-right: 15px;
-}
-
-// Dropdowns
-.o_search_options .o_dropdown {
-    color: $o-main-text-color;
-    cursor: pointer;
-    display: inline-block;
-    user-select: none;  // Prevent text selection when toggling the dropdowns
-    white-space: nowrap;  // prevent the arrow from going under the dropdown when too little space
-
-    .o_dropdown_title {
-        padding: 0 0.3rem;
-    }
-
-    .o_dropdown_caret {
-        font-size: 12px;
-        width: 1rem;
-    }
-
-    &:hover,
-    &.show {
-
-        .o_dropdown_toggler_btn {
-            color: darken($o-main-text-color, 10%);
-        }
-    }
-
-    .o_dropdown_menu {
-
-        ul.o_embed_menu {
-            padding: 0;
-        }
-
-        a.dropdown-item {
-            align-items: center;
-            display: flex;
-            position: relative;
-
-            .o_item_description {
-                flex: 1;
-            }
-
-            .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-            }
-
-            .o_icon_right + .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 1.25);
-            }
-        }
-
-        .o_menu_item_options {
-            list-style: none;
-            margin-bottom: 1rem;
-            padding: 0;
-        }
-    }
-}
-
-// Open and closed carets in dropdowns
-.o_closed_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-right;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-.o_open_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-down;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-
 // Filter menu
 .o_filter_menu {
 
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index bc1d814b26f..c05013ec94a 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -314,29 +314,29 @@
     margin-top: 0;
 }
 @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
+    margin: -1px -1px 1px;
     padding: $padding-base/2 $padding-base;
-    border: none;
-    border-left: 1px solid transparent;
+    border: 1px solid transparent;
+    border-bottom: none;
     vertical-align: top;
-    color: $body-color;
+    @include o-hover-text-color($body-color, $headings-color);
 
-    &:hover {
-        color: $headings-color;
-    }
     &:focus, &:active, &:focus:active {
         outline: none;
+        box-shadow: none;
     }
 }
 @mixin o-kanban-dropdown-open {
     position: relative;
     background: white;
-    border-color: gray('400');
+    border-color: $border-color;
     z-index: $zindex-dropdown + 1;
 }
 @mixin o-kanban-dropdown-menu {
     @include o-position-absolute($right: -1px);
-    margin-top: -1px;
-    border-color: gray('400');
+    margin-top: -2px;
+    border-color: $border-color;
+    border-top-right-radius: 0;
 }
 @mixin o-kanban-colorpicker {
     max-width: 150px;
@@ -383,16 +383,11 @@
     padding: 0;
 
     > a {
+        @extend .dropdown-item;
         margin: auto auto auto (-$link-padding-gap);
         padding: 3px $link-padding-gap;
-        color: $body-color;
-        display: block;
-
-        &:hover {
-            background-color: gray('300');
-            color: $headings-color;
-        }
     }
+
     &:last-child {
         margin-bottom: 5px;
     }
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index afcbb640d88..e84ea420a78 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -154,15 +154,16 @@
     <div class="btn-group o_dropdown" t-att-class="{ show: state.open }">
         <button type="button"
             class="o_dropdown_toggler_btn btn btn-secondary"
+            t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
             t-att-aria-expanded="state.open ? 'true' : 'false'"
             tabindex="-1"
             t-on-click="state.open = !state.open"
             t-on-keydown="_onButtonKeydown"
             >
-            <i t-if="icon" t-att-class="icon"/>
+            <i t-if="icon" t-att-class="icon + ' small mr-1'"/>
             <span class="o_dropdown_title" t-esc="title"/>
-            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
-            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
+            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-fw fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw ml-auto fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
         </button>
         <ul t-if="state.open" t-attf-class="o_dropdown_menu dropdown-menu {{ dropdownMenuAlignClass }} show" role="menu"
             t-on-item-selected="_onItemSelected"
@@ -221,7 +222,7 @@
 <t t-name="web.DropdownMenuItem" owl="1">
     <li class="o_menu_item" role="menuitem" t-on-keydown="_onKeydown">
         <t t-if="canBeOpened">
-            <a class="o_menu_item_parent dropdown-item"
+            <a class="o_menu_item_parent dropdown-item d-flex align-items-center justify-content-between"
                 t-att-class="{ selected: props.isActive }"
                 t-att-aria-checked="props.isActive ? 'true' : 'false'"
                 role="menuitemcheckbox"
@@ -230,9 +231,9 @@
                 t-on-click.prevent="state.open = !state.open"
                 >
                 <t t-esc="props.description"/>
-                <i t-attf-class="o_icon_right fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+                <i t-attf-class="o_icon_right fa fa-fw mr-n4 fa-caret-{{ state.open ? 'down' : 'right' }}"/>
             </a>
-            <ul t-if="state.open" class="o_menu_item_options">
+            <ul t-if="state.open" class="o_menu_item_options pb-2 list-unstyled">
                 <t t-set="currentGroup" t-value="null"/>
                 <t t-foreach="props.options" t-as="option" t-key="option_index">
                     <li t-if="currentGroup !== null and currentGroup !== option.groupNumber"
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index b09d9ba78ee..26e374e6539 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -1,98 +1,12 @@
-.o_main_navbar {
-  background-color: $o-brand-odoo;
-  border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-  color: $white;
-  display: grid;
-  height: $o-navbar-height;
-  gap: 0px 0px;
-  grid-template-areas: "apps brand sections systray";
-  grid-template-columns:
-    $o-navbar-height
-    max-content
-    minmax($o-navbar-height, 1fr)
-    fit-content(100%);
-  grid-template-rows: $o-navbar-height;
-  min-width: min-content;
+// = Main Navbar
+//
 
-  .o_dropdown_toggler > * {
-    line-height: $o-navbar-height;
-  }
+// The MainNavbar design is shared with the frontent and, at the current state,
+// backend owl components coexist with legacy ones in the backend too.
+// In order to limit unnecessary code repetition and fragmantation, all main
+// design rules are located in legacy/scss/navbar.scss.
+// Moreover, if a new design rule is needed for the backend *only*, it can be
+// added here.
+// ============================================================================
 
-  .o_dropdown_toggler:hover,
-  .o_menu_brand:hover,
-  .o_dropdown_toggler.o_dropdown_active {
-    background-color: darken($o-brand-odoo, 10%);
-  }
-
-  .o_dropdown_item {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
-  }
-
-  .o_dropdown_menu_group {
-    color: $o-main-text-color;
-    line-height: initial;
-    padding: $o-horizontal-padding/2 0;
-    padding-left: $o-dropdown-hpadding;
-  }
-
-  .o_dropdown_menu_group_entry {
-    padding-left: $o-dropdown-hpadding * 1.5;
-  }
-
-  // ------------------------------------
-  // ------- Main Navbar Elements -------
-  // ------------------------------------
-  // Apps Menu
-  .o_navbar_apps_menu {
-    grid-area: apps;
-
-    // Button / toggler to open apps menu
-    button.o_dropdown_toggler {
-      padding: 0;
-      width: 100%;
-    }
-  }
-
-  // Brand (Current App Name)
-  .o_menu_brand {
-    grid-area: brand;
-    cursor: pointer;
-    font-size: 1.8rem;
-    font-weight: 500;
-    margin-right: 2rem;
-    padding: 0 $o-horizontal-padding;
-    user-select: none;
-  }
-
-  // Sections (Current App Menu)
-  .o_menu_sections {
-    grid-area: sections;
-    display: flex;
-
-    .o_menu_sections_more .o_dropdown_menu {
-      padding-top: 0;
-
-      .o_more_dropdown_section {
-        background-color: $o-brand-odoo;
-        border-bottom: 1px solid $o-brand-lightsecondary;
-        color: $white;
-        line-height: initial;
-        padding: 0.25rem 1.67rem;
-
-        &.o_more_dropdown_section_group {
-          background-color: lighten($o-brand-odoo, 15%);
-        }
-      }
-    }
-  }
-
-  // Systray
-  .o_menu_systray {
-    grid-area: systray;
-    display: flex;
-  }
-}
+// .o_main_navbar {}
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 7e9e1eb1c84..bc4254e63c1 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -117,7 +117,7 @@
           </t>
           <t t-else="">
             <div
-              class="o_more_dropdown_section o_more_dropdown_section_group"
+              class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
               t-esc="section.name" />
             <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
               <t t-set="items" t-value="section.childrenTree" />
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index fb267689202..32aec873e04 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -2,20 +2,18 @@
 <templates xml:space="preserve">
 
 <t t-name="web.SwitchCompanyMenu" owl="1">
-    <li class="o_switch_company_menu">
-        <Dropdown>
-            <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
-                <t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
-            </span>
-            <t t-set-slot="menu">
-                <t t-foreach="user.allowed_companies" t-as="company_id">
-                    <t t-call="web.SwitchCompanyItem">
-                        <t t-set="company" t-value="user.allowed_companies[company_id]" />
-                    </t>
+    <Dropdown class="o_switch_company_menu">
+        <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
+            <t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
+        </span>
+        <t t-set-slot="menu">
+            <t t-foreach="user.allowed_companies" t-as="company_id">
+                <t t-call="web.SwitchCompanyItem">
+                    <t t-set="company" t-value="user.allowed_companies[company_id]" />
                 </t>
             </t>
-        </Dropdown>
-    </li>
+        </t>
+    </Dropdown>
 </t>
 
 
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index 22f65309dfa..d6002cec0d1 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -2696,7 +2696,12 @@ QUnit.module('Views', {
             View: PivotView,
             model: "partner",
             data: this.data,
-            arch: `<pivot/>`,
+            // have at least a measure to have a separator in the Measures dropdown:
+            //
+            // Foo
+            // -----
+            // Count
+            arch: `<pivot><field name="foo" type="measure"/></pivot>`,
         });
 
         // open the "Measures" menu
diff --git a/addons/web/static/tests/webclient/switch_company_menu_tests.js b/addons/web/static/tests/webclient/switch_company_menu_tests.js
index 3aa2bb911ad..f2f72e41a95 100644
--- a/addons/web/static/tests/webclient/switch_company_menu_tests.js
+++ b/addons/web/static/tests/webclient/switch_company_menu_tests.js
@@ -36,7 +36,7 @@ QUnit.module("SwitchCompanyMenu", (hooks) => {
         const scMenu = await mount(SwitchCompanyMenu, { env, target });
         registerCleanup(() => scMenu.destroy());
 
-        assert.strictEqual(scMenu.el.tagName.toUpperCase(), "LI");
+        assert.strictEqual(scMenu.el.tagName.toUpperCase(), "DIV");
         assert.hasClass(scMenu.el, "o_switch_company_menu");
         assert.strictEqual(scMenu.el.textContent, "Hermit");
 
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 14bf204b634..dbf2aaa671d 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -86,10 +86,17 @@ body.o_connected_user {
         text-decoration: none;
     }
     .dropdown-menu {
+        border-top: 0;
+        margin-top: 0;
+        background-clip: border-box;
         font-size: inherit;
         border-radius: 0;
         color: $dropdown-link-active-color;
     }
+    #oe_applications .dropdown-menu {
+        // Compensate #oe_applications's padding
+        margin-left: $dropdown-item-padding-x * -0.5;
+    }
 
     .o_menu_sections {
         .o_mobile_preview a {
@@ -99,8 +106,6 @@ body.o_connected_user {
     }
     .o_menu_systray {
         > li > a {
-            padding: 0 $grid-gutter-width/2;
-
             &.css_edit_dynamic{
                 padding: 0 $grid-gutter-width/4;
             }
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index a4fc8dbd64b..7cd2a0eed48 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -4,7 +4,7 @@
     <template id="website_publisher" name="Website Publisher">
         <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
             <li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
-                <label class="o_switch o_switch_danger js_publish_btn" t-att-accesskey="desktop_navbar and 'p'">
+                <label class="o_switch o_switch_danger js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
                     <input type="checkbox" t-att-checked="main_object.website_published"/>
                     <span/>
                     <span class="css_publish">Unpublished</span>
@@ -34,7 +34,7 @@
                 <ul id="oe_applications">
                     <li class="dropdown active">
                         <a class="dropdown-toggle full" data-toggle="dropdown" href="#" accesskey="h">
-                            <i class="fa fa-th-large"/> WEBSITE
+                            <i class="fa fa-th-large mr-2"/> WEBSITE
                         </a>
                         <div class="dropdown-menu" role="menu">
                             <!-- This will be populated on hover in JS -->
@@ -42,7 +42,7 @@
                     </li>
                 </ul>
 
-                <button type="button" class="fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
+                <button type="button" class="btn fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
 
                 <ul class="o_menu_sections" groups="website.group_website_designer">
                     <!-- Content -->
@@ -71,11 +71,11 @@
                         </div>
                     </li>
                     <t t-call="website.website_publisher">
-                        <t t-set="extra_classes" t-translation="off">d-block d-sm-block d-md-none</t>
+                        <t t-set="extra_classes" t-translation="off">d-flex d-sm-flex d-md-none</t>
                     </t>
                 </ul>
 
-                <ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
+                <ul class="o_menu_systray d-none d-md-flex" groups="website.group_website_publisher">
                     <t t-call="website.website_publisher">
                         <t t-set="extra_classes" t-value=""/>
                         <t t-set="desktop_navbar" t-value="true"/>