Jagster
(Jakke Lehtonen)
October 22, 2022, 3:20pm
69
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
Canapin
(Coin-coin le Canapin)
November 8, 2022, 12:53am
70
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:
// Skip external links support for now
return;
}
} else {
args.route = route;
}
this.addCommunitySectionLink(args, name.match(/footerLinks/));
} catch {
deprecated(
`Usage of \`api.decorateWidget('hamburger-menu:generalLinks')\` is incompatible with the \`enable_experimental_sidebar_hamburger\` site setting. Please use \`api.addCommunitySectionLink\` instead.`
);
}
return;
}
}
}
/**
* Adds a new action to a widget that already exists. You can use this to
Also, the fact that external links don’t work anymore could come from this:
const args = {
name: className || textContent.replace(/\s+/g, "-").toLowerCase(),
title: textContent,
text: textContent,
};
if (href) {
if (DiscourseURL.isInternal(href)) {
args.href = href;
} else {
// Skip external links support for now
return;
}
} else {
args.route = route;
}
this.addCommunitySectionLink(args, name.match(/footerLinks/));
} catch {
deprecated(
`Usage of \`api.decorateWidget('hamburger-menu:generalLinks')\` is incompatible with the \`enable_experimental_sidebar_hamburger\` site setting. Please use \`api.addCommunitySectionLink\` instead.`
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
asirota
(Alex Sirota)
January 6, 2023, 9:58pm
71
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
Canapin
(Coin-coin le Canapin)
January 7, 2023, 1:30pm
72
It may be related to:
I noticed this too and it seems to only the external links not appears under More.
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
nathank
(Nathan Kershaw)
January 13, 2023, 10:37pm
74
Beyond what CSS can achieve I think. The discourse team do have this on their roadmap, but it isn’t happening quickly (I think):
We want to allow users to add a custom section of links to their sidebar.
In a first pass for this feature, we plan to build upon the existing sidebar preferences page , and allow a user to add a single custom section for these links.
We think it can work something like this:
checkbox for “Show Custom Section”.
If checked Custom Section appears above Categories Section and values must have valid Name and at least one valid Link to “Save Changes”
textbox for Name of the custom section (defaul…
6 Likes
hosch
(Holger Schmermbeck)
January 25, 2023, 3:39pm
77
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 Wow, very nice, exactly what I was looking for! Thanks very much.
1 Like
@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:
@Ryan_Hyer Very nice! You figured out the way to make the items appear (or continue appearing) after the hamburger toggle event, which was the problem I was running into here:
I also was able to hack your code into displaying what I want in the Community menu without being hidden under More:
Head:
<script>
const links = [
// FontAwesome icons may need to be added in the site settings if they don't correctly appear
{ title: "User Directory", src: "/u?asc=true&cards=yes&order=usernam…
1 Like
bquast
(Bastiaan Quast)
February 26, 2023, 6:03pm
82
Thanks @hosch and @Olivier_Lambert for making this.
Could you please explain to this newbie where I should insert this?
1 Like
bquast
(Bastiaan Quast)
February 26, 2023, 6:05pm
83
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
Jagster
(Jakke Lehtonen)
February 26, 2023, 6:09pm
84
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
bquast
(Bastiaan Quast)
February 26, 2023, 7:20pm
85
Jakke Lehtonen:
Add that on head-section
I tried this, it gave me an error on using a semicolon near src
.
Let try again. Tnx
1 Like
MarcP
(MarcP)
March 1, 2023, 12:47am
86
MarcP:
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.
This is still a thing, the solutions after did not fix the issue.
Setting: Invite friends,/my/invited/pending/,f
Off-topic:
Alex Sirota:
image1920×1032 126 KB
I saw this condensed sidebar styling before, I can’t seem to find it anywhere. Is this a theme component?
1 Like
Canapin
(Coin-coin le Canapin)
March 7, 2023, 12:58pm
87
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
Richie
(Richie Rich)
September 7, 2023, 6:58pm
90
We’ve just had to change our navigation menu setting from “Legacy” to “Header Dropdown”, before it’s enforced on us:
Most of our custom hamburger menu links have now disappeared, and the two remaining links are both broken
Does this theme component support the new navigation @Johani ?
Here’s how our burger menu used to look under the “Legacy” option:
Here’s how how it looks under the “Header Dropdown” option:
Notable differences:
Broken Link: Insurance
Broken Link: Membership
Missing: Drone Scene
Missing: Good 2 Go
Missing: Competitions
Missing: Drone Code
Any advice or support would be very much welcomed
1 Like
Richie
(Richie Rich)
September 7, 2023, 7:01pm
91
If it helps re the broken links, one example used to point to:
https://example.com/faq#insurance
But when you click on it now, under this new menu system, it now sends you to:
https://example.com/https://example.com/faq
1 Like
Richie
(Richie Rich)
September 7, 2023, 7:11pm
92
@Canapin did you ever find a solution to your problem back in October 2022?
It might be the same problem we’re now facing.
1 Like
Canapin
(Coin-coin le Canapin)
September 7, 2023, 7:23pm
93
I believe this component is/will be discontinued since you can now add custom sections /links to your sidebars
1 Like