diff --git a/Dockerfile b/Dockerfile index 80e2be9..814398c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,6 +9,7 @@ COPY server.js ./ COPY index.html ./ COPY app.js ./ COPY styles.css ./ +COPY assets ./assets ENV HOST=0.0.0.0 ENV PORT=4173 diff --git a/app.js b/app.js index 579ce54..a2dfe87 100644 --- a/app.js +++ b/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(); diff --git a/assets/brand/xpro-logo-simple.svg b/assets/brand/xpro-logo-simple.svg new file mode 100644 index 0000000..eeb4527 --- /dev/null +++ b/assets/brand/xpro-logo-simple.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.html b/index.html index b33b8ba..5c76aea 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,28 @@
-