Suggestion: Highlight current article in the left sidebar

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website

I have been using MDN since the beginning of my programming journey. It has been a main online source for learning web technologies and looking up things that I forget. I am also so pleased to see the new design of the MDN website. It is stylish and feels nice.

Here I am not intending to report a problem or an issue. It is a suggestion to improve the user interface. I am on this page. There are a list of navigation links on the left sidebar. But I can not detect which page I am viewing by looking at those links on the left. That would be useful to see the current page link having a little apparent style among other links.

Thank you

MDN Content page report details

• Folder: en-us/learn/server-side/express_nodejs/tutorial_local_library_website
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
• Last commit: https://github.com/mdn/content/commit/0b270d4f95ba1c4abcc81215df774a9448a78105
• Document last modified: 2022-02-18T09:10:31.000Z

[wbamberg]

Odd that it works some places and not others. FWIW I think you’d want this bold in the sidebar - I scanned past it because there is not enough visual separation. If I have trouble, someone who is colour blind or whatever will have even more.

It’s completely dependent on which of the 30-odd sidebar implementations the page in question is using. So that page uses APIRef.ejs, which has this: https://github.com/mdn/yari/blob/2d319e5cff4ea06013925ed64a1ac8b87a42413a/kumascript/macros/APIRef.ejs#L204-L208 . I do agree that the highlighting is not at all obvious, but of course the things that a KS macro can do here are limited.

Same for https://github.com/mdn/yari/issues/5547#issuecomment-1065126137 - some sidebar macros expand sections and some don’t, all depending on the whim of whoever wrote the macro. But sidebar macros can’t scroll the sidebar, so the utility of expanding and highlighting is limited anyway.

It would (of course!) be better for the platform to do this in one place and consistently, and also to implement all Hamish’s points in https://github.com/mdn/yari/issues/5547#issuecomment-1067567913.

It would also relatedly be great for writers to be able to concentrate on the content and organization of sidebars, and Yari to concentrate on the way they are rendered, rather than have a single macro that tries to do both. There have been efforts to sort this out in the past but it’s a substantial project.

[hamishwillee]

@caugner PS you closed my original post as a duplicate, but it is not (at least in total). That additionally requested that the sidebar scroll the current page in the sidebar into visibility if it was not visible on page open.

1. Highlighting the sidebar is essential and so is opening the sidebar so that the current page is not hidden in a collapsed section.
2. Collapsing the rest of the sidebar is desirable so that just the current tree level of the open page is visible on page load
3. Scrolling the sidebar so the current open page is visible is also very desirable in systems like MDN where some of the sidebars are huge. Make sense?