Add Text In Header Beside Logo

Dev
7

I just did this for a theme. I’m using the site’s title and short description, but you could also insert values from theme settings or localized text.

Add a glimmer component in components/header-logo-title.gjs

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
 @service siteSettings;

 <template>
   {{#unless @outletArgs.minimized}}
     <div class="header-logo-title">
       <span
         class="header-logo-title__title"
       >{{this.siteSettings.title}}</span>
       {{#if this.siteSettings.short_site_description}}
         <span
           class="header-logo-title__description"
         >{{this.siteSettings.short_site_description}}</span>
       {{/if}}
     </div>
   {{/unless}}
 </template>
}

Attach it to the outlet in /api-initializers/my-theme.js

import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

The #unless-helper checks for minimized state of the logo and only adds the text when the full logo would be visible. If you always want to show it you’d need to drop that condition.

4 Likes