From c1d44d57309d5a9ed6e13ab93703689602019ec4 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Thu, 16 Apr 2026 16:22:24 +0200
Subject: [PATCH 1/2] [T2577] FIX: mobile menu now appears from the left

- REFACTOR: Improved mobile menu by increasing size and placing cart and language selector in the same row
- REFACTOR: increased the size of the language selector for better UX
- FIX: mobile menu now appears from the left
- FEAT: added an 'x' to close the menu
---
 my_compassion/views/my2_header_menu.xml       | 28 +++++++++-
 .../scss/components/_language_selector.scss   |  6 ++-
 .../static/src/scss/layout/_header.scss       | 52 +++++++++++++++++++
 .../views/template_header.xml                 | 13 +++++
 4 files changed, 96 insertions(+), 3 deletions(-)

diff --git a/my_compassion/views/my2_header_menu.xml b/my_compassion/views/my2_header_menu.xml
index 8beaf0ec0..68092c225 100644
--- a/my_compassion/views/my2_header_menu.xml
+++ b/my_compassion/views/my2_header_menu.xml
@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
+    <!-- Hide default cart -->
+    <template id="remove_native_cart" inherit_id="website_sale.template_header_default" name="Remove Native Cart">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="attributes">
+            <attribute name="t-if">False</attribute>
+        </xpath>
+    </template>
     <template id="my_compassion_dynamic_menu" inherit_id="website.template_header_default">
         <xpath expr="//div[@id='top_menu_collapse']/*[1]" position="before">
             <t t-if="request.session.uid">
@@ -27,9 +33,27 @@
                             <a class="nav-link" href="/my2/donations">My donations</a>
                         </li>
                     </t>
-                    <li class="nav-item d-flex d-md-none align-items-center">
-                        <t t-call="portal.language_selector" />
+                    <!-- Add cart and language selector to mobile menu -->
+                    <li
+                        class="nav-item d-flex d-md-none align-items-center justify-content-between w-100 mt-3 pt-3 border-top"
+                    >
+                        <ul class="navbar-nav flex-row mb-0">
+                            <t t-call="website_sale.header_cart_link">
+                                <t t-set="_icon" t-value="True" />
+                                <t t-set="_item_class" t-value="'nav-item'" />
+                                <t t-set="_link_class" t-value="'nav-link'" />
+                            </t>
+                        </ul>
+                        <div>
+                            <t t-call="portal.language_selector" />
+                        </div>
                     </li>
+                    <!-- Add cart to desktop menu -->
+                    <t t-call="website_sale.header_cart_link">
+                        <t t-set="_icon" t-value="True" />
+                        <t t-set="_item_class" t-value="'nav-item d-none d-lg-block'" />
+                        <t t-set="_link_class" t-value="'nav-link'" />
+                    </t>
                 </ul>
             </t>
         </xpath>
diff --git a/theme_compassion_2025/static/src/scss/components/_language_selector.scss b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
index 6e6402d94..524f24822 100644
--- a/theme_compassion_2025/static/src/scss/components/_language_selector.scss
+++ b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
@@ -112,7 +112,11 @@
     .js_language_selector {
         flex-direction: column;
         align-items: stretch;
-        height: 100%;
+        height: 50px;
+    }
+
+    .js_language_selector .btn {
+        font-size: 1.5rem;
     }
 
     .language-selector__dropdown-menu {
diff --git a/theme_compassion_2025/static/src/scss/layout/_header.scss b/theme_compassion_2025/static/src/scss/layout/_header.scss
index 8f416753e..694dd282d 100644
--- a/theme_compassion_2025/static/src/scss/layout/_header.scss
+++ b/theme_compassion_2025/static/src/scss/layout/_header.scss
@@ -30,3 +30,55 @@
     }
   }
 }
