diff --git a/src/components/highlightCode/index.vue b/src/auxiliary/highlightCode/index.vue
similarity index 100%
rename from src/components/highlightCode/index.vue
rename to src/auxiliary/highlightCode/index.vue
diff --git a/src/auxiliary/index.js b/src/auxiliary/index.js
new file mode 100644
index 0000000..37d823b
--- /dev/null
+++ b/src/auxiliary/index.js
@@ -0,0 +1,8 @@
+import highlightCode from './highlightCode'
+
+import sideNav from './sideNav'
+
+export default function (Vue) {
+  Vue.component('highlightCode', highlightCode)
+  Vue.component('sideNav', sideNav)
+}
diff --git a/src/auxiliary/sideNav/index.vue b/src/auxiliary/sideNav/index.vue
new file mode 100644
index 0000000..9e24f6c
--- /dev/null
+++ b/src/auxiliary/sideNav/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="side-nav">
+    <div class="item" v-for="navItem in nav" :key="navItem.title">
+      <a :href="`#${navItem.target}`">{{ navItem.title }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SideNav',
+  props: ['nav']
+}
+</script>
+
+<style lang="less">
+.side-nav {
+  position: fixed;
+  width: 150px;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  .item {
+    font-weight: bold;
+    color: #fff;
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+
+    a {
+      color: #fff;
+
+      &:hover,
+      &:active,
+      &:visited {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index d5f335a..0a4c1c6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -22,10 +22,9 @@ import radarChart from './radarChart/index.vue'
 
 import numberShow from './numberShow/index.vue'
 import percentPond from './percentPond/index.vue'
+import waterLevelPond from './waterLevelPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
-import highlightCode from './highlightCode'
-
 export default function (Vue) {
   Vue.component('borderBox1', borderBox1)
   Vue.component('borderBox2', borderBox2)
@@ -51,7 +50,6 @@ export default function (Vue) {
 
   Vue.component('numberShow', numberShow)
   Vue.component('percentPond', percentPond)
+  Vue.component('waterLevelPond', waterLevelPond)
   Vue.component('scrollBoard', scrollBoard)
-
-  Vue.component('highlightCode', highlightCode)
 }
diff --git a/src/main.js b/src/main.js
index 08895ca..1d2d805 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,10 +6,14 @@ import './assets/style/index.less'
 
 import plugins from './plugins/index'
 
+import auxiliary from './auxiliary/index'
+
 import components from './components/index'
 
 Vue.use(plugins)
 
+Vue.use(auxiliary)
+
 Vue.use(components)
 
 Vue.config.productionTip = false