@ToyKeeper and @tercet : Regarding the janky behavior of the sidebar items, yes, the code that customizes the sidebar menus is ridiculously complex for what it accomplishes. But I can’t find a better way, and it’s unfortunately necessary. Here’s how the sidebar would look without it:
Experience has shown that many users will never find items that are even slightly hidden under a single level of UI, so I had to move the “FAQ” entry out of the “More” expander and rename it to “BLF Rules”. We also need the “Commercial Sellers” and “Contact the Admin” links to appear front and center sidebar. So I use this monstrosity:
<script>
const links = [
{ title: "BLF Rules", src: "/rules", icon: "gavel" },
{ title: "Commercial Sellers", src: "/commercial", icon: "gift" },
{ title: "Contact the Admin", src: "/new-message?username=sb56637", icon: "envelope" }
]
$(document).ready(function () {
if (document.getElementById("toggle-hamburger-menu")) {
// We're in mobile view
addToggleListener(document.getElementById("toggle-hamburger-menu"))
} else {
// We're in desktop view
addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
addCustomLinks()
}
function addToggleListener(toggleEl) {
if (toggleEl) {
toggleEl.addEventListener("click", function () {
// Wait a bit for the sidebar to load
setTimeout(function() {
let sidebar = document.getElementsByClassName("sidebar-section-header").length
if (sidebar) {
addCustomLinks()
}
}, 100)
})
}
}
function addCustomLinks() {
// Wait a bit until navigation has been loaded
setTimeout(function () {
const parentEl = document.getElementsByClassName("sidebar-section-content")[0]
let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
if (parentEl && !linksAlreadyAdded) {
links.filter(function (link) {
let linkDiv = document.createElement("li")
let linkTitleTrim = link.title.replace(/\s+/g, '')
linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
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" id="link_${linkTitleTrim}"></span>
<span class="sidebar-section-link-content-text"> ${link.title} </span>
</a>
`
parentEl.append(linkDiv)
let linkIcon = document.getElementById("link_" + linkTitleTrim)
if (linkIcon && link.icon) {
linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#${link.icon}"></use>
</svg>
`
}
})
}
}, 100)
}
})
</script>
.sidebar-section-message { /* Don't show the site slogan in the Community menu to anon users */
display: none;
}
.sidebar-wrapper li a.sidebar-section-link-about {
display: none;
}
.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-about {
display: none;
}
.sidebar-wrapper li a.sidebar-section-link-faq {
display: none;
}
.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-faq {
display: none;
}
.sidebar-section-content {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
.sidebar-more-section-links-details {
order: +1;
}
}
.sidebar-section[data-section-name="tags"] {
display: none
}
.sidebar-section[data-section-name="categories"] {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
order: +1;
}
.sidebar-custom-sections {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
order: +1;
}
So you can probably figure out from the JS code above why the custom links that I add by default appear and disappear; it’s basically injecting them into an existing sidebar <div>, which only exists when the sidebar is visible. The code includes a kludge to make the custom items reappear after manually hiding/showing the sidebar with the hamburger menu, but it doesn’t handle the case where the sidebar disappears and then reappears when you horizontally shrink and then increase the browser window width. The same goes for hiding/expanding the “Community” menu. Those are the only cases I’m aware of that consistently loses the custom items until the page is hard-reloaded. @tercet do you remember how you got it to do this? Did you add your own custom sidebar menu section?
I suppose that to reduce the jank and the complexity I could hide almost everything in the “Community” section and re-implement those links in another Discourse custom section. It would look something like this:
But the Discourse devs are planning on making the “Community” section customizable at some point in the future, so it might not be worth the effort to perfect it at this stage.
I hid the tags menu because it gets in the way in the case of my admin sidebar, and since there are only 2 tags I didn’t think that anybody would find that section useful. I can restore them if needed though.
Or maybe I’ll change the string translation to Readed.
