Categorias de Cabeçalho Navbar

[Discourse]

|||
|-|-|-|
| | Resumo | O Navbar de Categorias do Cabeçalho é um componente simples que adiciona um menu de links de categorias pai ao cabeçalho do site, com overflow de rolagem horizontal adicionado quando necessário.
| |Pré-visualização| Pré-visualização no Criador de Temas |
| |Repositório| \u003chttps://github.com/discourse/discourse-categories-navbar\u003e |
| |Guia de Instalação|Como instalar um tema ou componente de tema|
| |Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, #suporte, #erros, e solicitações de #funcionalidades podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

\u003ckbd\u003e \u0026nbsp;Suporte \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Erro \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;UX \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Funcionalidade\u003c/kbd\u003e

Funcionalidades

Este componente de tema adiciona um menu de links de categorias pai ao cabeçalho do site:

Configurações

Nome	Descrição
ocultar menu suspenso de categoria	Oculta o menu suspenso de categoria da navegação da lista de tópicos
ocultar toda a navegação de breadcrumb	Oculta todos os breadcrumbs da navegação da lista de tópicos
ocultar ao rolar o tópico	Quando ativado, o menu será ocultado no desktop quando o título do tópico estiver fixado no cabeçalho

\u003e:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[nathank (Nathan Kershaw)]

Isso é muito legal - adorei, Kris! Ele se combinará lindamente com o sidebar, permitindo que as categorias principais fiquem no topo e uma seleção personalizada curta na barra.

Notei duas pequenas questões de UX que poderiam realmente dar um impulso se abordadas:

UX: Destaque de seleção de categoria

Ao estar em uma lista de categorias, a categoria correta tem um belo sublinhado sutil.

No entanto, isso não persiste se um Tópico ou uma subcategoria for inserido.

Seria ótimo se isso persistisse em ambas as situações.

UX: Rolagem / overflow no celular

Há um pequeno fade / seta sutil visível quando há overflow das categorias no desktop.

O overflow é muito mais provável no celular, mas no meu dispositivo (Chrome / Android) esses sinais sutis não estão presentes - e não fica claro que a rolagem é possível.

Também pode ajudar ter a barra de categorias um pouco mais alta no celular para facilitar a rolagem.

[nathank (Nathan Kershaw)]

Outros dois problemas de UX que se aplicam principalmente ao celular:

Conflito do breadcrumb do tópico no celular

Nas visualizações de tópicos no celular, a navegação do breadcrumb entra em conflito com a barra de navegação de categorias:

Categoria destacada não visível

Além disso, a categoria selecionada não é rolada automaticamente - isso significa que não fica aparente que ela está selecionada, a menos que o usuário role a barra de navegação. Isso é realmente vital.

Apenas para desktop?

Eu me pergunto se ainda não está realmente pronto para celular e seria muito útil ter uma configuração para aplicá-lo apenas ao desktop (pelo menos por enquanto).

[awesomerobot (Kris)]

Obrigado pelo rápido retorno! Mesclei algumas atualizações que devem resolver isso.

[nathank (Nathan Kershaw)]

Brilhante - muito feliz em dar feedback quando ele é ouvido! Notei que vocês tiveram que fazer várias adições a ele.

Vou encarar isso como um pequeno presente de Natal um para o outro .

@nathankershaw

UX: Destaque de seleção de categoria

Quando em uma lista de categorias, a categoria correta tem um belo sublinhado sutil.

No entanto, isso não persiste se um Tópico ou uma subcategoria for inserido.

Seria ótimo se isso persistisse em ambas as situações.

Vocês corrigiram isso quando uma Subcategoria foi inserida - maravilhoso!

No entanto, isso não se aplica quando um tópico é inserido - isso é deliberado? Pessoalmente, acredito que faria sentido se a categoria permanecesse destacada enquanto o usuário estivesse “dentro” dela, o que inclui os tópicos e não apenas as visualizações de descoberta de categoria.

Além disso, quando entro em outra página (como /admin), a categoria permanece selecionada. Seria melhor se nenhuma categoria fosse selecionada neste caso.

@nathankershaw

O overflow é muito mais provável no celular, mas no meu dispositivo (Chrome / Android) essas dicas sutis não estão presentes - e não fica claro que a rolagem é possível.

Consigo ver o desvanecimento no celular agora, mas não uma seta / chevron. Se possível, isso seria super útil, pois o desvanecimento é bastante sutil:

Desktop:

Celular:

Solicitação #1 - UX

