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);

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 {};

public/icons.svg

@@ -12,4 +12,5 @@
   <symbol id="erase" viewBox="0 0 24 24"><path d="m4 15 8-8a2 2 0 0 1 2.8 0l4.2 4.2a2 2 0 0 1 0 2.8l-5 5H7zM13 19h7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></symbol>
   <symbol id="moon" viewBox="0 0 24 24"><path d="M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.8"/></symbol>
   <symbol id="settings" viewBox="0 0 24 24"><path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m19 13.5 1.2 1-.2 2-1.5.8-.3 1.6-1.8.9-1.4-.7-1.5.7-1.8-.9-.3-1.6-1.5-.8-.2-2 1.2-1-.1-1.5-1.2-1 .2-2 1.5-.8.3-1.6 1.8-.9 1.4.7 1.5-.7 1.8.9.3 1.6 1.5.8.2 2-1.2 1.1.1 1.5Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.4"/></symbol>
+  <symbol id="close" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"/></symbol>
 </svg>

public/index.html

@@ -10,7 +10,19 @@
   </head>
   <body>
     <main class="catalog-screen">
-      <aside class="control-panel">
+      <button class="sidebar-open-button" id="sidebarOpenButton" type="button" aria-controls="sidebarDrawer" aria-expanded="false" aria-label="Open sidebar" title="Open sidebar">
+        <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg>
+      </button>
+
+      <button class="sidebar-overlay" id="sidebarOverlay" type="button" aria-label="Close sidebar"></button>
+
+      <aside class="control-panel sidebar-drawer" id="sidebarDrawer" aria-label="Catalog controls">
+        <div class="sidebar-drawer-header">
+          <span class="sidebar-drawer-title">Catalog controls</span>
+          <button class="sidebar-close-button" id="sidebarCloseButton" type="button" aria-label="Close sidebar" title="Close sidebar">
+            <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg>
+          </button>
+        </div>
         <div class="record-id" id="recordId">&nbsp;</div>
 
         <div class="arrow-row">