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:
@@ -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();
|
||||||
|
}
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user