baseline

web/js/components/app-toggle-sidebar.js

@@ -0,0 +1,95 @@
+export function initSidebarToggle(options = {}) {
+  const {
+    buttonSelector = '#toggle-aside',
+    asideSelector = '#app-sidebar',
+    containerSelector = '.app-container',
+    storageKey = 'app-sidebar-collapsed'
+  } = options;
+
+  const aside = document.querySelector(asideSelector);
+  if (!aside) return null;
+
+  const buttons = Array.from(document.querySelectorAll(buttonSelector));
+  const container = document.querySelector(containerSelector);
+  const root = document.documentElement;
+
+  const readStored = () => {
+    try {
+      return window.localStorage.getItem(storageKey);
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const writeStored = (collapsed) => {
+    try {
+      window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
+    } catch (error) {
+      // ignore storage errors
+    }
+  };
+
+  const applyState = (collapsed, { persist = false } = {}) => {
+    aside.classList.toggle('is-collapsed', collapsed);
+    if (container) {
+      container.classList.toggle('is-sidebar-collapsed', collapsed);
+    }
+    if (root) {
+      root.classList.toggle('sidebar-collapsed', collapsed);
+    }
+    buttons.forEach((button) => {
+      if (!button.getAttribute('aria-controls')) {
+        button.setAttribute('aria-controls', aside.id || 'app-sidebar');
+      }
+      button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    });
+    if (persist) {
+      writeStored(collapsed);
+    }
+  };
+
+  const isCollapsed = () => aside.classList.contains('is-collapsed');
+
+  const getInitialState = () => {
+    const stored = readStored();
+    if (stored === '1' || stored === '0') {
+      return stored === '1';
+    }
+    return root?.classList.contains('sidebar-collapsed') ?? false;
+  };
+
+  const controller = {
+    isCollapsed,
+    open: ({ persist = true } = {}) => applyState(false, { persist }),
+    close: ({ persist = true } = {}) => applyState(true, { persist }),
+    toggle: ({ persist = true } = {}) => applyState(!isCollapsed(), { persist }),
+    apply: (collapsed, { persist = false } = {}) => applyState(!!collapsed, { persist })
+  };
+
+  applyState(getInitialState(), { persist: false });
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      controller.toggle({ persist: true });
+    });
+  });
+
+  document.addEventListener('app:sidebar', (event) => {
+    const detail = event.detail || {};
+    const action = detail.action;
+    const persist = detail.persist ?? false;
+    if (action === 'open') controller.open({ persist });
+    if (action === 'close') controller.close({ persist });
+    if (action === 'toggle') controller.toggle({ persist });
+  });
+
+  window.AppSidebar = controller;
+  return controller;
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => initSidebarToggle());
+} else {
+  initSidebarToggle();
+}