How to show user's name next to avatar in the navigation when logged in?

Development

AI-generated summary

asugar is looking for a way to show a user’s name next to their avatar in the navigation bar when logged in. Arkshine provided a custom HTML/CSS solution using a theme component, which includes a script to add the username and CSS to adjust the layout. This solution is disabled on mobile view and may require adjustments for non-default themes. asugar confirmed that the solution works as expected.

1

Hello All,
Is there a way to show user’s name in the navigation bar next to avatar when user is logged in. See the screenshot below.

name
name258×187 3.48 KB

2

Hello, welcome back Auston!

Could you try this custom HTML/CSS, please?
This should work fine with all notifications badges with/out the new notifications menu enabled.

I suggest you create a theme component. In case you don’t know, everything is explained here: Beginner's guide to using Discourse Themes

Note: It’s disabled on mobile view.
Note: CSS is based on the default theme; you might need to adjust it. Feel free to ask.

I did not test extensively, but I hope this will work for you!

Head 
<script type="text/discourse-plugin" version="0.8.13">

api.decorateWidget('header-notifications:after', dec => {
    const { currentUser, site } = dec.widget;

    if (site.mobileView) {
        return;
    }
    
    return dec.h('span.username', currentUser.displayName);
})

</script>
CSS 
html:not(.mobile-view) #current-user {
    span.username {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }
    
    .icon.btn-flat {
        width: auto;
    }
    
    .user-status-background {
        left: 22px;
    }
    
    .badge-notification {
        &.with-icon.new-pms {
            left: -3px;
            right: auto;
            top: 4px;
        }
    }
    
    .unread-notifications {
        left: 25px;
        right: auto;
    }
    
    .unread-high-priority-notifications,
    .ring {
        left: -3px;
        right: auto;
    }
}
3

Thanks a lot. It works :slight_smile: