feat: add collapsible map controls

app.js

@@ -4,6 +4,10 @@ const API_WMS = "/api/wms";
 const PARCEL_LAYER_NAME = "xpro:parcelas";
 
 const els = {
+  appShell: document.querySelector(".app-shell"),
+  sidebar: document.getElementById("sidebar"),
+  sidebarOpen: document.getElementById("sidebar-open"),
+  sidebarClose: document.getElementById("sidebar-close"),
   status: document.getElementById("status"),
   layerList: document.getElementById("layer-list"),
   layerCount: document.getElementById("layer-count"),
@@ -77,9 +81,26 @@ let selectedLayers = [];
 
 els.parcelSearchForm.addEventListener("submit", searchParcela);
 els.backgroundSelect.addEventListener("change", syncBackground);
+els.sidebarOpen.addEventListener("click", () => setSidebarCollapsed(false));
+els.sidebarClose.addEventListener("click", () => setSidebarCollapsed(true));
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && !els.appShell.classList.contains("sidebar-is-collapsed")) {
+    setSidebarCollapsed(true);
+  }
+});
 
 loadLayers();
 
+function setSidebarCollapsed(collapsed) {
+  els.appShell.classList.toggle("sidebar-is-collapsed", collapsed);
+  els.sidebar.inert = collapsed;
+  els.sidebarOpen.setAttribute("aria-expanded", String(!collapsed));
+
+  if (collapsed) {
+    els.sidebarOpen.focus();
+  }
+}
+
 async function searchParcela(event) {
   event.preventDefault();