Use decorateWidget to add text link to header

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

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

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

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

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

1 Like
2 Likes

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

1 Like

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

2 Likes

Worked great - thanks.

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

1 Like

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