Categorias ou Subcategorias de Barra Lateral com Indentação / Aninhadas

| | | |\n|— | — | —|\n|:information_source: | Resumo | Recua / aninha categorias ou subcategorias selecionadas na barra lateral|\n|:hammer_and_wrench: | Repositório | https://github.com/Lillinator/discourse-nested-categories|\n|:eyeglasses: | Prévia | Prévia no Criador de Temas do Discourse|\n|:question: | Guia de Instalação | Como instalar um tema ou componente de tema|\n|:open_book: | Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse|\n\n\u003c!-- Preencha "repoName" e "repoURL" para o botão de instalação automática –\u003e\n\n[wrap=theme-install-button repoName="Discourse Nested Categories" repoUrl="https://github.com/Lillinator/discourse-nested-categories\"]\nInstalar este componente de tema\n[/wrap]\n\n\u003c!-- Descreva este tema/componente em uma ou duas frases –\u003e\n\nExistem duas maneiras de usar este componente de tema simples - para selecionar categorias ou subcategorias para recuar (ou aninhar) na barra lateral; ou para permitir o recuo de todas, exceto uma lista selecionada de categorias. A maioria das pessoas desejará recuar apenas subcategorias, é claro, para que pareçam aninhadas, mas você pode recuar qualquer uma de suas categorias listadas. Funciona tanto na visualização desktop quanto na mobile, bem como no menu suspenso do cabeçalho. Graças a @dax por parte do código.\n\n\u003c!-- Adicione capturas de tela (se aplicável) –\u003e\n\nExistem 3 configurações - use apenas a primeira, ou a segunda e a terceira, dependendo do que você precisa fazer.\n\n|Configuração| Descrição |\n|— | —|\n|recuar apenas categorias selecionadas | Lista de categorias ou subcategorias selecionadas para recuar. |\n|recuar todas as categorias, exceto as seguintes | Habilite esta configuração se você quiser recuar todas as categorias, exceto aquelas na configuração de lista abaixo. A configuração da lista acima deve estar vazia.|\n| categorias a não recuar | categorias a não recuar |\n\n***\n\n### Capturas de tela das configurações e resultados na barra lateral\n\nRecuar apenas categorias selecionadas\n\n[details="Resumo"]\nConfiguração:\n

\n\nResultado:\n\n[/details]\n\n\n\u003cbr\u003e\n\n[details="Recuar todas as categorias, exceto as especificadas"]\nConfigurações:\n\n\n\nResultado:\n\n[/details]\n\n***\n\nNota: se você quiser ocultar o ícone de cadeado nos marcadores de categoria para categorias privadas, como nas minhas capturas de tela acima, você pode usar este componente.

28 curtidas

Sim!!! Este é um passo em direção a finalmente poder usar a barra lateral!

3 curtidas

Bom trabalho, @Lilly!

No entanto, não atende totalmente à necessidade da minha instância. Tenho muitas subcategorias e poucas categorias - e as subcategorias são bastante dinâmicas.

Seria melhor para nossa instância se todas as categorias + subcategorias fossem recuadas por padrão e a lista fosse para as categorias que não deveriam ser recuadas.

3 curtidas

Hmm, deixe-me pensar sobre isso - entendi o que você quer dizer. Vou mexer um pouco, mas abordarei seu caso de uso de qualquer maneira (com um componente separado ou algumas configurações adicionais). Eu também estava pensando em incluir uma configuração que permitisse formatar ou ocultar os marcadores de subcategoria. :thinking:

5 curtidas

Atualizei o componente para permitir a configuração de categorias recuadas da maneira oposta - ou seja, recuando todas, exceto uma lista selecionada. Espero que isso ajude no seu caso de uso. :slight_smile:

6 curtidas

Isso está ótimo em nossa comunidade, obrigado por isso!

2 curtidas

Por favor, atualize este componente. Fiz uma pequena atualização nele hoje para corrigir um problema em que o botão “Todas as categorias” também estava recuando se a configuração recuar todas as categorias, exceto as seguintes estivesse sendo usada.

4 curtidas

Ei Lilly, estou gostando de usar este TC - de ambas as formas!

Mas tenho uma pergunta boba:

Por que não simplesmente fazer com que este componente identifique todas as subcategorias (e nenhuma categoria) por padrão?

Ótimo trabalho, @Lilly!

Existe alguma maneira de ajustar isso para funcionar também com Sub-Sub-Categorias?

Assim, haveria 2 níveis de recuo disponíveis.