Oculte a Barra de Navegação ao rolar em um tópico. Fica um pouco confuso!

Além disso, pode ser melhor no desktop ter a Barra de Navegação localizada onde estão o breadcrumb / tags na imagem, em vez de abaixo deles.

Solicitação #2 - Recurso

Vocês poderiam adicionar uma classe CSS a cada Nav Pill para que fosse fácil ocultar algumas, se necessário?

Pergunto porque tenho algumas categorias pai (privadas) que são apenas pais para permitir subcategorias, e elas poluem a navegação geral de forma indesejável.

Eu as ocultei por enquanto usando seu href, mas isso é, claro, bastante arriscado!

Solicitação #3 - UX

Uma opção para classificar as Categorias da Barra Lateral em ordem alfabética.

Como estou implementando isso, removi as categorias pai da lista padrão de categorias da barra lateral. Isso significa que meus usuários agora têm apenas uma lista de 1-5 subcategorias que são relevantes para eles.

No entanto, elas estão um pouco confusas e sem ordem lógica, pois a ordem em /Categorias para as subs não faz muito sentido. Seria muito útil se essas subcategorias fossem alfabéticas para ajudar nisso!!

[Jagster (Jakke Lehtonen)]

As cores estão um pouco diferentes quando selecionadas

• paletas claras e escuras padrão

Ideias?

[awesomerobot (Kris)]

Obrigado por relatar! Isso deve corrigir:

UX: all category styles need usable active state

[Jagster (Jakke Lehtonen)]

Funciona perfeitamente. Obrigado!

[Aizada_M]

Olá! Antes de mais nada, gostaria de observar que este é um componente muito útil do tópico e quero agradecer pelo trabalho que você fez
Na minha instância, este componente causou um erro, verifiquei a compatibilidade com outros plugins e componentes de tema e, neste momento, ainda não encontrei um conflito. O componente em si poderia ser a causa?

Habilitar este componente distorce a apresentação do conteúdo.
Aqui está um vídeo:

Para detectar um erro, você precisa clicar em qualquer postagem da página de posts mais recentes /latest, a postagem será aberta no modo padrão, então você precisa voltar para a página de posts mais recentes.

[Lilly (Lillian Louis)]

@Aizada_M - Não consigo reproduzir isso. Isso está acontecendo com você ao visualizar a partir do componente?

[Aizada_M]

Olá! Desculpe pela demora na resposta
Não usei a prévia, testei com o componente ativado.

[Aizada_M]

Isso funciona 100% das vezes quando clico no nome da categoria sob o título do tópico.

[nathank (Nathan Kershaw)]

Notei que o texto na barra de navegação das Categorias do Cabeçalho mudou repentinamente para font-up-1 (enquanto eu acho que era font-down-1 antes). Isso é bastante chocante e desagradável, pois é o mesmo que todas as outras pílulas de navegação.

Eu a substituí com este CSS, que é muito mais agradável:

// corrige o tamanho do texto da barra de navegação do cabeçalho
.custom-categories-navbar .nav-pills > li > a {
    font-size: var(--font-0);
}

Eu prefiro font-0 na verdade, pois é diferente o suficiente e um pouco mais fácil de usar.

[Arkshine]

O CSS principal não mudou, e o componente não define o tamanho da fonte.
Talvez você tivesse CSS personalizado antes?

[denvergeeks]

Adorei este TC, obrigado! Seria ótimo personalizar quais itens aparecem e quais não!

[David_Ghost]

Eu adoro, mas o componente de tema parece estar quebrado na versão mais recente do Discourse

EDIT: funciona bem, mas precisei desativar os ícones “chat” e “Dark-Light Toggle” no cabeçalho

[isaac (Isaac Janzen)]

Funciona para mim com o chat ativo

[David_Ghost]

Sim, é por causa do meu logo. Se eu cortá-lo um pouco, funciona com o chat e o alternador de temas claro/escuro. Estou usando:

.d-header #site-logo {
max-height: 30px;
}

por enquanto

[David_Ghost]

Olá, acabei de ver um bug, você pode reproduzi-lo assim. No celular:

1- Clique em uma categoria no cabeçalho
2 - Clique em uma postagem na categoria e role até o final
3 - Clique na mesma categoria no cabeçalho

Todo o cabeçalho da categoria desaparecerá. Acabei de tentar no meu fórum e na demonstração

EDITAR:
é o mesmo se você for para uma categoria e atualizar (f5) a página. Toda a categoria desaparecerá.

EDITAR:
Existe alguma correção para isso? Obrigado