Github link on demo site

README.md

@@ -26,7 +26,7 @@ See the [demo](https://jamdocs.netlify.com/), which is also the documentation, o
 1. Write the actual documentation for Jamdocs, in Jamdocs :)
 2. Build the homepage better, dividing stuff into components and so on.
 3. Implement Algolia search.
-4. Add a link to this repository from the demo.
+4. ~~Add a link to this repository from the demo.~~
 
 ## Credits
 - Creds to the [Netlify](https://www.netlify.com/) team for making an awesome all in one hosting soluiton for the JAM-stack.

src/components/GitLink.vue

@@ -0,0 +1,49 @@
+<template>
+  <a class="link" href="https://github.com/samuelhorn/jamdocs" title="Git-repository" aria-label="This documentation on git">
+    <github-icon class="icon" />
+    Jamdocs on Github
+  </a>
+</template>
+
+<script>
+import { GithubIcon } from 'vue-feather-icons'
+
+export default {
+  components: {
+    GithubIcon
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.link {
+  display: block;
+  padding: 6px 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 700;
+
+  &:focus {
+    outline: none;
+  }
+
+  .dark & {
+    color: $textBright;
+    background: $backgroundBright;
+  }
+
+  .bright & {
+    color: $textDark;
+    background: $backgroundDark;
+  }
+}
+
+svg {
+  width: 18px;
+  height: 18px;
+  vertical-align: -6px;
+  margin-right: 4px;
+}
+</style>
+

src/components/Sidebar.vue

@@ -16,6 +16,7 @@
             </ul>
           </li>
         </ul>
+        <GitLink class="git" />
       </nav>
     </aside>
 </template>
@@ -48,9 +49,13 @@ query Menu {
 </static-query>
 
 <script>
+import GitLink from '~/components/GitLink.vue'
 import throttle from 'lodash/throttle'
 
 export default {
+  components: {
+    GitLink
+  },
   watch: {
     '$route' () {
       this.$store.commit('closeSidebar')
@@ -110,6 +115,7 @@ export default {
   will-change: transform;
   transform: translateX(-300px);
   border-right: 1px solid transparent;
+  overflow: auto;
 
   @include respond-above(sm) {
     transform: translateX(0);
@@ -130,6 +136,13 @@ export default {
   }
 }
 
+nav {
+  position: relative;
+  min-height: 100%;
+  border: 1px solid transparent;
+  padding-bottom: 40px;
+}
+
 ul {
   list-style: none;
   padding: 0;
@@ -189,6 +202,12 @@ a {
     }
   }
 }
+
+.git {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 </style>