⬇️ Cabeçalho suspenso

Componente de tema
1

:mag: Visão Geral

Este componente de tema permite adicionar links com texto, ícones e menus suspensos ao cabeçalho nativo do seu site Discourse.

image
image1440×1024 123 KB

Relatórios de bugs, solicitações de recursos e PRs são muito bem-vindos; o patrocínio permite que o trabalho neste componente seja priorizado pela equipe do Pavilion.

:computer: Código

Veja o Repositório do GitHub

:gear: Configurações

Existem várias configurações que você pode configurar para personalizar o componente, incluindo personalizações de links, fontes de ícones, adição de segurança de links, posicionamento, etc.

Uma lista de todas as configurações e explicações detalhadas sobre elas pode ser encontrada aqui.

:thinking: Quando Usar

Este componente é útil se você deseja ícones, links e links suspensos em linha com o cabeçalho existente do Discourse. É uma ótima maneira de ter muitos links acessíveis sem desordem desnecessária ou a barra lateral saindo de controle.

Se você precisar de muitos links suspensos, confira Menus suspensos do cabeçalho, que cria uma linha de menu no cabeçalho acima do cabeçalho original do Discourse.

Embora este componente também suporte a adição de links sozinhos, sem os menus suspensos, se você precisar apenas de links sem menus suspensos, sinta-se à vontade para usar Links de Cabeçalho Personalizados.

:clapper: Prévia

Desktop:

Desktop

Mobile:
Devido à falta de espaço no celular, os links podem ser acionados tocando no botão de seta para baixo.

Mobile
Mobile640×1292 48.5 KB

Instalar Componente de Tema

49 curtidas
2

Não tenho certeza do motivo, mas isso não parece funcionar para mim, assim que é ativado meu cabeçalho desaparece, em um tema limpo sem outros componentes, tentei vários temas base também

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

1 curtida
3

Olá @Fma965, minhas desculpas, implementei algumas correções para pequenos bugs, espero que esteja funcionando agora para você. Me avise como ficou.

3 curtidas
4

Funciona perfeitamente agora, Obrigado!

5

Uma coisa a notar é que, como estes não usam tags a, você não pode clicar com o botão do meio nos links como pode no plugin de links do cabeçalho. Há alguma razão para você não estar usando tags a?

2 curtidas
6

@Fma965

Hmm.. esse é um ponto interessante. A razão pela qual não usei tags de âncora é porque cada link é um widget que pode gerar um menu suspenso se houver itens de menu suspenso. Ao usar o widget, também estou aproveitando o método click() que chama: DiscourseURL.routeTo(this.attrs.url);.

Isso tem alguns benefícios, como manter o histórico de onde você está em um tópico. Por exemplo, se você clicar em um link para um tópico com uma tag de âncora, ele sempre o levará para o topo do tópico. No entanto, se você já visitou o tópico antes e estava lendo na metade do tópico, a abordagem routeTo o levará para a mesma posição no tópico.

Eu me pergunto se há uma maneira de adicionar funcionalidade de clique do meio aos cliques do widget… terei que investigar isso, talvez alguém da equipe do Discourse possa ter uma ideia.

1 curtida
7

Sim, eu imaginei que seria relacionado a isso, era apenas algo que um dos meus moderadores mencionou para mim, pensei em levantar o ponto aqui por via das dúvidas :slight_smile:

1 curtida
8

Olá Keegan, obrigado por criar este componente de tema! Ele é a ponte perfeita entre os componentes Custom Header Links e Header Submenu que eu havia olhado antes.

Alguma chance de adicionar uma opção ‘target’ (abrir em nova aba) aos links que adicionamos lá, como nos outros dois componentes de tema?

1 curtida
9

Estou preenchendo manualmente os itens do submenu a partir de uma fonte externa e envio algumas requisições ajax dentro de um loop para recuperá-los. Naturalmente, se houver muitos itens. O componente carrega antes que todas as requisições sejam concluídas e alguns itens estão faltando. É possível modificar a fonte para conseguir isso?

