From a0566b122541f672976286c53641a6868168e8c3 Mon Sep 17 00:00:00 2001
From: Joao Figueiredo <joao.figueiredo@jfig.net>
Date: Thu, 23 Jul 2026 02:17:19 +0100
Subject: [PATCH] fix: collapse sidebar on small-screen load

---
 app.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index cf07873..e031c41 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,7 @@ const DWELLING_PARCEL_LAYER_NAME = "xpro:parcelas_habitacao";
 const FEATURE_INFO_LAYER_NAMES = new Set(["parcelas", "predios"]);
 const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientation"];
 const COMPASS_HEADING_DEADBAND = 2;
+const SMALL_SCREEN_MEDIA_QUERY = "(max-width: 920px)";
 
 const els = {
   appShell: document.querySelector(".app-shell"),
@@ -140,6 +141,12 @@ map.addInteraction(areaZoomInteraction);
 let availableLayers = [];
 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.backgroundSelect.addEventListener("change", syncBackground);
 els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false));
@@ -176,12 +183,12 @@ areaZoomInteraction.on("boxcancel", () => {
 
 loadLayers();
 
-function setSidebarCollapsed(collapsed) {
+function setSidebarCollapsed(collapsed, { focus = true } = {}) {
   els.appShell.classList.toggle("sidebar-is-collapsed", collapsed);
   els.sidebar.inert = collapsed;
   els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed));
 
-  if (collapsed) {
+  if (collapsed && focus) {
     els.sidebarOpen.focus();
   }
 }