Move controls into responsive sidebar drawer

public/app.js

@@ -22,6 +22,10 @@ const findSourcesButton = document.querySelector("#findSourcesButton");
 const getPicturesButton = document.querySelector("#getPicturesButton");
 const parserDrawerToggle = document.querySelector("#parserDrawerToggle");
 const parserDrawer = document.querySelector("#parserDrawer");
+const sidebarDrawer = document.querySelector("#sidebarDrawer");
+const sidebarOpenButton = document.querySelector("#sidebarOpenButton");
+const sidebarCloseButton = document.querySelector("#sidebarCloseButton");
+const sidebarOverlay = document.querySelector("#sidebarOverlay");
 const sourceModal = document.querySelector("#sourceModal");
 const sourceTitle = document.querySelector("#sourceTitle");
 const sourceList = document.querySelector("#sourceList");
@@ -140,6 +144,13 @@ loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
 findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
 getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
 parserDrawerToggle.addEventListener("click", toggleParserDrawer);
+sidebarOpenButton.addEventListener("click", openSidebar);
+sidebarCloseButton.addEventListener("click", closeSidebar);
+sidebarOverlay.addEventListener("click", closeSidebar);
+document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape")
+        closeSidebar();
+});
 previousProductButton.addEventListener("click", () => {
     if (!manufacturerSelect.value || currentPosition <= 1)
         return;
@@ -183,6 +194,8 @@ for (const input of localDbInputs)
     input.addEventListener("change", saveLocalDbSettings);
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
 loadDatabaseMode();
+syncSidebarForViewport();
+window.matchMedia("(min-width: 981px)").addEventListener("change", syncSidebarForViewport);
 setTimeout(() => {
     if (manufacturerSelect.value) {
         loadMappingSources();
@@ -756,6 +769,26 @@ function toggleParserDrawer() {
     parserDrawerToggle.setAttribute("aria-expanded", String(!isOpen));
     parserDrawerToggle.querySelector(".drawer-chevron").textContent = isOpen ? "⌄" : "⌃";
 }
+function syncSidebarForViewport() {
+    if (window.matchMedia("(min-width: 981px)").matches)
+        openSidebar();
+    else
+        closeSidebar();
+}
+function openSidebar() {
+    sidebarDrawer.classList.add("is-open");
+    sidebarOverlay.hidden = false;
+    sidebarOpenButton.hidden = true;
+    sidebarOpenButton.setAttribute("aria-expanded", "true");
+    sidebarDrawer.setAttribute("aria-hidden", "false");
+}
+function closeSidebar() {
+    sidebarDrawer.classList.remove("is-open");
+    sidebarOverlay.hidden = true;
+    sidebarOpenButton.hidden = false;
+    sidebarOpenButton.setAttribute("aria-expanded", "false");
+    sidebarDrawer.setAttribute("aria-hidden", "true");
+}
 function loadTheme() {
     const isDark = localStorage.getItem("catalog-maker:theme") === "dark";
     document.documentElement.classList.toggle("dark", isDark);