diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 4234a5f19d14..3278e3099e49 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -7,6 +7,7 @@
     <aside :class="{ open }">
       <SideBar/>
     </aside>
+    <div class="sidebar-mask" :class="{ 'sidebar-open': open }" @click="toggleSidebar(false)" />
     <main>
       <Page />
     </main>
@@ -31,12 +32,12 @@ export default {
   },
   setup() {
     let open = ref(false)
-    const toggleSidebar = () => {
-      open.value = !open.value
+    const toggleSidebar = (to) => {
+      open.value = typeof to === 'boolean' ? to : !open.value
     }
     return {
       open,
-      toggleSidebar
+      toggleSidebar,
     }
   }
 }
diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
index d440bf040af2..c2a5cbc7bf99 100644
--- a/src/client/theme-default/styles/layout.css
+++ b/src/client/theme-default/styles/layout.css
@@ -56,6 +56,17 @@ aside {
   }
 }
 
+.sidebar-mask {
+  z-index: 2;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: none;
+}
+.sidebar-mask.sidebar-open{
+  display: block;
+}
+
 main {
   margin-top: var(--header-height);
   margin-left: var(--sidebar-width);