feat: close the sidebar when clicking outside of the sidebar (#78)

vuejs · Sep 5, 2020 · e93ee09 · e93ee09
1 parent c437a47
commit e93ee09
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -59,6 +59,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);