1 curtida
11

Componente incrível. Obrigado por compartilhar :heart:.

12

Olá! Obrigado por este componente fantástico :slight_smile:

Parece que falta uma margem à direita quando não estou conectado no fórum. Veja como fica:
Capture d’écran 2022-12-05 à 16.22.20

Enquanto isso, se eu estiver conectado, está tudo bem.

Espero que ajude a melhorá-lo.

13

Haveria alguma chance de haver:

  1. links para URLs eternas?
  2. links de destino para abrir em novas abas, como mencionado anteriormente?

Estamos apenas configurando uma nova instância nos servidores Discourse e estamos tentando fazer com que nosso menu Discourse corresponda ao nosso site WP o mais próximo possível na prática.

Obrigado

1 curtida
14

Acabei de instalar este componente para substituir os componentes “Custom Header Links” e “Easy Footer”.

E eu realmente amo este componente, é ótimo!

Funciona para mim. Você quer dizer um _blank target ou algo assim ou URLs externas em geral (que funcionam para mim)?

Notei uma coisa: Em dispositivos móveis, não consigo rolar para baixo. Parece que tenho muitos menus. :wink: Isso pode ser ajustado?

2 curtidas
15

Acabei de fazer um PR para esse problema:

Quando você verificar o link acima, poderá ver que o CSS ajustado funciona como deveria. :slight_smile:

3 curtidas
16

Olá, obrigado por este ótimo componente!
No entanto, notei que quando clico em um link, todos os textos e ícones são substituídos pelos do último elemento.

Também notei que se eu clicar no logo, os textos e ícones dos links mudam

Anexo um breve exemplo em vídeo:

O link da página é: https://oii.francescomancuso.it/forum/

Como posso consertar? Muito obrigado desde já!

17

Ótimo tema-componente! :chefs_kiss:

Ficaria ainda melhor se também pudéssemos configurá-lo para que os links abrissem em uma nova aba, em vez da mesma aba de agora. :+1:

18

Olá Francesco :wave:

Teria prazer em dar uma olhada, mas você alterou o layout e aparentemente não está mais usando o componente para mostrar links.

Não consigo reproduzir o problema no meu fórum de teste.

Se, por acaso, você puder dar outra olhada e nos dizer se ainda está com o problema, sinta-se à vontade para fazê-lo. :slight_smile:

Se tal recurso fosse implementado, você acha que ele deveria substituir as preferências dos usuários em relação a links externos (configuração Abrir todos os links externos em uma nova aba)?

image

2 curtidas
22

Olá, muito obrigado pela sua resposta.

Decidi mudar os layouts para criar um gráfico uniforme em todas as áreas da minha plataforma.
Depois de fazer uma migração de domínio, verificarei se o erro foi resolvido.

Tenha um bom dia :smiley:

2 curtidas
23

Eu acho que deveria seguir as preferências dos usuários. A menos que tenha sido substituído por um administrador ou moderador :+1:

24

Então… Acabei de implementar este componente de tema e já recebemos um feedback bem válido de alguns de nossos membros mais antigos.

Então, basicamente, se eu fosse:

  • (1) clicar primeiro no botão de pesquisa no cabeçalho e, em seguida,
  • (2) passar o mouse sobre o cabeçalho suspenso em segundo lugar.
    → O cabeçalho suspenso apareceria embaixo da caixa de pesquisa, o que não é o que procuramos. Idealmente, a barra de pesquisa deveria desaparecer antes que o menu suspenso aparecesse.

Enquanto isso, se eu passasse o mouse sobre o cabeçalho suspenso primeiro e depois clicasse no botão de pesquisa, ele se comportaria exatamente como eu esperava, ou seja, (1) o menu suspenso desaparece e (2) a barra de pesquisa aparece.

Outro membro também reclamou de como fica no celular, há alguma maneira de habilitar este componente de tema apenas no desktop?

Obrigado :+1:

1 curtida