From f35ee774339dc91483dc113fb7d7aed2e1bbabce Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Sat, 24 Oct 2026 00:31:30 -0400
Subject: [PATCH] Theme Odoo's native mobile app drawer to match the teal brand

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>
---
 .../static/src/scss/backend_forms.scss        | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss b/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
index 9dc73de..a67d13d 100644
--- a/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
+++ b/addons/theme_student_erp_custom/static/src/scss/backend_forms.scss
@@ -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)
 // ---------------------------------------------------------