Top Menu Logout Button Theme Component

Development

AI-generated summary

The discussion revolves around creating a Theme Component for adding a Logout button to the top menu in Discourse. denvergeeks requests guidance on updating existing code, and Arkshine provides a sample code snippet using apiInitializer and a custom CSS style.

denvergeeks creates a Theme Component based on Carson’s code and shares it on GitHub for testing.

Arkshine reviews the code and suggests improvements, including using the discourse-theme-skeleton as a reference, renaming files with .gjs extension, and moving the template to a separate file. Arkshine also offers to create a pull request with an example.

denvergeeks expresses gratitude for Arkshine’s guidance and feedback.

1

I’ll roll up and post a Theme Component on GitHub for adding a Logout button to the top menu if someone could please let me know how to update @pfaffman’s code here…

:pray: :pray: :pray:

(At the moment following those instructions and enabling the component only makes the entire Top Menu disappear :crying_cat_face: )

2

Something like that. Feel free to adjust to your needs.

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add(
      "logout",
      <template>
        <li class="logout">
          <DButton
            @action={{routeAction "logout"}}
            class="btn-flat icon"
            @icon="sign-out-alt"
            @title="user.log_out"
            @label="user.log_out"
          />
        </li>
      </template>,
      { before: "auth" }
    );
  }
});

.d-header-icons .logout {
  margin-left: 1em;

  button.icon {
    width: auto;

    padding-left: 0.5em;
    padding-right: 0.5em;

    svg {
      margin-right: 0.2em;
      width: 1em;
    }
  }
}

image

3

OK I’ve rolled it but I’d appreciate any testing before I submit to Meta…

(I ended up using Carson’s Central Theme Header User Icons - #4 by carson as a starting point)

discourse-header-logout-button
discourse-header-logout-button3792×1850 317 KB

https://github.com/denvergeeks/discourse-header-logout-button

4

I would not recommend using a widget; it will eventually disappear as part of the core modernization.

The same is true for api.addToHeaderIcons; it’s now deprecated in favor of api.headerIcons.add.

Here are some suggestions:

  • I encourage you to use the GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub as a reference when creating a theme component. It contains the latest configuration files. It’s helpful for linting/prettifying code and a good practice to have a standard structure.

  • When using the <template> syntax, rename the file with .gjs (glimmer JS); otherwise, it may not work.

  • In my example, you could move the template in its file, for example:
    /javascripts/discourse/components/logout-header-button.gjs

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";

const LogoutHeaderButton = <template>
  <li class="logout">
    <DButton
      @action={{routeAction "logout"}}
      class="btn-flat icon"
      @icon="sign-out-alt"
      @title="user.log_out"
      @label="user.log_out"
    />
  </li>
</template>;

export default LogoutHeaderButton;

Then, in the initializer, you import the component and use it as a parameter in headerIcons:

import LogoutHeaderButton from "../components/logout-header-button";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
  }
});
  • The location of the button can be adjusted. You can read the documentation:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1838-L1886

Let me know if you have questions. I can always PR later if you need an example. :+1:

5

Simply awwwesome. Thank you so much for taking the time to guide me!