MetatroncubeSoftwareSolutions/Metatron_Student_ERP
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme Odoo's native mobile app drawer to match the teal brand

Browse Source 
The duplicate-hamburger fix removed our custom off-canvas sidebar on
mobile, deferring to Odoo's own small-screen navigation (.o_menu_toggle
-> .o_app_menu_sidebar, from web.NavBar.AppsMenu.Sidebar). That native
drawer is driven entirely by Odoo's own ui.isSmall JS check, independent
of any breakpoint here, and was never themed, so it fell back to stock
white/purple Odoo styling while the desktop .o_sidebar_custom sidebar is
fully branded. Re-skin .o_app_menu_sidebar (topbar, section list, app
list) with the same teal gradient so mobile and desktop match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
metatroncubeswdev 2026-10-24 00:31:30 -04:00
parent 0afe2adfd2
commit f35ee77433
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
View File

@ -111,6 +111,58 @@ body.o_web_client {
} }
} }
// 2b. MOBILE NATIVE APP DRAWER (web.NavBar.AppsMenu.Sidebar)
// ---------------------------------------------------------
// Below md, Odoo renders its own hamburger + off-canvas drawer
// (.o_menu_toggle -> .o_app_menu_sidebar) independent of any CSS here —
// it's driven by Odoo's own ui.isSmall JS check, not our breakpoints.
// It was never themed, so it fell back to stock white/purple Odoo styling
// while the desktop .o_sidebar_custom is fully branded. Re-skin it to match.
.o_app_menu_sidebar {
background: linear-gradient(135deg, #1f8f8f 0%, #144d4d 55%, #0d3d3d 100%) !important;
color: #ffffff !important;
width: 85vw !important;
max-width: 320px;
.o_sidebar_topbar {
background: rgba(0, 0, 0, 0.15) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
.btn.btn-primary {
background: rgba(255, 255, 255, 0.15) !important;
border-color: transparent !important;
color: #ffffff !important;
}
.o_sidebar_close {
color: #ffffff !important;
}
}
.o_burger_menu_content {
color: #ffffff !important;
// Current app header (icon + name), and app list items when
// the "All Apps" view is open
.fs-4.fw-bolder, .o_app {
color: #ffffff !important;
}
.o_app.bg-primary-subtle {
background-color: rgba(255, 255, 255, 0.15) !important;
}
// Section tree rendered by web.SectionMenu
ul.list-unstyled li {
color: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
&:active, &:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
}
}
}
// --------------------------------------------------------- // ---------------------------------------------------------
// APP SWITCHER & GLOBAL DROPDOWNS (Odoo appends these to body) // APP SWITCHER & GLOBAL DROPDOWNS (Odoo appends these to body)
// --------------------------------------------------------- // ---------------------------------------------------------