Add button in header for logged in users

dev
1

How can I add a button to the header for logged-in users only. I would need to add custom text and link for this button.

2

Have you had a search of the theme-component category to see if something already exists that would fit your needs?

1 Like
3

Displaying for Logged-In Users Only

You can target anonymous users to hide elements from them. Like this for example, which hides the tags in the navigation sidebar menu from users who are not logged in. You can use a similar code to hide any element in the header from anonymous users.

.anon .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] {
    display: none; 
}
2 Likes
4

this is a great solution,

I really only wanted one button on top.

What I ended up doing was just asking ChatGPT how to add it manually with code and it gave me a working solution…

Header:

<script type="text/discourse-plugin" version="0.8.22">
api.decorateWidget('header-buttons:after', helper => {
    let currentUser = api.getCurrentUser();
    if (!currentUser) return; 
    
    return helper.h('li.custom-login-button-li', [
        helper.h('a.custom-login-button', { href: 'ENTER URL HERE', target: '_blank'}, 'Button')
    ]);
});
</script>

CSS

.custom-login-button {
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 3px;
    color: #fff !important;
    background-color: #0084ff;
    border-color: #0076e6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.custom-login-button:hover {
    background-color: #0076e6;
    border-color: #0065d0;
}

.custom-login-button-li {
    list-style-type: none;
}
1 Like
5

nice work @Sami_Syed.

I use the header Icon link TC above on my forum for one icon for only mobile users.

1 Like