feat: content tabs

client/themes/default/components/page.vue

@@ -249,11 +249,16 @@
 
 <script>
 import { StatusIndicator } from 'vue-status-indicator'
+import Tabset from './tabset.vue'
+import NavSidebar from './nav-sidebar.vue'
 import Prism from 'prismjs'
 import mermaid from 'mermaid'
 import { get } from 'vuex-pathify'
 import _ from 'lodash'
 import ClipboardJS from 'clipboard'
+import Vue from 'vue'
+
+Vue.component('tabset', Tabset)
 
 Prism.plugins.autoloader.languages_path = '/js/prism/'
 Prism.plugins.NormalizeWhitespace.setDefaults({
@@ -292,6 +297,7 @@ Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
 
 export default {
   components: {
+    NavSidebar,
     StatusIndicator
   },
   props: {

client/themes/default/components/tabset.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+  .tabset.elevation-2
+    ul.tabset-tabs(ref='tabs')
+      slot(name='tabs')
+    .tabset-content(ref='content')
+      slot(name='content')
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTab: 0
+    }
+  },
+  watch: {
+    currentTab (newValue, oldValue) {
+      this.setActiveTab()
+    }
+  },
+  methods: {
+    setActiveTab () {
+      this.$refs.tabs.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'is-active'
+        } else {
+          node.className = ''
+        }
+      })
+      this.$refs.content.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'tabset-panel is-active'
+        } else {
+          node.className = 'tabset-panel'
+        }
+      })
+    }
+  },
+  mounted () {
+    this.setActiveTab()
+    this.$refs.tabs.childNodes.forEach((node, idx) => {
+      node.addEventListener('click', ev => {
+        this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.tabset {
+  border-radius: 5px;
+  margin-top: 10px;
+
+  @at-root .theme--dark & {
+    background-color: #292929;
+  }
+
+  > .tabset-tabs {
+    padding-left: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    background: linear-gradient(to bottom, #FFF, #FAFAFA);
+    box-shadow: inset 0 -1px 0 0 #DDD;
+    border-radius: 5px 5px 0 0;
+    overflow: hidden;
+
+    @at-root .theme--dark & {
+      background: linear-gradient(to bottom, #424242, #333);
+      box-shadow: inset 0 -1px 0 0 #555;
+    }
+
+    > li {
+      display: block;
+      padding: 16px;
+      margin-top: 0;
+      cursor: pointer;
+      transition: color 1s ease;
+      border-right: 1px solid #FFF;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 1px;
+      user-select: none;
+
+      @at-root .theme--dark & {
+        border-right-color: #555;
+      }
+
+      &.is-active {
+        background-color: #FFF;
+        margin-bottom: 0;
+        padding-bottom: 17px;
+        color: mc('blue', '700');
+
+        @at-root .theme--dark & {
+          background-color: #292929;
+          color: mc('blue', '300');
+        }
+      }
+
+      &:last-child {
+        border-right: none;
+
+        &.is-active {
+          border-right: 1px solid #EEE;
+
+          @at-root .theme--dark & {
+            border-right-color: #555;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: rgba(#CCC, .1);
+
+        @at-root .theme--dark & {
+          background-color: rgba(#222, .25);
+        }
+
+        &.is-active {
+          background-color: #FFF;
+
+          @at-root .theme--dark & {
+            background-color: #292929;
+          }
+        }
+      }
+
+      & + li {
+        border-left: 1px solid #EEE;
+
+        @at-root .theme--dark & {
+          border-left-color: #222;
+        }
+      }
+    }
+  }
+
+  > .tabset-content {
+    .tabset-panel {
+      padding: 2px 16px 16px;
+      display: none;
+
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+}
+</style>