Fixed docs position and height

Author: hastom

docs/app/template/MainNav.vue

@@ -7,7 +7,7 @@
       </md-content>
     </transition>
 
-    <vue-toc target=".page-container" class="toc" :key="$route.fullPath" v-if="!isSplash"/>
+    <vue-toc target=".page-container" class="toc" :key="$route.fullPath" v-if="!isSplash" />
 
     <md-drawer md-fixed :md-active.sync="isMenuVisible" @md-closed="hideMenu">
       <md-toolbar class="md-transparent" md-elevation="0">
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-  import { mapState, mapMutations } from 'vuex'
+  import { mapMutations, mapState } from 'vuex'
   import * as types from 'store/mutation-types'
   import MainNavContent from './MainNavContent'
 
@@ -56,7 +56,7 @@
         this.hideMenu()
         next()
       })
-    }
+    },
   }
 </script>
 
@@ -129,36 +129,46 @@
     border-top: 1px solid rgba(#000, .12);
   }
 
-  @media(min-width:981px){
-    .toc{
+  @media(min-width: 981px) {
+    .toc {
       display: block;
     }
   }
 
-  @media(max-width:980px){
-    .toc{
+  @media(max-width: 980px) {
+    .toc {
       display: none;
     }
   }
 
-  .toc{
-    top: 10%;
+  .toc {
     position: fixed;
     right: 10px;
-    z-index: 999;
+    z-index: 2;
     border-left: 1px solid #e0e0e0;
     padding-right: 15px;
-    max-width: 250px;
+    width: 250px;
+    height: 100%;
+    padding-top: 16px;
+
+    &:empty {
+      display: none;
+    }
+
     >>> ul {
       list-style: none;
       padding-left: 20px;
       margin: 5px 0;
-      li a{
+
+      li {
+        padding: 4px 0;
+      }
+
+      li a {
         color: #7d7d7d;
       }
     }
   }
 
 
-
 </style>