feat(sidebar): support click the part outside sidebar to close the si…

…debar. (#132)
vuejs · Apr 18, 2018 · c6c71af · c6c71af
1 parent fd447ae
commit c6c71af
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
@@ -4,6 +4,7 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
+    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
     <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar"/>
     <div class="custom-layout" v-if="$page.frontmatter.layout">
       <component :is="$page.frontmatter.layout"/>

diff --git a/lib/default-theme/styles/theme.styl b/lib/default-theme/styles/theme.styl
@@ -29,6 +29,15 @@ body
   box-sizing border-box
   border-bottom 1px solid $borderColor
 
+.sidebar-mask
+  position fixed
+  z-index 9
+  top 0
+  left 0
+  width 100vw
+  height 100vh
+  display none
+
 .sidebar
   font-size 15px
   background-color #fff
@@ -153,11 +162,16 @@ th, td
 .custom-layout
   padding-top $navbarHeight
 
-.theme-container.no-navbar
-  .content:not(.custom)
-    h1, h2, h3, h4, h5, h6
-      margin-top 1.5rem
-      padding-top 0
+.theme-container
+  &.sidebar-open
+    .sidebar-mask
+      display: block
+  &.no-navbar
+    .content:not(.custom)
+      h1, h2, h3, h4, h5, h6
+        margin-top 1.5rem
+        padding-top 0
+
 
 @media (min-width: ($MQMobile + 1px))
   .theme-container.no-sidebar