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… [image] Add logout button to top menu Development 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 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… :pray: :pray: :pray: (At the moment following those instructions and enabling the component only makes the entire Top Menu disappear :crying_cat_face: )

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] https://github.com/denvergeeks/discourse-header-logout-button

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", , { 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]

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 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 = ; 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:

Top Menu Logout Button Theme Component

Development

denvergeeks May 18, 2024, 3:30pm 5

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

Topic		Replies	Views
Add logout button to top menu Development	6	2861	March 16, 2020
Add a Logout Button in Header for Discourse Themes Theme component	10	380	January 1, 2025
Add button in header for logged in users Development	4	984	August 26, 2023
Updated Custom Header Icon: Post Data via URL Development plugin-api	5	351	February 12, 2025
Add button to top menu Development	18	6842	July 17, 2020

Top Menu Logout Button Theme Component

Related topics