Ability to add a custom section of links to the sidebar

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:

  1. 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”
  2. textbox for Name of the custom section (default: My Links, cannot be blank)
  3. button to “Add link”. when clicked, show dialog to add link
  4. Added links show button to remove it

Add link dialog

  1. Add link dialog has two text boxes: Name, URL
  2. Name cannot be blank, may include emoji (which should be rendered in the sidebar)
  3. URL must be a link to within the same Discourse site*
  4. Save adds link, Cancel discards it

When a valid custom section is configured and saved, the sidebar will show that section above “Categories”.

* Why?

  1. We’d like to be able to “highlight”/'bold" the link in the sidebar when you’re on the corresponding page.
  2. We’d like to store the “path” part, so site renames work as expected.

We think that adding links today will be valuable because it will allow folks to easily access things like “Open sidebar bugs” and enable us to take advantage of any future improvements for topic lists like improved topic list filters. As long as things have a URL, people can add them to their sidebar.

We think users will want to be able to add multiple sections and reorder them, but we will keep that out of scope initially.

16 Likes

One question on this, @mcwumbly. This looks like a strategy to allow a user to add personal links to the sidebar. Would this approach allow site owners to add links that all users would see?

Spoiler - I think it should. :slight_smile:

5 Likes

Yeah, I think it could certainly be expanded to do something like that, and I see how that’d be a more useful feature for some sites than the user one.

8 Likes

I really like this idea. :+1:

Just a few questions:

  1. Will there be a limit to the number of custom links a user would be allowed to add ?

  2. Will the end of links (in the sidebar) be truncated like on the following mock-up? (I’d be fine with it).
    And if they will, will the user be able to read their text in full length in a tooltip (if the mouse cursor hovers the links)?

Good question. We probably need some limits in place, but it’s not something we’ve discussed in detail. What kind of limits are you hoping to see (or avoid)?

1 Like

At first, I thought that 10 links could be enough but I guess other forum members will want more. Maybe 20. That’s why, I would try with 20 and wait for users’ feedback and see if they request more (but I think that 20 is already a good number).

1 Like

To extend the “user-friendliness” of this feature, it would be pretty cool to let the user drag and drop links (any link from the current Discourse page) directly to the sidebar.

A pointer (between links that were previously added to the “My Links” DIV) would indicate where the link would be placed.

Mock-up (right-click > “open image in new tab” to see the animation in full size):

anim01

Perhaps, the following page could help implement drag and drop?

7 Likes

I’d love to be able to set default links for my site, which users could dismiss. That would make this strictly better than the custom header links I’m using now, as I see it.

3 Likes

+1 on adding custom links. We had a few custom links added to the original dropdown menu. Would be nice to add them back, similar to how Discourse itself has “Birthdays” and “Docs” under “More” option.

4 Likes

Hey y’all!

I’m wondering how I could go about adding links to the new sidebar.

There doesn’t seem ot be any connector in that area…

What would be the most effective way to do that?


Edit

My question have been moved here… Not sure why as I’m really asking about the same thing.

In any case, here’s what I did to solve it. It’s NOT a pretty solution and it would be much better if there was a way to integrate with the templating system of discourse.

Here it goes:

<script>
    let logo = "" // I've removed the SVG paths because y'all don't need it.
    const div = document.createElement('div') // Create the link to add
    div.className = 'sidebar-section-link-wrapper' // add the relevant classes
    div.innerHTML = `
          <a title="Tous les sujets" href="https://www.latranchee.com" id="ember12" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
            <span class="sidebar-section-link-prefix icon">
              <svg viewBox="0 0 100 100" class="logoIcon" xmlns="http://www.w3.org/2000/svg">${logo}</svg>
            </span>
            <span class="sidebar-section-link-content-text"> Accueil </span>
          </a>
    ` // Populate the link
    
    $( document ).ready(() => { // This is needed to wait until ember has finished its thing
        // add navigation on desktop
        let desktop = document.getElementsByClassName('sidebar-section-content')[0];
        if(desktop) desktop.prepend(div)
        
        // add navigation on mobile
        let hamburger = document.getElementById('toggle-hamburger-menu').addEventListener("click", addMobileNav);
        function addMobileNav () {
            setTimeout(function(){ // Force to wait until navigation has been loaded
                document.getElementsByClassName('sidebar-section-content')[0].prepend(div);
            }, 0);
        }
    })
