[IMP] portal, website, *: review navbar user dropdown

*: website_sale

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

Co-authored-by: qsm-odoo <qsm@odoo.com>

4 files changed, 35 insertions, 35 deletions

diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index be50f1c20e8..9a3d4560e6e 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -59,19 +59,6 @@ header {
 }
 .navbar {
     margin-bottom: 0;
-
-    ul.nav > li {
-        &.divider {
-            display: none;
-            margin: $nav-link-padding-y ($nav-link-padding-x * 0.5);
-            border-right: 1px solid;
-            opacity: 0.25;
-        }
-
-        &.active + .divider {
-            visibility: hidden;
-        }
-    }
     .nav.navbar-nav.float-right {
         @include media-breakpoint-down(sm) {
             float: none!important;
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 8db9facdada..1cb3f1d2c40 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -15,19 +15,13 @@
                         <span class="navbar-toggler-icon o_not_editable"/>
                     </button>
                     <div class="collapse navbar-collapse" id="top_menu_collapse">
-                        <!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
                         <ul class="nav navbar-nav ml-auto text-right" id="top_menu">
-                            <li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
-                            <li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
-                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
-                                    <b>
-                                        <span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
-                                    </b>
-                                </a>
-                                <div class="dropdown-menu js_usermenu" role="menu">
-                                    <a id="o_logout" class="dropdown-item" t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a>
-                                </div>
-                            </li>
+                            <t t-call="portal.user_dropdown">
+                                <t t-set="_user_name" t-value="true"/>
+                                <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                                <t t-set="_link_class" t-value="'nav-link'"/>
+                                <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                            </t>
                         </ul>
                     </div>
                 </div>
@@ -71,6 +65,21 @@
         </div>
     </template>
 
+    <template id="user_dropdown" name="Portal User Dropdown">
+        <t t-set="is_connected" t-value="not user_id._is_public()"/>
+        <li t-if="is_connected" t-attf-class="#{_item_class}">
+            <a href="#" role="button" data-toggle="dropdown" t-attf-class="dropdown-toggle #{_link_class}">
+                <img t-if="_avatar" t-att-src="image_data_uri(user_id.image_256)" t-attf-class="rounded-circle #{_avatar_class}" width="24" height="24" alt="" loading="eager"/>
+                <i t-if="_icon" t-attf-class="fa fa-1x fa-fw fa-user-circle-o #{_icon_class}"/>
+                <span t-if="_user_name" t-attf-class="#{_user_name_class}" t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
+            </a>
+            <div t-attf-class="dropdown-menu js_usermenu #{_dropdown_menu_class}" role="menu">
+                <div id="o_logout_divider" class="dropdown-divider"/>
+                <a t-attf-href="/web/session/logout?redirect=/" role="menuitem" id="o_logout" class="dropdown-item">Logout</a>
+            </div>
+        </li>
+    </template>
+
     <template id="portal_breadcrumbs" name="Portal Breadcrumbs">
         <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 py-2 flex-grow-1 row">
             <li class="breadcrumb-item ml-1"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
@@ -525,8 +534,8 @@
         </ul>
     </template>
 
-    <template id="my_account_link" name="Link to frontend portal" inherit_id="portal.frontend_layout">
-        <xpath expr="//a[@id='o_logout']" position="before">
+    <template id="my_account_link" name="Link to frontend portal" inherit_id="portal.user_dropdown">
+        <xpath expr="//*[@id='o_logout_divider']" position="before">
             <a href="/my/home" role="menuitem" class="dropdown-item">My Account</a>
         </xpath>
     </template>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ee1ffb1fbc2..ae91cfa72ee 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -134,13 +134,7 @@
     <xpath expr="//header//ul[@id='top_menu']" position="attributes">
         <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>
-    </xpath>
-    <xpath expr="//header//ul[@id='top_menu']/li[hasclass('dropdown')]" position="attributes">
-        <attribute name="t-if">website.user_id != user_id</attribute>
-    </xpath>
-    <xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="before">
+    <xpath expr="//header//ul[@id='top_menu']/t[@t-call='portal.user_dropdown']" position="before">
         <t t-foreach="website.menu_id.child_id" t-as="submenu">
             <t t-call="website.submenu">
                 <t t-set="item_class" t-value="'nav-item'"/>
@@ -207,6 +201,16 @@
     </xpath>
 </template>
 
+<template id="user_dropdown" inherit_id="portal.user_dropdown">
+    <xpath expr="//t[@t-set='is_connected']" position="replace">
+        <t t-set="is_connected" t-value="False"/>
+        <t t-if="website">
+            <t t-set="is_connected" t-value="website.user_id != user_id"/>
+        </t>
+        <t t-else="">$0</t>
+    </xpath>
+</template>
+
 <template id="website_name" inherit_id="website.layout" name="Website Name" active="False">
     <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
         <a class="navbar-brand" href="/">My Website</a>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 546a304f160..7221ef4f94a 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -74,7 +74,7 @@
     </template>
 
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
-        <xpath expr="//header//ul[@id='top_menu']/li" position="before">
+        <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
             <t t-set="show_cart" t-value="true"/>
             <li class="nav-item divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->