From 46d195a833cb92a85c0b9ffa9c75d07c5e21898c Mon Sep 17 00:00:00 2001
From: WT <24277775+zam157@users.noreply.github.com>
Date: Sat, 24 Sep 2022 10:31:11 +0800
Subject: [PATCH 1/2] fix(theme): prevent body scrolling when sidebar has
 opened on small screens

---
 src/client/theme-default/components/VPSidebar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index f4544c2288b..3a2f7c76d91 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watchPostEffect, nextTick } from 'vue'
+import { ref, watchPostEffect, nextTick, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar.js'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 
@@ -9,6 +9,11 @@ const props = defineProps<{
   open: boolean
 }>()
 
+// prevent body scrolling when sidebar has opened
+watch(() => props.open, (newVal) => {
+  document.body.style.overflow = newVal ? 'hidden' : ''
+})
+
 // a11y: focus Nav element when menu has opened
 let navEl = ref<(Element & { focus(): void }) | null>(null)
 

From 2c7e639302e308fc65602a11d1b28b16016c0a2e Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 13 Oct 2022 19:07:55 +0530
Subject: [PATCH 2/2] use body-scroll-lock instead of manually setting overflow
 hidden

---
 .../theme-default/components/VPSidebar.vue    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 3a2f7c76d91..f4b3f67d0c1 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ref, watchPostEffect, nextTick, watch } 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'
 
@@ -9,18 +10,23 @@ const props = defineProps<{
   open: boolean
 }>()
 
-// prevent body scrolling when sidebar has opened
-watch(() => props.open, (newVal) => {
-  document.body.style.overflow = newVal ? 'hidden' : ''
-})
-
 // 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>