</script>

Result on desktop…

image

& Result on mobile:

image

Untill there’s a better way, this’ll have to do!

Edit #2

Tidied up the code so the navigations gets loaded from an array of objects.

<script>
  let rss = `<path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M7.5,15A1.5,1.5 0 0,0 6,16.5A1.5,1.5 0 0,0 7.5,18A1.5,1.5 0 0,0 9,16.5A1.5,1.5 0 0,0 7.5,15M6,10V12A6,6 0 0,1 12,18H14A8,8 0 0,0 6,10M6,6V8A10,10 0 0,1 16,18H18A12,12 0 0,0 6,6Z"></path>`
  let mdiSchool = `<path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>`
  let logo = `<g xmlns="http://www.w3.org/2000/svg" fill="#0e1e2b">
    <path d="M77.4 196.2 c-8 -6.9 -11.4 -16.9 -11.4 -33.2 0.1 -20.9 2.4 -30.2 6.7 -27.4 2.9 1.8 4.3 9.4 5.4 28.9 0.9 16.5 1.4 19.8 3.6 25 1.3 3.3 2.5 6.7 2.6 7.5 0.3 2.6 -3.6 2.1 -6.9 -0.8z"/>
    <path d="M2.9 167.3 c-5.1 -6.1 11.2 -24.2 21.9 -24.3 2.6 0 2.7 1.1 0.6 5.5 -1.4 3 -12.6 13.5 -14.3 13.5 -0.4 0 -1.4 1.2 -2.1 2.6 -2 3.6 -4.5 4.8 -6.1 2.7z"/>
    <path d="M87.4 160.5 c-1.9 -1.9 -2.4 -3.4 -2.2 -5.8 0.4 -4.5 3.2 -4.7 7.4 -0.6 3.9 3.8 4.1 4.9 1.6 7.2 -2.5 2.3 -3.9 2.1 -6.8 -0.8z"/>
    <path d="M126.5 158.9 c-6 -3 -10 -7.4 -17 -18.6 -7.6 -12.2 -8.2 -13.8 -5.8 -15.2 2.8 -1.5 7.3 1.8 21.3 15.4 6.9 6.8 13.5 12.6 14.7 12.9 2.7 0.8 3.9 4.2 2.3 6.1 -1.8 2.2 -10.7 1.8 -15.5 -0.6z"/>
    <path d="M36.2 156.7 c-1.5 -1.8 -1.8 -7.8 -0.4 -10.3 1.9 -3.6 3.8 -4.7 6.1 -3.4 1.7 0.9 2.1 2 2.1 6.1 0 2.8 -0.5 5.9 -1 7 -1.2 2.2 -5.2 2.5 -6.8 0.6z"/>
    <path d="M121.5 116 c-0.8 -2.5 1.1 -5.1 3 -4.4 2 0.8 2.7 3.4 1.4 5 -1.7 2 -3.7 1.7 -4.4 -0.6z"/>
    <path d="M4.3 113 c-2.6 -1.1 -2.8 -1.9 -1 -4.4 1.5 -2 7.5 -2.9 9.5 -1.4 1.8 1.5 1.5 4.6 -0.7 5.8 -2.3 1.2 -4.8 1.2 -7.8 0z"/>
    <path d="M32.7 82 c-6.3 -4 -10.3 -9.9 -13.2 -19.4 -2.5 -8.8 -4 -24 -2.7 -29.5 0.9 -4.2 3.4 -6.1 6 -4.5 1.7 1.1 1.9 2 4.6 17.9 1.8 10.8 7.3 22.5 14.1 30.3 2.8 3.1 4.5 5.8 4.1 6.7 -1 2.6 -7.7 1.8 -12.9 -1.5z"/>
    <path d="M133.6 80.4 c-2.1 -2.1 -2 -2.9 0.6 -5.4 2.8 -2.6 6.6 -3.6 8.6 -2.3 2.5 1.5 2.4 2.9 -0.3 6.2 -2.9 3.4 -6.4 4 -8.9 1.5z"/>
    <path d="M93.3 73.3 c-2 -0.8 -1.6 -2.8 2.6 -11.1 7.1 -14.1 10.8 -19.4 22.7 -31.9 9.8 -10.5 12.1 -12.4 14.3 -12.1 1.5 0.2 2.7 1 2.9 2 0.6 3.2 -18 29.9 -29.4 42.1 -6 6.5 -11.1 11.7 -11.4 11.6 -0.3 0 -1.1 -0.3 -1.7 -0.6z"/>
    <path d="M61.7 56.2 c-2.7 -3 -3.3 -7.9 -1.2 -10.2 1 -1.1 2.4 -2 3.1 -2 2.1 0 4.4 4.2 4.4 8 0 5.6 -3.1 7.7 -6.3 4.2z"/>
    <path d="M96.2 18.8 c-4.2 -4.2 4 -19.3 8.8 -16.3 1.8 1.1 1 6.9 -1.7 12.2 -2.6 5.3 -4.7 6.5 -7.1 4.1z"/>
    </g>`

  const div = document.createElement("div")
  div.className = "sidebar-section-link-wrapper"
  div.innerHTML = `
            <a href="https://www.latranchee.com" class="sidebar-section-link sidebar-section-link-everything sidebar-row">
              <span class="sidebar-section-link-prefix icon">
                <svg viewBox="0 0 100 100" class="logoIcon" xmlns="http://www.w3.org/2000/svg">${logo}</svg>
              </span>
              <span class="sidebar-section-link-content-text"> Accueil </span>
            </a>
      `

  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"> Camp d'entraînement </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Accueil", src: "https://www.latranchee.com", svg: logo, viewbox: "0 0 100 100" },
      { title: "Formations", src: "https://www.latranchee.com/formations", svg: mdiSchool, viewbox: "2 -2 16 16" },
      { title: "Blogue", src: "https://www.latranchee.com/blogue", viewbox: "1 -3 16 16", svg: rss },
    ]

    // 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.prepend(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" id="link_${link.title}"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
              if (linkIcon && link.svg) {
                linkIcon.innerHTML = `<svg viewBox="${link.viewbox}" class="logoIcon" xmlns="http://www.w3.org/2000/svg"> ${link.svg}</svg>`
              }
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

