I noticed this too and it seems to only the external links not appears under More.
3 Likes
I use internal links in this component, for example, I have a link that opens user invites: /my/invited/pending/
When opening the link from the sidebar I get: Oops! That page doesnāt exist or is private.
The link works when accessed from the URL bar.
When entering the full URL (https://domain.com/my/invited/pending/) the URL opens like this:
https://domain.com/https://domain.com/my/invited/pending/
2 Likes
Yep. Known issue.
2 Likes
Hello,
This is should work with: Chat,/chat/browse/open 
2 Likes
Yeah, I know. I sended my comment perhaps a little bit too fast. Well, defenetly too fast, because I should say there must use path instead full url.
Extra link for the chatā¦ well, new sidebar changed the playground totally and it is not needed anymore.
2 Likes
I took a look at Discourseās sidebar code and @nolo icons addition.
It seems that currently, itās not possible to customize the iconās custom links because the hamburger menu decoration method doesnāt take into account the prefixValue constant (which contains the iconās name) or something like thatā¦
It also seems to me that hamburger-menu decorations with api.decorateWidget are going to be depreciated. See:
Also, the fact that external links donāt work anymore could come from this:
So that there should be some changes in core to make this available.
My knowledge of how Discourse works is almost non-existent so I could be very wrong.
Am I right about my findings?
3 Likes
Iāve installed this theme component from github repo. running 3.0.0.beta15 on my discourse and even though I appear to have added it, the hamburger menu doesnāt show my linkā¦ Any ideas?
1 Like
It may be related to:
To this day, external links still donāt work.
And internal links must begin with a relative path, not a full path.
3 Likes
Thanks a lot for this useful component. I need to add a few important internal links, but now that the hamburger menu is integrated into the sidebar I find that theyāre not very visible under the More menu. Users are usually terrible at finding things, so I really need to put them in the top level, ideally right after My posts. Are there any CSS hacks to accomplish this?
2 Likes
Beyond what CSS can achieve I think. The discourse team do have this on their roadmap, but it isnāt happening quickly (I think):
6 Likes
I use:
<script>
const customHeader = document.createElement("div")
customHeader.className = "sidebar-section-wrapper sidebar-section-community"
customHeader.innerHTML = `
<div class="sidebar-section-header-wrapper sidebar-row">
<button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
<span class="sidebar-section-header-text"> Rechtliches </span>
</button>
</div>
<div class="sidebar-section-content" id="customNavigation"/>
`
$(document).ready(function () {
// Create the links
const links = [
{ title: "Impressum", src: "/impressum" },
{ title: "Datenschutz", src: "/privacy" },
]
// Mobile
let hamburger = document.getElementById("toggle-hamburger-menu")
if (hamburger) {
hamburger.addEventListener("click", addCustomLinks)
} else {
addCustomLinks()
}
let bool = false;
function addCustomLinks() {
setTimeout(function () {
// Force to wait until navigation has been loaded
const sidebar = document.getElementsByClassName("sidebar-sections")[0]
if (sidebar) {
sidebar.append(customHeader)
if (bool) return;
// Get the customNav Id
const customNavigation = document.getElementById("customNavigation")
if (customNavigation) {
links.filter(function (link) {
let linkDiv = document.createElement("div")
linkDiv.className = "sidebar-section-link-wrapper"
linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
<span class="sidebar-section-link-prefix icon"></span>
<span class="sidebar-section-link-content-text"> ${link.title} </span>
</a>
`
customNavigation.append(linkDiv)
let linkIcon = document.getElementById("link_" + link.title)
})
}
}
bool = true
}, 0)
}
})
</script>
You can see the result at https://forum.courservio.de/
The original version of this code is from Add custom links to sidebar. Maybe it could help you.
6 Likes
@hosch By any chance is it possible to move it higher up? Iād like it to appear after the Community section, or possibly even before it.
Edit: Looks like itās possible with a variation on this:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot
.sidebar-sections {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
.sidebar-section-community {
order: -1;
}
}
I wonder about moving it to the highest position?
1 Like
There is a quirk with this method where the custom div disappears when toggling the visibility of the sidebar, for example if the browser window is narrow. This is a problem especially for tablets, which usually get the desktop version of Discourse and require clicking on the hamburger menu to display the sidebar. Any possible workarounds? Thanks!
Edit: Solved here:
1 Like
Thanks @hosch and @Olivier_Lambert for making this.
Could you please explain to this newbie where I should insert this? 
1 Like
How can I reorder elements in a sidebar / hamburger-menu section?
E.g. I want to put āAll categoriesā above the categories in the āCategoriesā section, same with āAll tagsā.
Thank you!
1 Like
You know now how to use a component for CSS, right? Add that on head-section.
You canāt easily. Yet anyway. It is no totally finished and polished at the moment.
2 Likes
I tried this, it gave me an error on using a semicolon near src.
Let try again. Tnx
1 Like
This is still a thing, the solutions after did not fix the issue.
Setting: Invite friends,/my/invited/pending/,f
Off-topic:
I saw this condensed sidebar styling before, I canāt seem to find it anywhere. Is this a theme component?
1 Like
You can use this CSS:
#sidebar-section-content-categories,
#sidebar-section-content-tags {
display: flex;
flex-direction: column;
li:last-child {
order: -1;
}
}
8 Likes