Subcategorias Recolhíveis na Barra Lateral

Suporte
1

Já vi algumas postagens sobre isso, mas nenhuma tem respostas definitivas.

O Unreal Engine Discourse (em destaque na página “Discover” do Discourse) tem um tema completamente personalizado ou existem componentes que podem conseguir isso?

Também notei que eles exibem as subcategorias como links de nível superior quando você clica em uma e, em seguida, abaixo dela, lista todos os tópicos. Parece que o que está acontecendo aqui é definir “Estilo da Lista de Subcategorias” como “Linhas” na categoria pai para conseguir isso?

1 curtida
3

Parece que isso pode não ser algo que pode ser resolvido com um componente.

No entanto, consegui gerar JS e CSS que realizam isso com uma pequena ajuda de IA, se alguém estiver interessado, fico feliz em compartilhar.

3 curtidas
4

Você já viu isto, imagino:

E isto:

Fique à vontade para compartilhar seu código. Claro, o desafio com coisas como esta é a manutenção contínua.

2 curtidas
5

Sim, parece que muita do que eles estão fazendo é algo personalizado.

Meu script é assim:

import { apiInitializer } from "discourse/lib/api";
import { ajax } from "discourse/lib/ajax";

export default apiInitializer("0.11.1", (api) => {
  ajax("/site.json").then((data) => {
    const categories = data.categories;

    // Construir mapa de parent_id => [ids de subcategorias]
    const childMap = {};
    categories.forEach((cat) => {
      if (cat.parent_category_id) {
        if (!childMap[cat.parent_category_id]) {
          childMap[cat.parent_category_id] = [];
        }
        childMap[cat.parent_category_id].push(cat.id);
      }
    });

    const collapseState = {}; // Rastrea o estado de colapsado por pai

    function applyCollapseState(parentId, childIds, collapsed) {
      childIds.forEach((childId) => {
        const childEl = document.querySelector(
          `.sidebar-section-link-wrapper[data-category-id="${childId}"]`
        );
        if (childEl) {
          childEl.classList.toggle("is-collapsed", collapsed);
          childEl.classList.add("is-subcategory");
        }
      });
    }

    function ensureToggleExists(parentId, childIds) {
      const parentEl = document.querySelector(
        `.sidebar-section-link-wrapper[data-category-id="${parentId}"]`
      );
      if (!parentEl || parentEl.classList.contains("has-toggle")) return;

      const toggle = document.createElement("span");
      toggle.innerText = collapseState[parentId] ? "▸" : "▾";
      toggle.className = "toggle-subcategories";
      toggle.style.cursor = "pointer";
      toggle.style.marginLeft = "0.5em";

      toggle.onclick = () => {
        const isNowCollapsed = !collapseState[parentId];
        applyCollapseState(parentId, childIds, isNowCollapsed);
        toggle.innerText = isNowCollapsed ? "▸" : "▾";
        collapseState[parentId] = isNowCollapsed;
      };

      parentEl.classList.add("has-toggle");
      const link = parentEl.querySelector(".sidebar-section-link");
      if (link) link.appendChild(toggle);
    }

    api.onPageChange(() => {
      Object.entries(childMap).forEach(([parentId, childIds]) => {
        // Define o estado padrão de colapsado
        if (collapseState[parentId] === undefined) {
          collapseState[parentId] = true;
        }

        applyCollapseState(parentId, childIds, collapseState[parentId]);
        ensureToggleExists(parentId, childIds);
      });

      const container = document.querySelector('[data-section-name="categories"]');
      if (!container) return;

      const observer = new MutationObserver(() => {
        Object.entries(childMap).forEach(([parentId, childIds]) => {
          applyCollapseState(parentId, childIds, collapseState[parentId]);
          ensureToggleExists(parentId, childIds); // <-- Restaura os toggles
        });
      });

      observer.observe(container, {
        childList: true,
        subtree: true,
      });
    });
  });
});

Só inseri isso no painel de JS do tema. A CSS relevante:

.sidebar-section-link-wrapper.is-collapsed {
  display: none !important;
}

.sidebar-section-link-wrapper.is-subcategory {
  padding-left: 1.5em;
}

.toggle-subcategories {
    float: right;
    display: flex;
    width: 30px;
    align-items: center;
    font-size: .9em;
    line-height: 1;
    height: 30px;
}

Funciona bem para meus propósitos, mas não recomendaria se você tiver muitas subcategorias.