Hope that can help someone!

2 Likes

+1 from my side here. A bit more customizability for the sidebar such as custom links or maybe even more buttons at the top would be neat!

Thanks for considering this, I think for my forum’s userbase this is a pretty important feature. Users are usually terrible at discovering even slightly hidden information, and I need to add some prominent links for things like “Contact admin” and “Forum rules”. I don’t mind if they go directly under the Community heading, but they definitely won’t be discovered under the More menu. Also the flexibility to have internal and external links would be important, external links are currently broken in the Custom Hamburger Menu:

1 Like

Here’s another example that I hope will be helpful to someone, based heavily off the above examples. This code doesn’t add an entirely new section, but instead adds additional links to the bottom of the “More” panel in the Community section (but before the FAQ and About links in the footer). It supports FontAwesome icons (assuming they’re added in the site settings) and external links. It handles edge cases where the sidebar is closed and re-opened, and/or the Community section is collapsed and re-expanded. It works on desktop and mobile.

I’m hardly a JavaScript expert, so I apologize for any bad or non-optimal code. On my site, at least, it seems to work as intended.

Just toss this code into the Header tab of a theme component and customize as needed:

<script>
const links = [
    // FontAwesome icons may need to be added in the site settings if they don't correctly appear
    { title: "My Account", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "User Directory", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "External Site", src: "https://google.com/", icon: "globe" }
]

$(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])
        addHeaderListener()
        addMoreListener()
    }

    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) {
                        addHeaderListener()
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }

    function addHeaderListener() {
        let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
        if (communityHeader) {
            communityHeader.addEventListener("click", function () {
                // Wait a bit for the section to expand
                setTimeout(function() {
                    let communitySection = document.getElementById("sidebar-section-content-community")
                    if (communitySection) {
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }
    
    function addMoreListener() {
        let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
        if (buttonMore) {
            buttonMore.addEventListener("click", addCustomLinks)
        }
    }
    
    function addCustomLinks() {
        // Wait a bit until navigation has been loaded
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[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>
4 Likes

@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:

Your code is very orderly and clean too. Thanks to that I was able to hack it 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=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "External Site", src: "https://google.com/", icon: "globe" }
]

$(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>

And the complementary CSS:

.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-wrapper li a.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-about {
    display: none;
}

.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-faq {
    display: none;
}
2 Likes

Just want to bring your attention to this topic which just came out:

Please provide feedback in that topic!

6 Likes

This topic was automatically closed after 42 hours. New replies are no longer allowed.