Use decorateWidget to add text link to header

Development

AI-generated summary

The discussion revolves around using decorateWidget to add a text link to the header. martyn_thomas is trying to add an icon and text link to the header using a Theme Component, but is struggling to link the text. Arkshine suggests wrapping the text in an anchor tag and adjusting CSS to style the link. Arkshine also provides a solution to place the icon and text link on the left side of the header, next to the logo.

martyn_thomas also asks about positioning the icon on the left side of the header. Arkshine provides a solution using api.decorateWidget('home-logo:after').

Lilly shares relevant links to meta discourse topics on custom header links and icons. Arkshine acknowledges the existence of these topics and martyn_thomas mentions using them as a reference.

martyn_thomas confirms that the solution worked and is now working on adjusting the CSS to change the font color.

1

I’m trying to add an icon and text link into our header to using Theme Component

I’ve managed to add an icon using:

    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

But I’m struggling to add some text next to it that also links to the Documents url

I’ve tried adding the below - but the text isn’t linked

        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

What am i missing?

Also is there a way to have the icon the the left side of the header (next to our logo)?

Thanks in advance

2

In your example, you need to insert your text here:

helper.h('a.icon', {
    href:'/docs',
    title: 'Document'
}, ["test", iconNode("book")]),

You will need to adjust the CSS on the link.

For example:

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

chrome_Tk18DUhJQQ

If you mean at the right:, you can try:

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

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

image
image437×105 8.82 KB

I tested it quickly. You might encounter some quirks, but you should get the general idea!

3
4

Right, I don’t know why I did not link those components, I knew their existence. :man_facepalming:

5

I was poking around those components - as i wanted a bit of both lol

6

Worked great - thanks.

Now to spend the evening fighting with CSS to change the font color lol