question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Suggestion: Highlight current article in the left sidebar

See original GitHub issue

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. image 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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
wbambergcommented, Mar 16, 2022

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.

2reactions
hamishwilleecommented, Mar 15, 2022

@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?
Read more comments on GitHub >

github_iconTop Results From Across the Web

Sidebars - Human Interface Guidelines
A sidebar enables app navigation and provides quick access to top-level collections of content in your app or game.
Read more >
Adjust your sidebar preferences
From your desktop, click your profile picture in the top right. Select Preferences from the menu. Click Sidebar in the left-side column. Under...
Read more >
Navigate with the sidebar – Notion Help Center
Notion's left-hand sidebar makes it easy to structure all the content in your workspace. Here's everything you need to know on how to...
Read more >
Highlight part of page you're focused on - Google Chrome ...
To highlight part of a page: On your computer, open Chrome Chrome . At the top right, click More More and then Settings....
Read more >
WordPress Sidebar: What It Is and How to Create It
A WordPress sidebar can be filled with the same information on every webpage or customized based on the pages it is on.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found