Skip to content
Permalink
Browse files
fix(theme): prevent body scrolling when sidebar has opened on small s…
…creens (#1391)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
  • Loading branch information
zam157 and brc-dd committed Oct 13, 2022
1 parent 55688a8 commit 3daabdc480c0cc10a12a83a08a734f8719d092c5
Showing 1 changed file with 14 additions and 3 deletions.
@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { ref, watchPostEffect, nextTick } from 'vue'
import { ref, watchPostEffect } from 'vue'
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
import { useSidebar } from '../composables/sidebar.js'
import VPSidebarGroup from './VPSidebarGroup.vue'
@@ -10,12 +11,22 @@ const props = defineProps<{
}>()
// a11y: focus Nav element when menu has opened
let navEl = ref<(Element & { focus(): void }) | null>(null)
let navEl = ref<HTMLElement | null>(null)
function lockBodyScroll() {
disableBodyScroll(navEl.value!, { reserveScrollBarGap: true })
}
function unlockBodyScroll() {
clearAllBodyScrollLocks()
}
watchPostEffect(async () => {
if (props.open) {
await nextTick()
lockBodyScroll()
navEl.value?.focus()
} else {
unlockBodyScroll()
}
})
</script>

0 comments on commit 3daabdc

Please sign in to comment.