Use decorateWidget para adicionar link de texto ao cabeçalho

Dev
1

Estou tentando adicionar um ícone e um link de texto ao nosso cabeçalho usando o Theme Component

Consegui adicionar um ícone usando:

    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('a.icon', {
                href:'/docs',
                title: 'Document'
            }, iconNode("book")),
        ]);
    });

image
image296×108 1.2 KB

Mas estou com dificuldades para adicionar um texto ao lado dele que também link para a URL de Documentos

Tentei adicionar o abaixo - mas o texto não está linkado

        api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('h3', {
                href:'/docs',
                title: 'Document'
            }, 'Docs'),
        ]);

image
image352×108 2.22 KB

O que estou perdendo?

Há também uma maneira de ter o ícone no lado esquerdo do cabeçalho (ao lado do nosso logotipo)?

Obrigado desde já

2

No seu exemplo, você precisa inserir seu texto aqui:

helper.h('a.icon', {
    href:'/docs',
    title: 'Documento'
}, ["teste", iconNode("livro")]),

Você precisará ajustar o CSS no link.

Por exemplo:

padding-inline-end: 2em;
justify-content: space-between;
color: currentcolor;

chrome_Tk18DUhJQQ

Se você quer dizer à direita:, você pode tentar:

api.decorateWidget('home-logo:after', helper => {
    return helper.h('div.d-header-icons', [
        helper.h('a.icon.btn-flat.doc', {
            href:'/docs',
            title: 'Documento'
        }, [iconNode("livro"), "Doc"]),
    ]);
});

.d-header-icons .icon.doc {
    width: auto;
    gap: 0.5em;
    margin-inline: 1em;

    & .d-icon {
        width: 1em;
    }
}

image
image437×105 8.82 KB

Eu testei rapidamente. Você pode encontrar algumas peculiaridades, mas deve ter a ideia geral!

1 curtida
3
2 curtidas
4

Certo, não sei por que não vinculei esses componentes, eu sabia da existência deles. :man_facepalming:

1 curtida
5

Eu estava fuçando nesses componentes - como eu queria um pouco dos dois, lol

2 curtidas
6

Funcionou muito bem - obrigado.

Agora vou passar a noite lutando com CSS para mudar a cor da fonte, lol

1 curtida
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.