Move controls into responsive sidebar drawer

public/app.ts

@@ -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");
@@ -147,6 +151,12 @@ 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;
@@ -185,6 +195,8 @@ for (const input of localDbInputs) input.addEventListener("change", saveLocalDbS
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
 
 loadDatabaseMode();
+syncSidebarForViewport();
+window.matchMedia("(min-width: 981px)").addEventListener("change", syncSidebarForViewport);
 
 setTimeout(() => {
   if (manufacturerSelect.value) {
@@ -837,6 +849,27 @@ function toggleParserDrawer() {
   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);
@@ -1177,4 +1210,4 @@ async function loadProductInfoForCurrentProduct() {
   }
 }
 
-export {};
+export {};