Tweak site navigation design

[ang-zeyu]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Enhancement to an existing feature

Requires #1221 (simplifies / removes the recursive process so that the changes here make more sense)

What is the rationale for this request?

• make the site nav shinier

What changes did you make? (Give an overview)

• tweak the sitenav dom structure, classes, styles to:
  • provide a highlight background color on hover
  • automatically style distinct levels of headings (up to 3 levels of indentation - ie 4 total styles)

Is there anything you'd like reviewers to focus on?

• the new design

Testing instructions:

• npm run test should pass

Proposed commit message: (wrap lines at 72 characters)
Redesign site navigation sidebar

[ang-zeyu]

@damithc could I get your opinion on the tweaks here?

*the pr currently makes clicking a dropdown that is also a link expand/collapse the dropdown (will be fixed)

[damithc]

@damithc could I get your opinion on the tweaks here?

Sounds good @ang-zeyu 👍

[damithc]

@ang-zeyu We seem to have lost some of the flexibility we had before though. For example, it was possible to use normal HTML to tweak the appearance of the siteNav e.g., use <hr> <br> etc. Is it possible to add them back? Would that complicate the code too much?

[ang-zeyu]

not easily, the issue is that previously, the <hr/br> was being inserted into the <li> item. It wasn't an issue then as there was no box highlighting, only a link.

With the "box" this becomes an issue, as the whole <li> is highlighted, and we don't want the extra content to extend the highlight box.

There isn't a way afaik in markdown to insert content between the <li>'s (the * ...'s - it just gets chucked back into the <li>) either, so it's not possible to differentiate content meant (from author standpoint) to be "outside the box" from inside. (unless you manually write <ul><li>...</li><hr><li>...</li></ul>)

I could hardcode <hr/br>'s to be moved outside the "box", but its hardly an ideal solution since then we'd have custom content like searchbars, videos, ads maybe even 😬.

Instead, how about playing to the markdown spec and using another list item to insert custom content?

* ... link ...
* <hr>
* ... link ...

This works currently, but an extra "box" with highlight is created for the <hr> item as well.

1. In this case I could easily blacklist list items that don't have nested <ul>'s or <a>'s from getting the highlight.
2. Or necessitate the user to use markdown-it-attrs to do
   * <hr> {.no-highlight} (we should deprecate :expanded: to markdown-it-attrs at some point too)

[damithc]

This works currently, but an extra "box" with highlight is created for the <hr> item as well.

1. In this case I could easily blacklist list items that don't have nested <ul>'s or <a>'s from getting the highlight.
2. Or necessitate the user to use markdown-it-attrs to do
   * <hr> {.no-highlight} (we should deprecate :expanded: to markdown-it-attrs at some point too)

We can try option 1. In that case, need to document that 'trick' in the user guide as it will not be obvious. Can create an issue and get to it later as it is not urgent (because old sites using rouge syntax is going to break anyway, even with that solution).

[ang-zeyu]

Can create an issue and get to it later as it is not urgent (because old sites using rouge syntax is going to break anyway, even with that solution).

Should be a pretty minor change, will lump it in with #1241 as well