로그인 사용자를 위한 헤더에 추가 버튼

개발
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

Customization > Theme component 카테고리를 검색해서 이미 필요에 맞는 것이 있는지 확인해 보셨나요?

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; 
}
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;
}
5

nice work @Sami_Syed.

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