feat: scroll active sidebar link into view on page load #3654
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
brenoepics
suggested changes
May 18, 2024
|
|
||
| // scroll active link into view | ||
| onMounted(() => { | ||
| nextTick(() => navEl.value?.querySelector('.is-active')?.scrollIntoView({ block: 'center'})) |
There was a problem hiding this comment.
And if the same route or pattern is placed 2+ times in the sidebar, is it working fine? also I'd calculate to scroll only when it is out of the viewport
| @@ -197,6 +197,7 @@ export function useActiveAnchor( | |||
|
|
|||
| if (activeLink) { | |||
| activeLink.classList.add('active') | |||
| activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' }) | |||
There was a problem hiding this comment.
PR preview
Fixed
we also need to fix some edge cases like scroll to 0 when there is no active link, I'd also scroll only when it is out of viewport
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I find myself searching in the sidebar in the VueUse docs for related composables, the current page link is often out of view in the sidebar.
Not too happy with my solution in
VPSidebar.vue, I guess this won't scroll the relevant link into view when navigating using in page links, also not sure ifquerySelectoris the appropriate way to find the relevant link. Should a router hook be used instead?I can add tests to confirm the changes work as expected, let me know if changes should be made!