Hi, I’m trying to recreate the separation of the header menu with the user and notifications similar to central theme on meta, I asked on the theme thread but didn’t get a reply. If I wanted to do the same, which files would I need to edit, and is it better to place the file in my theme or recreate with a theme component ?

Hello @digitaldominica! Apologies I haven’t checked the thread in a bit since I’m pushing the next update soon. Everyone has such valuable feedback but if I don’t look away I’ll have the tendency of adding it to my current list rather than saving it for the update after. :sweat_smile: @Arkshine is correct. It is a pretty hacky method working within the constraints of a theme (much of Central is just prototyping as I’m a designer first second and third, developer fourth). I will give a step-by-step guide on how I achieved the rough prototype in Central. But disclaimer, this solution may not be future-proof if we ever make a core update to the user menu, and there may be a more optimal way to create the component. Step 1: Create a custom user menu component Create these files— :page_facing_up: /javascripts/discourse/components/header-user-new.js :page_facing_up: /javascripts/discourse/components/header-user-new.hbs import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { inject as service } from "@ember/service"; export default class HeaderUserNew extends Component { @service currentUser; @tracked isActive = false; constructor() { super(...arguments); this.handleDocumentClick = this.handleDocumentClick.bind(this); } @action toggleDropdown() { this.isActive = !this.isActive; if (this.isActive) { setTimeout(() => { document.addEventListener("click", this.handleDocumentClick); }, 0); } else { document.removeEventListener("click", this.handleDocumentClick); } } handleDocumentClick(event) { const dropdown = document.querySelector(".header-user-new__menu"); const isClickInside = dropdown.contains(event.target); if (!isClickInside) { this.isActive = false; document.removeEventListener("click", this.handleDocumentClick); } } willDestroy() { super.willDestroy(); document.removeEventListener("click", this.handleDocumentClick); } } {{avatar currentUser}} {{avatar currentUser}} {{#if currentUser.name}} {{currentUser.name}} {{else}} {{currentUser.username}} {{/if}} View Profile {{d-icon "bookmark"}} {{i18n "js.user.bookmarks"}} {{d-icon "cog"}} {{i18n "user.preferences"}} {{d-icon "sign-out-alt"}} {{i18n "user.log_out"}} For now I will leave the CSS styling up to you, but it’s important to include this bit for the toggle effect— .header-user-new { &.active { .header-user-new__menu { display: flex; } } .header-user-new__menu { display: none; } } Step 2: Register the component as a widget Create this file— :page_facing_up: /javascripts/discourse/widgets/header-user-new.js import { hbs } from "ember-cli-htmlbars"; import RenderGlimmer from "discourse/widgets/render-glimmer"; import { createWidget } from "discourse/widgets/widget"; export default createWidget("header-user-new", { tagName: "li.header-dropdown-toggle.header-user-new", html() { return [new RenderGlimmer(this, "div", hbs` `)]; }, }); Step 3: Add the widget onto the header, replace existing user icon with notification bell icon Create this file— :page_facing_up: /javascripts/discourse/initializers/header-edit.js import { h } from "virtual-dom"; import { withPluginApi } from "discourse/lib/plugin-api"; import { iconNode } from "discourse-common/lib/icon-library"; import I18n from "discourse-i18n"; export default { initialize() { withPluginApi("0.8", (api) => { api.reopenWidget("header-notifications", { html(attrs) { const { user } = attrs; let avatarAttrs = { template: user.get("avatar_template"), username: user.get("username"), }; if (this.siteSettings.enable_names) { avatarAttrs.name = user.get("name"); } const contents = [h("div", iconNode("bell"))]; if (this.currentUser.status) { contents.push( this.attach("user-status-bubble", this.currentUser.status) ); } if (user.isInDoNotDisturb()) { contents.push(h("div.do-not-disturb-background", iconNode("moon"))); } else { if (user.new_personal_messages_notifications_count) { contents.push( this.attach("link", { action: attrs.action, className: "badge-notification with-icon new-pms", icon: "envelope", omitSpan: true, title: "notifications.tooltip.new_message_notification", titleOptions: { count: user.new_personal_messages_notifications_count, }, attributes: { "aria-label": I18n.t( "notifications.tooltip.new_message_notification", { count: user.new_personal_messages_notifications_count, } ), }, }) ); } else if (user.unseen_reviewable_count) { contents.push( this.attach("link", { action: attrs.action, className: "badge-notification with-icon new-reviewables", icon: "flag", omitSpan: true, title: "notifications.tooltip.new_reviewable", titleOptions: { count: user.unseen_reviewable_count }, attributes: { "aria-label": I18n.t( "notifications.tooltip.new_reviewable", { count: user.unseen_reviewable_count, } ), }, }) ); } else if (user.all_unread_notifications_count) { contents.push( this.attach("link", { action: attrs.action, className: "badge-notification unread-notifications", rawLabel: user.all_unread_notifications_count, omitSpan: true, title: "notifications.tooltip.regular", titleOptions: { count: user.all_unread_notifications_count }, attributes: { "aria-label": I18n.t("user.notifications"), }, }) ); } } return contents; }, }); const currentUser = api.container.lookup("service:current-user"); if (currentUser !== null) { api.addToHeaderIcons("header-user-new"); } }); }, }; The main change was replacing avatarImg(…) with iconNode to use the notification icon over the user avatar by editing (or “reopening”) the existing header-notifications widget. The original header-notifications code for reference: discourse/app/assets/javascripts/discourse/app/widgets/header.js at 9bc78625af1d54693bc4f1bad3eaa9161ae030b6 · discourse/discourse · GitHub And like what @Arkshine mentioned I hid the user section in the notifications menu with CSS. .d-header .panel { .user-menu.revamped .bottom-tabs, #user-menu-button-profile { display: none; } }

If you inspect a page and check out the Sources tab, you can look at how it’s been made. Essentially: The new user menu is made with a widget, added with api.addToHeaderIcons The notifications menu: The avatar is replaced with a bell icon by replacing its content from header-notifications widget. The user menu quick access icon is hidden with CSS.

Thanks for the assistance as usual, I will make a staging dev to work it out. Thanks again.

Hi, I’ve managed to replace the user avatarImg with the bell icon however the api.addToHeaderIcons(“new-user-icon”); Removes the entire header, instead of display the user avatar with dropdown.

My oversight, there was a typo in that code, it should be— api.addToHeaderIcons(“header-user-new”); Because the widget is registered as header-user-new in Step 2.

Thanks this worked. If i may ask another question on something separate; How does central topic list template alternate between user posted and user replied ? I’ve tried {{#if topic.replies}} and {{#if topic.posters.[0]}} but that doesn’t work.

No problem! topic.posters.1.user is what you’re looking for (the first reply). If it exists, use that, else default to the OP. This is how it’s currently structured in Central— {{#if topic.posters.1.user}} {{d-icon "reply"}} {{~topic.lastPoster.user.username~}} {{theme-i18n "topic_list_item.replied"}} {{format-date topic.bumpedAt format="medium" leaveAgo="true"}} {{else}} {{d-icon "m-post_add"}} {{~topic.posters.0.user.username~}} posted {{format-date topic.bumpedAt format="medium" leaveAgo="true"}} {{/if}}

Oh no topic.posters.0.user is the author, topic.posters.1.user is the first user replying (if they exist). :laughing:

Central Theme Header User Icons

Development

digitaldominica (Digital Dominica) January 15, 2024, 12:55pm 9

Okay so topic.posters.1.user acts as post author ?

Topic		Replies	Views
Upcoming Header Changes - Preparing Themes and Plugins Development dev-news	36	4799	September 8, 2024
Change notifications icon on user page navigation? UX	2	426	October 2, 2022
User menu messages glyph in header with new message indicator? Product Support	1	598	September 15, 2021
Help us test the new header code! Feature performance	27	11361	May 11, 2016
Custom User Menu Theme component	9	1113	January 5, 2026

Central Theme Header User Icons

Related topics