Por exemplo:
Temos a categoria de Aprendizado (Learning), com as Sub-Categorias (Ferramentas de Aprendizado e Tutoriais - Learning Tools & How To’s), as Sub-Sub-Categorias de Jogos e Melhores Práticas (Games & Best Practices).
(Aprendizado - ferramentas de aprendizado - jogos) e (Aprendizado - Tutoriais - Melhores Práticas)

Seria ótimo se pudéssemos aninhar jogos e melhores práticas assim.

2 curtidas

Isso não parece inquieto?

1 curtida

Oi @Jagster,
Não tenho certeza do que você quer dizer com isso. Desculpe :frowning:

Os olhos se espalharão porque nada está em linhas retas. É por isso que tentamos manter o espaçamento, etc., o mais igual possível em textos, barras de ferramentas… E, ao mesmo tempo, ícones e cores também mudam. O ícone da categoria principal tem algum valor informativo, outros não. Isso não facilita a navegação, mas o oposto. E tudo isso é basicamente as principais razões pelas quais a aninhamento profundo é uma má ideia, não importa se estamos falando de livros ou da web. Além disso, você perde espaço precioso e os nomes das categorias não são mais nomes.

E se você realmente tem uma quantidade tão grande de tópicos específicos que precisa usar várias categorias principais e pelo menos a mesma quantidade de subcategorias, porque você tem muitas sub-subcategorias (e o tempo todo as principais e as subs de primeiro nível são apenas cabeçalhos mostrando outras categorias), isso levará a uma barra lateral tão longa que não haverá absolutamente ninguém que a use.

Odeio dizer isso em voz alta, mas isso parece totalmente igual a trechos de CSS onde as intenções são usadas para mostrar a estrutura lógica de pares { }. Nunca é para leitura.

2 curtidas

Obrigado por elaborar seus pensamentos aqui @Jagster. Agradeço muito seu feedback.

Você levanta muitos pontos ótimos, especialmente sobre não criar uma barra lateral excessivamente longa e sobre as cores e ícones não combinarem.

Eu gostaria de poder expandir as categorias aninhadas como um acordeão, assim teríamos o melhor dos dois mundos, uma barra lateral curta, mas também navegação rápida pelo site.

1 curtida

Eu recomendaria ler este tópico, especialmente as postagens sobre o fórum Wix e a simplicidade de suas categorias.

Também tenha em mente que seus usuários podem personalizar suas próprias seções na barra lateral de categorias.

Honestamente, não vejo como sub-subcategorias funcionariam aqui com aninhamento - acho que criaria uma bagunça visual. Nem tenho certeza se é possível implementar isso neste componente…

6 curtidas

Acabei de instalar isso na minha instância e nenhuma das minhas subcategorias está recuando…
Pelo menos é o que eu pensava. Eu defini para recuar tudo, exceto as escolhidas, e deixei a lista em branco.
Não percebi no início que estava recuando tudo, incluindo categorias.
Existe alguma maneira de você atualizar isso com uma caixa para simplesmente “recuar todas as subcategorias”? Você pode adicionar uma lista de exclusão, se quiser, mas no meu caso de uso, sempre quero que as subcategorias sejam recuadas e nunca recuar categorias.

Para o seu caso de uso, por que não colocar simplesmente as categorias na caixa Categorias a não recuar?

Concordo, seria mais agradável apenas recuar subcategorias. No entanto, na época em que @Lilly desenvolveu este TC, isso era bastante complicado de alcançar. Pessoalmente, acho a solução acima muito viável, a menos que suas categorias sejam incomumente dinâmicas.

Enquanto estou aqui…

Solicitação de Recurso - subcategorias expansíveis / recolhíveis

Isso é discutido aqui:

Eu me pergunto se funcionaria como uma extensão deste Componente de Tema.

Potencialmente, poderíamos ter algum orçamento para isso se alguém estiver interessado em unir forças.

1 curtida

Como uma observação, descobri que o JS que adicionei (tive que fazer algumas modificações adicionais que posso compartilhar) funciona como uma solução temporária, já que basicamente apenas oculta subcategorias ao carregar a página e permite que o usuário expanda ou visite os pais inserindo um chevron. O único problema é que algumas interações reescrevem a navegação completamente, então o JS precisa reaplicar suas classes para manter as subcategorias colapsadas (interagindo com o menu hambúrguer no topo, por exemplo, em dispositivos móveis).

Com certeza, é o que estou fazendo. Eu só não “entendi” de imediato.
É apenas uma dor de cabeça agora enquanto estou construindo um novo site, pois continuo adicionando categorias e subcategorias. Assim que o desenvolvimento for concluído, as coisas ficarão praticamente estáticas.

1 curtida