feat(portal): mobile sidebar hamburger toggle (vanilla JS)

20 lines, no framework. Toggles .o_fp_open on sidebar + backdrop.
Backdrop click closes drawer; navigating a sidebar link on mobile
auto-closes. No-ops gracefully when sidebar isn't on the page
(logged-out, 500 pages, etc.).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 13:30:10 -04:00
parent 009562913c
commit ada22a583f

View File

@@ -0,0 +1,48 @@
/**
* Fusion Plating — Portal sidebar hamburger toggle.
* Vanilla JS — no OWL / no jQuery. Loaded on every /my/* page.
* Below 768px the sidebar is translateX(-100%); toggling
* .o_fp_open on both sidebar + backdrop shows/hides it.
*/
(function () {
"use strict";
function init() {
var sidebar = document.querySelector(".o_fp_portal_sidebar");
var hamburger = document.querySelector(".o_fp_portal_hamburger");
var backdrop = document.querySelector(".o_fp_portal_backdrop");
if (!sidebar || !hamburger || !backdrop) {
return; // sidebar not on this page (logged-out, error pages, etc.)
}
function toggleOpen(force) {
var willOpen = (typeof force === "boolean")
? force
: !sidebar.classList.contains("o_fp_open");
sidebar.classList.toggle("o_fp_open", willOpen);
backdrop.classList.toggle("o_fp_open", willOpen);
}
hamburger.addEventListener("click", function (e) {
e.preventDefault();
toggleOpen();
});
backdrop.addEventListener("click", function () {
toggleOpen(false);
});
// Close when navigating to a sidebar link on mobile
sidebar.querySelectorAll("a.o_fp_sidebar_item").forEach(function (a) {
a.addEventListener("click", function () {
if (window.innerWidth < 769) {
toggleOpen(false);
}
});
});
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();