# Top Menu Logout Button Theme Component

**URL:** https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492
**Category:** Development
**Created:** [May 17, 2024, 10:35pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492 "2024-05-17T22:35:15Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 17, 2024, 10:35pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/1 "2024-05-17T22:35:15Z")

</div>

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…

> [@Add logout button to top menu](https://meta.discourse.org/t/add-logout-button-to-top-menu/143250/5):
>
> I got it! I won’t promise that it’ll work for you, but this might do it for you. This is common/header.html \<script type="text/discourse-plugin" version="0.8"\> const { iconNode } = require("discourse-common/lib/icon-library"); const { logout } = require("discourse/lib/logout"); api.decorateWidget("header-buttons:before", helper =\> { if (!Discourse.User.current()) return; currentUser = Discourse.User.current(); let container = api.container, lo…

🙏 🙏 🙏

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 18, 2024, 3:12am UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/2 "2024-05-18T03:12:30Z")

</div>

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

```js
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" }
    );
  }
});

```

```css
.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](https://global.discourse-cdn.com/meta/original/4X/1/d/4/1d416d14dcd710b382a437b54b67a14ecdb61340.png)

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 18, 2024, 10:43am UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/3 "2024-05-18T10:43:06Z")

</div>

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](https://meta.discourse.org/t/central-theme-header-user-icons/291526/4) as a starting point)

 ![discourse-header-logout-button](https://global.discourse-cdn.com/meta/original/4X/b/f/2/bf28d942b36cb0cdf7ecc7af410a6dc0289b1856.png)

[https://github.com/denvergeeks/discourse-header-logout-button](https://github.com/denvergeeks/discourse-header-logout-button)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 18, 2024, 3:27pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/4 "2024-05-18T15:27:34Z")

</div>

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](https://github.com/discourse/discourse-theme-skeleton) 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`

```js
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`:

```js
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](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. 👍

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 18, 2024, 3:30pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/5 "2024-05-18T15:30:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 17, 2024, 3:30pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/6 "2024-06-17T15:30:52Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.