docs/cloud-sidebar.js at main · browseract-ai/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
(() => {
  const storageKey = "browseract-cloud-expanded-groups";
  const cloudPrefixes = [
    "/overview/",
    "/quick-start/",
    "/bot/",
    "/browser-proxy/",
    "/credential-center/",
    "/integrations/",
    "/account-billing/",
    "/support/",
    "/faq/",
  ];

  const isCloudPage = () =>
    cloudPrefixes.some((prefix) => window.location.pathname.startsWith(prefix));

  const readExpandedGroups = () => {
    try {
      return new Set(JSON.parse(window.sessionStorage.getItem(storageKey) || "[]"));
    } catch {
      return new Set();
    }
  };

  const writeExpandedGroups = (groups) => {
    try {
      window.sessionStorage.setItem(storageKey, JSON.stringify([...groups]));
    } catch {
      // Ignore storage failures; the sidebar still works for the current render.
    }
  };

  const applyCloudSidebar = () => {
    const enabled = isCloudPage();
    document.documentElement.dataset.browseractCloudNav = String(enabled);
    const expandedGroups = readExpandedGroups();

    document.querySelectorAll(".sidebar-group-header").forEach((header) => {
      const group = header.nextElementSibling;
      if (!(group instanceof HTMLElement) || !group.classList.contains("sidebar-group")) {
        return;
      }

      if (!enabled) {
        header.removeAttribute("data-expanded");
        header.removeAttribute("role");
        header.removeAttribute("tabindex");
        group.removeAttribute("data-cloud-collapsed");
        return;
      }

      if (header.dataset.cloudAccordion !== "ready") {
        const label = header.textContent.trim();
        const shouldExpand = expandedGroups.has(label);

        const toggle = () => {
          const expanded = header.dataset.expanded === "true";
          const nextExpanded = !expanded;
          const nextGroups = readExpandedGroups();

          if (nextExpanded) {
            nextGroups.add(label);
          } else {
            nextGroups.delete(label);
          }

          writeExpandedGroups(nextGroups);
          header.dataset.expanded = String(nextExpanded);
          header.setAttribute("aria-expanded", String(nextExpanded));

          if (nextExpanded) {
            group.removeAttribute("data-cloud-collapsed");
          } else {
            group.dataset.cloudCollapsed = "true";
          }
        };

        header.dataset.cloudAccordion = "ready";
        header.dataset.expanded = String(shouldExpand);
        header.setAttribute("aria-expanded", String(shouldExpand));
        header.setAttribute("role", "button");
        header.setAttribute("tabindex", "0");
        header.addEventListener("click", toggle);
        header.addEventListener("keydown", (event) => {
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            toggle();
          }
        });

        if (shouldExpand) {
          group.removeAttribute("data-cloud-collapsed");
        }
      }

      if (header.dataset.expanded !== "true") {
        group.dataset.cloudCollapsed = "true";
      }
    });
  };

  let scheduled = false;
  const scheduleApply = () => {
    if (scheduled) return;
    scheduled = true;
    window.requestAnimationFrame(() => {
      scheduled = false;
      applyCloudSidebar();
    });
  };

  new MutationObserver(scheduleApply).observe(document.documentElement, {
    childList: true,
    subtree: true,
  });
  window.addEventListener("popstate", scheduleApply);
  scheduleApply();
})();