Update for mobile devices etc (#15)

* Update the home button for external links

* Update for mobile devices

Author: RoderickQiu

Home.vue

@@ -43,13 +43,15 @@ export default {
     action() {
       return {
         text: this.data.actionText,
-        link: localizePath(this.data.actionLink, this.$localePath),
+        link:
+          this.data.actionLink.indexOf('http') == -1
+            ? localizePath(this.data.actionLink, this.$localePath)
+            : this.data.actionLink,
       }
     },
     footer() {
       const defaultFooter =
         'Open Source on [GitHub](https://github.com/sqrthree/vuepress-theme-api), Made by [@sqrthree](https://github.com/sqrthree), Power by [vuepress](https://github.com/vuejs/vuepress).'
-
       return md.render(this.data.footer || defaultFooter)
     },
   },
@@ -60,7 +62,6 @@ export default {
 @import './styles/_variables.styl'
 
 .home
-
   &__header
     margin: 10rem 0
     text-align: center
@@ -82,8 +83,10 @@ export default {
   &__content
     padding: 6rem 4rem
     border-top: 1px solid $divider-color
-
+  
   &__footer
-    margin: 2rem 0
+    margin-bottom: 3rem
+    margin-left: 4rem
+    margin-right: 4rem
     text-align: center
 </style>

Layout.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="theme__container" :class="pageClasses">
+    <div class="menu__container">
+      <a v-on:click="openMenu()" v-show="shouldShowSidebar">
+        <img src="./src/menu.png" v-show="shouldContentSeen" />
+        <img src="./src/close.png" v-show="shouldMenuOpen" />
+      </a>
+    </div>
     <div class="row" v-if="shouldShowSidebar">
-      <div class="col-md-2">
+      <div class="col-md-3 col-lg-2 sidebar__container" v-show="shouldMenuOpen">
         <Sidebar :items="sidebarItems">
           <slot name="sidebar-top" slot="top" />
           <slot name="sidebar-bottom" slot="bottom" />
         </Sidebar>
       </div>
-      <div class="col-md-10">
+      <div
+        class="col-md-9 col-lg-10 content__container"
+        v-show="shouldContentSeen"
+      >
         <div class="custom__layout" v-if="$page.frontmatter.layout">
           <component :is="$page.frontmatter.layout" />
         </div>
@@ -44,8 +53,23 @@ export default {
   data() {
     return {
       isSidebarOpen: true,
+      shouldMenuOpen: false,
+      shouldContentSeen: true,
     }
   },
+  methods: {
+    openMenu: function() {
+      this.shouldMenuOpen
+        ? (this.shouldMenuOpen = false)
+        : (this.shouldMenuOpen = true)
+      this.shouldContentSeen
+        ? (this.shouldContentSeen = false)
+        : (this.shouldContentSeen = true)
+      this.isSidebarOpen
+        ? (this.isSidebarOpen = false)
+        : (this.isSidebarOpen = true)
+    },
+  },
   computed: {
     sidebarItems() {
       return resolveSidebarItems(this.$page, this.$site, this.$localePath)
@@ -87,6 +111,13 @@ export default {
       nprogress.done()
     })
   },
+  watch: {
+    $route: function() {
+      this.isSidebarOpen = false
+      this.shouldMenuOpen = false
+      this.shouldContentSeen = true
+    },
+  },
   created() {
     if (this.$ssrContext) {
       this.$ssrContext.title = this.$title
@@ -99,3 +130,31 @@ export default {
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>
 <style src="./styles/theme.styl" lang="stylus"></style>
+<style lang="stylus">
+@import './styles/_variables.styl'
+
+@media screen and (max-width: $container-max-widths.md)
+  img
+    width: 100%
+    height: 100%
+
+  .menu__container
+    display: block
+    position: sticky
+    padding: 2rem 2rem 0
+    text-align: right
+
+    img
+      width: 30px
+
+@media screen and (min-width: $container-max-widths.md)
+  img
+    width: 50%
+    height: 50%
+
+  .menu__container
+    display: none
+
+  .content__container, .sidebar__container
+    display: block !important
+</style>

Page.vue

@@ -4,9 +4,9 @@
     <div class="content__footer-container">
       <div class="content__footer">
         <div v-if="editLink" class="edit-link">
-          <a :href="editLink" target="_blank" rel="noopener noreferrer">
-            {{ editLinkText }}
-          </a>
+          <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
+            editLinkText
+          }}</a>
           <svg
             viewBox="0 0 33 32"
             version="1.1"
@@ -186,109 +186,114 @@ export default {
 </script>
 
 <style lang="stylus">
-@import './styles/_variables.styl';
-
-.page__container {
-  min-height: 100vh;
-  padding: 4rem 6rem 0;
-
-  .curl__container {
-    text-align: center;
-  }
-}
-
-.content__footer {
-  display: flex;
-  justify-content: space-between;
-  padding: 2em 0;
-  font-size: 14px;
-  color: #999;
-
-  .edit-link {
-    a {
-      margin-right: 0.5em;
-      font-weight: 600;
-      color: #000;
-    }
-
-    svg {
-      vertical-align: middle;
-    }
-  }
-}
-
-.page--block-layout {
-  .content__footer-container {
-    margin: 0 -3rem;
-    background-color: #000;
-  }
-
-  .content__footer {
-    width: 50%;
-    padding: 0 3rem 2rem;
-    background-color: #fafafa;
-  }
-}
-
-.content-block {
-  margin: -4rem -6rem 4rem;
-  background-color: $black;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &:after {
-    height: 1px;
-    display: block;
-    content: '';
-    width: 100%;
-    background-image: linear-gradient(90deg, #eaeaea 50%, #333 50%);
-  }
-
-  &:last-child:after {
-    display: none;
-  }
-
-  &__heading {
-    width: 50%;
-    padding: 4rem 3rem 0;
-    overflow: auto;
-    background-color: #fafafa;
-  }
-
-  &__body {
-    display: flex;
-  }
-
-  &__cont, &__examples {
-    width: 50%;
-    padding: 0 3rem 2rem;
-  }
-
-  &__cont {
-    background-color: #fafafa;
-  }
-
-  &__examples {
-    color: $white;
-
-    .btn {
-      margin: 2em 0;
-    }
-
-    p {
-      font-size: 12px;
-    }
+@import './styles/_variables.styl'
+
+.page__container
+  min-height: 100vh
+  padding: 4rem 6rem 0
+
+  .curl__container
+    text-align: center
+
+  @media screen and (max-width: $container-max-widths.md)
+    padding: 2rem 2rem 0
+
+    .content-block__heading, .content-block__cont, .content-block
+      width: 100%
+      padding: 1rem 0 0 0
+      margin: 0
+      background-color: $white
+
+    .content-block__examples
+      padding: 0
+      margin: 0
+      width: 100%
+
+    .examples
+      width: 100%
+      padding: 1rem
+      background-color: $black
+      border-radius: 6px
+
+    .content-block__body
+      flex-direction: column
+
+    .content-block::after
+      background-image: none
+
+.content__footer
+  display: flex
+  justify-content: space-between
+  padding: 2em 0
+  font-size: 14px
+  color: #999
+
+  .edit-link
+    a
+      margin-right: 0.5em
+      font-weight: 600
+      color: #000
+
+    svg
+      vertical-align: middle
+
+.page--block-layout
+  .content__footer-container
+    margin: 0 -3rem
+    background-color: #000
+
+  .content__footer
+    width: 50%
+    padding: 0 3rem 2rem
+    background-color: #fafafa
+
+.content-block
+  margin: -4rem -6rem 4rem
+  background-color: $black
+
+  &:last-child
+    margin-bottom: 0
+
+  &:after
+    height: 1px
+    display: block
+    content: ''
+    width: 100%
+    background-image: linear-gradient(90deg, #eaeaea 50%, #333 50%)
+
+  &:last-child:after
+    display: none
+
+  &__heading
+    width: 50%
+    padding: 4rem 3rem 0
+    overflow: auto
+    background-color: #fafafa
+
+  &__body
+    display: flex
+    overflow-x: hidden
+
+  &__cont, &__examples
+    width: 50%
+    padding: 0 3rem 2rem
+
+  &__cont
+    background-color: #fafafa
+
+  &__examples
+    color: $white
+
+    .btn
+      margin: 2em 0
+
+    p
+      font-size: 12px
 
     // reset style
-    blockquote {
-      border-left-color: $white;
+    blockquote
+      border-left-color: $white
 
-      p {
-        color: #888;
-      }
-    }
-  }
-}
+      p
+        color: #888
 </style>

components/Sidebar/index.vue

@@ -150,6 +150,8 @@ export default {
   padding-top: 3rem
   overflow: auto
   background: $white
+  @media screen and (max-width: $container-max-widths.md)
+    position: relative
 
 .group
   margin-bottom: 4rem