[#1535] Added subheading anchors to product page sidebar

[pi-sigma]

• add subheadings to product page sidebar
• remove anchors for 'links' and 'see further' ('zie ook')

Taiga: #1535

[codecov-commenter]

Codecov Report

Merging #724 (770d0f8) into develop (ae69cd9) will increase coverage by 0.04%.
Report is 33 commits behind head on develop.
The diff coverage is 99.31%.

@@             Coverage Diff             @@
##           develop     #724      +/-   ##
===========================================
+ Coverage    96.27%   96.31%   +0.04%     
===========================================
  Files          674      684      +10     
  Lines        24007    24217     +210     
===========================================
+ Hits         23113    23325     +212     
+ Misses         894      892       -2     

Files Changed	Coverage Δ
...pen_inwoner/components/templatetags/header_tags.py	100.00% <ø> (ø)
src/open_inwoner/pdc/tests/test_category.py	100.00% <ø> (ø)
src/open_inwoner/ssd/tests/test_views.py	100.00% <ø> (ø)
src/open_inwoner/utils/context_processors.py	90.90% <ø> (ø)
src/open_inwoner/utils/iteration.py	92.85% <92.85%> (ø)
src/open_inwoner/haalcentraal/utils.py	94.28% <96.87%> (-0.88%)	⬇️
src/open_inwoner/accounts/signals.py	94.59% <100.00%> (ø)
.../open_inwoner/accounts/tests/test_profile_views.py	100.00% <100.00%> (ø)
src/open_inwoner/accounts/views/profile.py	100.00% <100.00%> (+0.58%)	⬆️
src/open_inwoner/cms/extensions/cms_menus.py	75.00% <100.00%> (+1.82%)	⬆️
... and 20 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[jiromaykin]

Two changes are needed:

1. Make it so only the Headings that are scrolled into will display as Bold, so not the entire list-item
2. Bring back the correct blue/scroll-color (link) line that appears and shows the progress of the scroll (see image)

If you need more: You can add more scroll-classes by adding more active/open class rules for the Gumshoe JS here: src/open_inwoner/js/components/anchor-menu/anchor-menu.js

Example of primary-color 'voortgangsbalk/progress-line' on the left of each link/heading that is scrolled onto:

More info about Gumshoe:
https://github.com/cferdinandi/gumshoe

[jiromaykin]

I would like to show this to a designer actually - because I think this should be 'list-style-type:none; so it looks cleaner and ore in line with the rest of the website, but i'm really not sure about this one. So perhaps leave it as is.

[pi-sigma]

After playing around a bit with different styles, I think you're right. Changed it accordingly.

[pi-sigma]

@Bartvaderkin Why do you keep changing the titles of my PRs? I use the imperative mood for a reason. See here:

https://git.kernel.org/pub/scm/git/git.git/tree/Documentation/SubmittingPatches?h=v2.36.1#n181

[jiromaykin]

Nice work - just one more detail to improve: on mobile there should not be a left-margin in the dropdown for the H1 level; adding a bit of a margin to the H2 level is OK for now (look at https://open-inwoner-test.maykin.nl/onderwerpen/zorg-en-ondersteuning/producten/logeeropvang/ if you need an example):

[pi-sigma]

@jiromaykin I replaced the magic numbers with variables. The spacing to the left of the h1, however, is no longer margin but padding (in order to make the continuous border with coloring work). Removing that altogether will push the h1 all the way to the left, so that it is no longer aligned with the menu button. I'm not 100% sure that the current alignment on mobile is correct either. Feel free to double-check.

[Bartvaderkin]

@Bartvaderkin Why do you keep changing the titles of my PRs? I use the imperative mood for a reason. See here:

https://git.kernel.org/pub/scm/git/git.git/tree/Documentation/SubmittingPatches?h=v2.36.1#n181

We're using capitalized Verbs in this project. Describe what you did, not the task: "Added this", "Updated that". Let's stick with the patterns and not mix and mess.