fix: collapse sidebar on small-screen load

This commit is contained in:
2026-07-23 02:17:19 +01:00
parent 3a7bfbf0c2
commit a0566b1225
+9 -2
View File
@@ -6,6 +6,7 @@ const DWELLING_PARCEL_LAYER_NAME = "xpro:parcelas_habitacao";
const FEATURE_INFO_LAYER_NAMES = new Set(["parcelas", "predios"]); const FEATURE_INFO_LAYER_NAMES = new Set(["parcelas", "predios"]);
const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientation"]; const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientation"];
const COMPASS_HEADING_DEADBAND = 2; const COMPASS_HEADING_DEADBAND = 2;
const SMALL_SCREEN_MEDIA_QUERY = "(max-width: 920px)";
const els = { const els = {
appShell: document.querySelector(".app-shell"), appShell: document.querySelector(".app-shell"),
@@ -140,6 +141,12 @@ map.addInteraction(areaZoomInteraction);
let availableLayers = []; let availableLayers = [];
let selectedLayers = []; let selectedLayers = [];
// Keep the existing responsive breakpoint as the source of truth for the
// initial panel state. The menu remains available through the open control.
if (window.matchMedia(SMALL_SCREEN_MEDIA_QUERY).matches) {
setSidebarCollapsed(true, { focus: false });
}
els.parcelSearchForm.addEventListener("submit", searchParcela); els.parcelSearchForm.addEventListener("submit", searchParcela);
els.backgroundSelect.addEventListener("change", syncBackground); els.backgroundSelect.addEventListener("change", syncBackground);
els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false)); els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false));
@@ -176,12 +183,12 @@ areaZoomInteraction.on("boxcancel", () => {
loadLayers(); loadLayers();
function setSidebarCollapsed(collapsed) { function setSidebarCollapsed(collapsed, { focus = true } = {}) {
els.appShell.classList.toggle("sidebar-is-collapsed", collapsed); els.appShell.classList.toggle("sidebar-is-collapsed", collapsed);
els.sidebar.inert = collapsed; els.sidebar.inert = collapsed;
els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed)); els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed));
if (collapsed) { if (collapsed && focus) {
els.sidebarOpen.focus(); els.sidebarOpen.focus();
} }
} }