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…
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 )
1 Like
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;
}
}
}
3 Likes
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)
2 Likes
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 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:
/**
* Allows for manipulation of the header icons. This includes, adding, removing, or modifying the order of icons.
*
* Only the passing of components is supported, and by default the icons are added to the left of exisiting icons.
*
* Example: Add the chat icon to the header icons after the search icon
* ```
* api.headerIcons.add(
* "chat",
* ChatIconComponent,
* { after: "search" }
* )
* ```
*
* Example: Remove the chat icon from the header icons
* ```
* api.headerIcons.delete("chat")
* ```
*
* Example: Reposition the chat icon to be before the user-menu icon and after the hamburger icon
This file has been truncated. show original
Let me know if you have questions. I can always PR later if you need an example.
3 Likes
Simply awwwesome. Thank you so much for taking the time to guide me!
1 Like
system
(system)
Closed
June 17, 2024, 3:30pm
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.