From 3daabdc480c0cc10a12a83a08a734f8719d092c5 Mon Sep 17 00:00:00 2001
From: WT <24277775+zam157@users.noreply.github.com>
Date: Thu, 13 Oct 2022 21:41:36 +0800
Subject: [PATCH] fix(theme): prevent body scrolling when sidebar has opened on
 small screens (#1391)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../theme-default/components/VPSidebar.vue      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index f4544c2288b..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 } 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>