Add collapsible multi-column panels

public/app.js

@@ -50,6 +50,9 @@ const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
 const lightContrastSelect = document.querySelector("#lightContrastSelect");
 const darkContrastSelect = document.querySelector("#darkContrastSelect");
+const catalogScreen = document.querySelector(".catalog-screen");
+const secondaryPanelToggle = document.querySelector("#secondaryPanelToggle");
+const mainWorkspaceToggle = document.querySelector("#mainWorkspaceToggle");
 const nativeFetch = window.fetch.bind(window);
 window.fetch = (input, init = {}) => {
     const url = typeof input === "string" ? input : input.url;
@@ -164,6 +167,8 @@ loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
 findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
 getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
 parserDrawerToggle.addEventListener("click", toggleParserDrawer);
+secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
+mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
 sidebarOpenButton.addEventListener("click", openSidebar);
 sidebarCloseButton.addEventListener("click", closeSidebar);
 sidebarOverlay.addEventListener("click", closeSidebar);
@@ -855,6 +860,7 @@ function openSidebar() {
     sidebarOpenButton.hidden = true;
     sidebarOpenButton.setAttribute("aria-expanded", "true");
     sidebarDrawer.setAttribute("aria-hidden", "false");
+    catalogScreen.classList.remove("sidebar-collapsed");
 }
 function closeSidebar() {
     sidebarDrawer.classList.remove("is-open");
@@ -862,6 +868,21 @@ function closeSidebar() {
     sidebarOpenButton.hidden = false;
     sidebarOpenButton.setAttribute("aria-expanded", "false");
     sidebarDrawer.setAttribute("aria-hidden", "true");
+    catalogScreen.classList.add("sidebar-collapsed");
+}
+function toggleSecondaryPanel() {
+    const isCollapsed = catalogScreen.classList.toggle("secondary-collapsed");
+    secondaryPanelToggle.setAttribute("aria-expanded", String(!isCollapsed));
+    secondaryPanelToggle.setAttribute("aria-label", isCollapsed ? "Expand product details" : "Collapse product details");
+    secondaryPanelToggle.title = isCollapsed ? "Expand product details" : "Collapse product details";
+    secondaryPanelToggle.textContent = isCollapsed ? "›" : "‹";
+}
+function toggleMainWorkspace() {
+    const isCollapsed = catalogScreen.classList.toggle("workspace-collapsed");
+    mainWorkspaceToggle.setAttribute("aria-expanded", String(!isCollapsed));
+    mainWorkspaceToggle.setAttribute("aria-label", isCollapsed ? "Expand main workspace" : "Collapse main workspace");
+    mainWorkspaceToggle.title = isCollapsed ? "Expand main workspace" : "Collapse main workspace";
+    mainWorkspaceToggle.textContent = isCollapsed ? "‹" : "›";
 }
 function loadTheme() {
     const isDark = localStorage.getItem("catalog-maker:theme") === "dark";