Cabeçalho da Marca

[Discourse]

	Resumo	Brand Header adiciona um cabeçalho superior extra para branding com seu logotipo, links de navegação e ícones de redes sociais para visualizações em dispositivos móveis e desktop. O logotipo da marca pode ser uma imagem ou texto.
	Pré-visualização	Pré-visualizar no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/discourse-brand-header
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

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

 Suporte  Bug  UX  Recurso

Recursos

Pré-visualização no desktop:

Pré-visualização no mobile:

Configurações

Nome	Descrição
nome da marca
URL do site
URL do logotipo mobile
links	Links de texto a serem exibidos no cabeçalho
ícones	Links de ícones a serem exibidos no cabeçalho
ícones personalizados do Font Awesome	Lista de ícones do FontAwesome 6 usados neste componente de tema
mostrar barra no mobile
plugin outlet

Usando Ícones do Font Awesome 6

Para permitir que os ícones do Font Awesome 6 sejam exibidos corretamente neste componente de tema, você precisará adicioná-los em 3 locais no Discourse:

1. A configuração do site subconjunto de ícones svg
2. A configuração ícones personalizados do font awesome no componente
3. A configuração ícones no componente

Além disso, para alguns ícones do Font Awesome 6, você precisará especificar um prefixo fa ou fab com o nome do ícone (Ex: “fab-bluesky”), pois alguns ícones fazem parte de um subconjunto específico de ícones. Consulte Estamos atualizando nossos ícones para o Font Awesome 6! para detalhes sobre esse uso.

Depois de adicionar esses ícones nos três locais, você deverá vê-los exibidos corretamente no componente de tema Brand Header.

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

[angus (Angus McLeod)]

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

[permacultureProgram (Michael Pinkard)]

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

[hosna]

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

[smileypants707 (Chad Smiley)]

I’m curious, is there some sort of code I can use/edit to move the links to this side of the header?

Ideally with the fa-icons left in place (on the far right). I’d just like to see what it looks like.

[Stanzilla]

Hey there, would you be open to adding an option to display the bar below the header instead of above?

[vinothkannans (Vinoth Kannan)]

Sure, I will accept it if you can submit it in a PR.

[Stanzilla]

Any hints as to what needs to be changed for that? I never worked with Discourse before.

[vinothkannans (Vinoth Kannan)]

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

You should mount the widget in “below-site-header” connector instead of “above-site-header”. It will require few more tweaks too.

[Stanzilla]

Thanks, I got it to work! Will probably PR when I have a bit more time.

[vinothkannans (Vinoth Kannan)]

I merged your other PR which will add an optional target parameter to links.

https://github.com/discourse/discourse-brand-header/pull/4

[vinothkannans (Vinoth Kannan)]

@vinothkannans

Edit: To be more clear this is how I planned

This is now done in the commit below

FEATURE: render header inside hamburger menu in mobile devices. (#6)

[ClawdiaWolf (Claudia)]

I love this change, but on several sites where I use it personally, and on a hosted site I’m a moderator of (the NaNoWriMo forums) we’ve been seeing some issues. Unlike the regular hamburger menu, if you try to swipe it away it bounces back onto the screen.

I’ve personally seen this on a fully updated Moto (g7) Power on Android 9 and on a fully updated iPhone 8.

There has also been at least one report of the menu opening on touches near the icon and not just on it, but I’ve personally been unable to reproduce that particular behavior.

[Stanzilla]

Thanks! Turns out I did not have time to make a proper PR, do you think you’ll be able to add the below/above site header setting?

[aaronbauman]

Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.

[Rhidian (Rhidian Bramley)]

I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasn’t working as the menu still filled most of the screen.

I’ve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.

Would it be possible to make it more intuitive, either by:

• Auto-closing the menu when you click on a menu link on mobile devices?
• Including a ‘Close Menu’ button on mobile devices?

[jtbayly]

I’ve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.

[weber-s (Samuël Weber/GwendalD)]

Olá!

Estamos experimentando layouts diferentes entre duas versões do mesmo fórum (discourse 3.2.0.beta4-dev e discourse 3.3.0.beta1-dev).

Aqui está um exemplo sem CSS personalizado, apenas o componente bruto.

v3.2	v3.3

O layout HTML do Discourse mudou entre as 2 versões?

Além disso, o comportamento de “slide-in” está quebrado na v3.3.

[37Rb (Ryan)]

Estou tendo o mesmo problema no Discourse 3.2.2. O comportamento de “slide-in” está quebrado.

Brand header mobile menu doesn't fully expand until window resize

We’re having a problem where the brand header menu on the upper left only partially expands on mobile when tapped. We have it set to not display the bar on mobile. If I just tap the hamburger menu it looks like this. [Screenshot 2024-06-17 at 11.30.45 AM] But if I then resize the window in any direction it expands fully and shows all the sub-links. [Screenshot 2024-06-17 at 11.30.55 AM] How do I get it to expand fully when tapped without needed a window resize?

Estou me perguntando, vendo as datas das postagens acima, se o componente de tema brand-header ainda é suportado?

[37Rb (Ryan)]

Com base nas 2 postagens anteriores, está quebrado há pelo menos 5 meses e ninguém respondeu. Vou assumir que este componente de tema está inativo, a menos que alguém diga o contrário.