Skip to content

[T2577] FIX: mobile menu now appears from the left #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Danielgergely wants to merge 2 commits into
base: 14.0
Choose a base branch
from
Open

[T2577] FIX: mobile menu now appears from the left #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1d44d5
[T2577] FIX: mobile menu now appears from the left
Danielgergely Apr 16, 2026
1a5a791
[T2577] FIX: UI improvements and edge case fixes
Danielgergely Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion my_compassion/views/my2_header_menu.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Comment thread
Danielgergely marked this conversation as resolved.
Expand Down Expand Up @@ -27,7 +33,32 @@
<a class="nav-link" href="/my2/donations">My donations</a>
</li>
</t>
<li class="nav-item d-flex d-md-none align-items-center">
<!-- Add cart and language selector to mobile menu -->
<li
class="nav-item d-flex d-lg-none align-items-center justify-content-between w-100 mt-3 pt-3 border-top"
Comment thread
Danielgergely marked this conversation as resolved.
>
<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 class="d-block d-md-none">
<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'" />
Comment thread
Danielgergely marked this conversation as resolved.
<t t-set="_link_class" t-value="'nav-link'" />
</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>
Expand Down
32 changes: 27 additions & 5 deletions theme_compassion_2025/static/src/scss/components/_language_selector.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,38 @@
.js_language_selector {
flex-direction: column;
align-items: stretch;
height: 100%;
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;
Comment thread
Danielgergely marked this conversation as resolved.

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.
Expand All @@ -135,6 +156,7 @@

.animation-drop.show {
animation: mobileAccordionDrop 0.3s ease-out forwards;
display: block !important;
}
}

Expand Down
55 changes: 55 additions & 0 deletions theme_compassion_2025/static/src/scss/layout/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,58 @@
}
}
}

/* 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;
visibility: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
height: 100vh !important;
max-height: 100vh !important;

/* 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;
}
Comment thread
Danielgergely marked this conversation as resolved.
.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;
Comment thread
Danielgergely marked this conversation as resolved.
}
}
23 changes: 20 additions & 3 deletions theme_compassion_2025/views/template_header.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'"
/>
Comment thread
Danielgergely marked this conversation as resolved.
</t>
</xpath>
<!-- Improve the layout of the navbar and add the svg -->
Expand All @@ -30,6 +33,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"
Comment thread
Danielgergely marked this conversation as resolved.
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" />
Expand All @@ -38,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>
Expand Down
Loading