+
+/* Off-canvas mobile menu (Left to Right) */
+@include media-breakpoint-down(md) {
+    #top_menu_collapse {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 85vw;
+        max-width: 350px;
+        background-color: $white;
+        z-index: $zindex-fixed + 10;
+        overflow-y: auto;
+        padding: 1rem;
+        box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.15);
+
+        /* Override Bootstrap's default collapse vertical behavior */
+        display: block !important;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        height: 100vh !important;
+        max-height: 100vh !important;
+
+        /* Slide in when active */
+        &.show {
+            transform: translateX(0);
+            max-height: 100vh !important;
+        }
+
+        /* Override the vertical collapsing animation */
+        &.collapsing {
+            transform: translateX(-100%);
+            transition: transform 0.3s ease-in-out;
+            overflow: hidden;
+        }
+        .nav-item {
+            /* Increase font size and add padding for mobile UX */
+            .nav-link {
+                font-size: 1.25rem !important;
+                padding: 0.75rem;
+            }
+        }
+    }
+
+  #menu_close {
+    position:absolute;
+    top: 0;
+    right: 1.5rem;
+    z-index: $zindex-fixed + 11;
+    font-size: 4rem;
+  }
+}
diff --git a/theme_compassion_2025/views/template_header.xml b/theme_compassion_2025/views/template_header.xml
index f5eccf2b2..3ab323da1 100644
--- a/theme_compassion_2025/views/template_header.xml
+++ b/theme_compassion_2025/views/template_header.xml
@@ -30,6 +30,19 @@
         <xpath expr="//div[@id='top_menu_collapse']" position="before">
             <div class="flex-grow-1" />
         </xpath>
+        <!-- Add a close button inside the menu -->
+        <xpath expr="//div[@id='top_menu_collapse']" position="inside">
+            <button
+                id="menu_close"
+                type="button"
+                class="close d-lg-none position-absolute"
+                aria-label="Close"
+                data-toggle="collapse"
+                data-target="#top_menu_collapse"
+            >
+                <span aria-hidden="true">&amp;times;</span>
+            </button>
+        </xpath>
         <!-- Move the login button out of the main menu and adapt its style -->
         <xpath expr="//t[@t-call='portal.placeholder_user_sign_in']" position="replace" />
         <xpath expr="//t[@t-call='portal.user_dropdown']" position="replace" />

From 1a5a7918695e326e249166bad58826ae70759cac Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 17 Apr 2026 09:07:55 +0200
Subject: [PATCH 2/2] [T2577] FIX: UI improvements and edge case fixes

- FIX: added language selector to hamburger menu on mobile screens
- REFACTOR: simplified language selector scss
- FEAT: added visibility selectors for better accessibility support
- FIX: hiding hamburger menu on md screens and added margin to language selector
---
 my_compassion/views/my2_header_menu.xml       | 11 ++++--
 .../scss/components/_language_selector.scss   | 36 ++++++++++++++-----
 .../static/src/scss/layout/_header.scss       |  3 ++
 .../views/template_header.xml                 | 10 ++++--
 4 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/my_compassion/views/my2_header_menu.xml b/my_compassion/views/my2_header_menu.xml
index 68092c225..45c4cf4a9 100644
--- a/my_compassion/views/my2_header_menu.xml
+++ b/my_compassion/views/my2_header_menu.xml
@@ -35,7 +35,7 @@
                     </t>
                     <!-- Add cart and language selector to mobile menu -->
                     <li
-                        class="nav-item d-flex d-md-none align-items-center justify-content-between w-100 mt-3 pt-3 border-top"
+                        class="nav-item d-flex d-lg-none align-items-center justify-content-between w-100 mt-3 pt-3 border-top"
                     >
                         <ul class="navbar-nav flex-row mb-0">
                             <t t-call="website_sale.header_cart_link">
@@ -44,7 +44,7 @@
                                 <t t-set="_link_class" t-value="'nav-link'" />
                             </t>
                         </ul>
-                        <div>
+                        <div class="d-block d-md-none">
                             <t t-call="portal.language_selector" />
                         </div>
                     </li>
@@ -56,6 +56,13 @@
                     </t>
                 </ul>
             </t>
+            <t t-else="">
+                <ul class="navbar-nav w-100 d-flex d-md-none mt-5">
+                    <li class="nav-item d-flex justify-content-end w-100 pt-3 pr-2">
+                        <t t-call="portal.language_selector" />
+                    </li>
+                </ul>
+            </t>
         </xpath>
     </template>
     <template
