✨Feature: Re-generate aside content when visbility of anchor headings change #2686
Description
Is your feature request related to a problem? Please describe.
Imagine the use case:
There are some settings on the left side (just like vuejs.org's API style switch), but I want it to show/hide some h2 or h3, or say, those heading elements which will be in the aside.
By wrapping entire h2 or h3 parts by a <div> and using classes on the root element to control their visibility based on the value of settings. However, currently, the aside content won't update in this case.
If you don't want this to be part of the default theme, please inform me and close this issue, Thanks.
Describe the solution you'd like
I'm here to gather whether you want this to be a feature in the default theme, as I already implemented it by overriding internal files (that's a bit frustrating honestly) and it's working well for me, so I can raise the MR if you would like to accept this feature as part of the default theme.
My implementation in high-level:
- In those aside components (i.e.
VPDocAsideOutline.vue,VPDocOutlineDropdown.vueandVPLocalNav.vue - Using
IntersectionObserverto observe the visibility against root (<html>) - Once change is detected, regenerate the headers and cleanup + apply step 2 again.
Please feel free to advise if you have a better approach.
Describe alternatives you've considered
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the docs.
- Read the Contributing Guidelines.
- Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.