diff --git a/theme_compassion_2025/static/src/scss/components/_language_selector.scss b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
index 524f24822..439a59e99 100644
--- a/theme_compassion_2025/static/src/scss/components/_language_selector.scss
+++ b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
@@ -112,21 +112,38 @@
     .js_language_selector {
         flex-direction: column;
         align-items: stretch;
-        height: 50px;
-    }
-
-    .js_language_selector .btn {
-        font-size: 1.5rem;
+        height: auto;
+
+        /* change color to match menu items */
+        .btn,
+        .btn .icon-chevron-down,
+        .dropdown-menu .dropdown-item {
+            color: rgba(0, 0, 0, 0.5) !important;
+        }
+
+        /* Increase language selector size */
+        .btn {
+            font-size: 1.5rem;
+            min-height: 48px;
+        }
     }
 
+    /* Makes sure dropdown expands towards the bottom
+       and doesn't push parent up.
+     */
     .language-selector__dropdown-menu {
-        position: static !important;
+        position: absolute !important;
+        top: 100% !important;
+        bottom: auto !important;
+        right: 0 !important;
+        left: auto !important;
+        font-size: 1.25rem !important;
+
         transform: none !important;
+        margin-top: 0.5rem;
+        width: max-content;
     }
 
-    .language-selector__icon_left {
-          display: none !important;
-      }
 
     /* Mobile-Specific Animation
        Desktop 'scaleY' animation can look weird in flow layout.
@@ -139,6 +156,7 @@
 
     .animation-drop.show {
         animation: mobileAccordionDrop 0.3s ease-out forwards;
+        display: block !important;
     }
 }
 
diff --git a/theme_compassion_2025/static/src/scss/layout/_header.scss b/theme_compassion_2025/static/src/scss/layout/_header.scss
index 694dd282d..7bdca8b4e 100644
--- a/theme_compassion_2025/static/src/scss/layout/_header.scss
+++ b/theme_compassion_2025/static/src/scss/layout/_header.scss
@@ -48,6 +48,7 @@
 
         /* Override Bootstrap's default collapse vertical behavior */
         display: block !important;
+        visibility: hidden;
         transform: translateX(-100%);
         transition: transform 0.3s ease-in-out;
         height: 100vh !important;
@@ -55,12 +56,14 @@
 
         /* Slide in when active */
         &.show {
+            visibility: visible;
             transform: translateX(0);
             max-height: 100vh !important;
         }
 
         /* Override the vertical collapsing animation */
         &.collapsing {
+            visibility: visible;
             transform: translateX(-100%);
             transition: transform 0.3s ease-in-out;
             overflow: hidden;
diff --git a/theme_compassion_2025/views/template_header.xml b/theme_compassion_2025/views/template_header.xml
index 3ab323da1..ebdfc6793 100644
--- a/theme_compassion_2025/views/template_header.xml
+++ b/theme_compassion_2025/views/template_header.xml
@@ -1,11 +1,14 @@
 <!-- oca-hooks:disable=xml-dangerous-qweb-replace-low-priority -->
 <odoo>
     <template id="template_header_default" inherit_id="website.template_header_default">
-        <!-- Move the hamburger menu to the left -->
+        <!-- Move the hamburger menu to the left & hide on md screens -->
         <xpath expr="//t[@t-call='website.navbar_toggler']" position="replace" />
         <xpath expr="//t[@t-call='website.placeholder_header_brand']" position="before">
             <t t-call="website.navbar_toggler">
-                <t t-set="_toggler_class" t-value="'mr-4 text-primary'" />
+                <t
+                    t-set="_toggler_class"
+                    t-value="'mr-4 text-primary d-md-none' if not request.session.uid else 'mr-4 text-primary'"
+                />
             </t>
         </xpath>
         <!-- Improve the layout of the navbar and add the svg -->
@@ -51,7 +54,8 @@
                 <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-4'" />
                 <t t-set="_link_class" t-value="'nav-link font-weight-bold'" />
             </t>
-            <div class="d-none d-md-block ml-lg-3">
+            <!-- Add a language selector to the left of the user dropdown on desktop -->
+            <div class="d-none d-md-block ml-md-3">
                 <t t-call="portal.language_selector" />
             </div>
         </xpath>