component nav

examples/components/side-nav.vue

 <style>
+  .side-nav {
+    width: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #eaeefa;
+
+    li {
+      list-style: none;
+    }
+    ul {
+      padding: 0;
+    }
+
+    .nav-item {
+      a {
+        font-size:18px;
+        color:#5e6d82;
+        line-height: 32px;
+        height: 32px;
+        margin: 10px 0;
+        padding: 0 0 0 10px;
+        text-decoration: none;
+        border-left: 2px solid transparent;
+        display: block;
+
+        &.active {
+          color: #20a0ff;
+          border-left-color: #20a0ff;
+        }
+      }
+      .nav-item {
+        a {
+          font-size: 14px;
+          padding-left: 20px;
+
+          &:hover {
+            background-color: #eee;
+          }
+        }
+      }
+    }
+    .nav-group__title {
+      color: #99a9bf;
+      padding-left: 15px;
+      line-height: 32px;
+    }
+  }
 </style>
 <template>
   <div class="side-nav">
     <ul>
-      <li v-for="item in data">
-        <a href="">{{item.name}}</a>
-        
+      <li class="nav-item" v-for="item in data">
+        <a>{{item.name}}</a>
+        <ul class="pure-menu-list sub-nav" v-if="item.children">
+          <li class="nav-item" v-for="navItem in item.children">
+            <router-link
+              class=""
+              active-class="active"
+              :to="'/component' + navItem.path"
+              exact
+              v-text="navItem.title || item.name">
+            </router-link>
+          </li>
+        </ul>
+        <template v-if="item.groups">
+          <div class="nav-group" v-for="group in item.groups">
+            <div class="nav-group__title">{{group.groupName}}</div>
+            <ul class="pure-menu-list">
+              <li
+                class="nav-item"
+                v-for="item in group.list"
+                v-if="!item.disabled">
+                <router-link
+                  active-class="active"
+                  :to="'/component' + item.path"
+                  exact
+                  v-text="item.title"></router-link>
+              </li>
+            </ul>
+          </div>
+        </template>
       </li>
     </ul>
-    <template v-for="(nav, key) in navs">
-      <a
-        href="#"
-        @click.prevent="navState.$set(key, !navState[key] || false)"
-        class="pure-menu-heading app__menu__label"
-        :class="{ 'unfold': !navState[key] }"
-        v-text="nav.group"></a>
-      <ul
-        class="pure-menu-list"
-        transition="slidedown"
-        v-show="!navState[key]"
-        :style="{
-          maxHeight: nav.list.length * 44 + 'px'
-        }">
-        <li
-          class="pure-menu-item app__menu__item"
-          v-for="item in nav.list"
-          v-if="!item.disabled">
-          <router-link
-            class="pure-menu-link app__menu__link"
-            active-class="active"
-            :to="'/component' + item.path"
-            exact
-            v-text="item.name"></router-link>
-        </li>
-      </ul>
-    </template>
   </div>
 </template>
 <script>

examples/pages/component.vue

+<style>
+  .el-col {
+    box-sizing: border-box;
+  }
+</style>
 <template>
   <div class="container">
-    <el-col :span="5">
-      <side-nav :data="navsData"></side-nav>
-    </el-col>
-    <el-col :span="19">
-      <div class="content">
-        <router-view></router-view>
-      </div>
-    </el-col>
+    <el-row :gutter="25">
+      <el-col :span="6">
+        <side-nav :data="navsData"></side-nav>
+      </el-col>
+      <el-col :span="18">
+        <div class="content">
+          <router-view></router-view>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
@@ -15,23 +22,8 @@
   export default {
     data() {
       return {
-        navsData: [{
-          name: '组件',
-          children: []
-        }, {
-          name: '安装指南',
-          children: [{
-            path: '/component/quickstart',
-            name: '快速上手'
-          }, {
-            path: '/component/dev',
-            name: '开发指南'
-          }]
-        }]
+        navsData: navs
       };
-    },
-    created() {
-      this.navsData[0].children = navs;
     }
-  }
+  };
 </script>

examples/route.config.js

@@ -6,21 +6,33 @@ const registerRoute = (config) => {
     component: require('./pages/component.vue'),
     children: []
   }];
-  config
-    .map(nav =>
-      nav.list.map(page => {
-        const component = require(`./docs${page.path}.md`);
+  function addRoute(page) {
+    const component = require(`./docs${page.path}.md`);
 
-        route[0].children.push({
-          path: page.path.slice(1),
-          meta: {
-            title: page.title || page.name,
-            description: page.description
-          },
-          component: component.default || component
+    route[0].children.push({
+      path: page.path.slice(1),
+      meta: {
+        title: page.title || page.name,
+        description: page.description
+      },
+      component: component.default || component
+    });
+  }
+  config
+    .map(nav => {
+      if (nav.groups) {
+        nav.groups.map(group => {
+          group.list.map(page => {
+            addRoute(page);
+          })
+        });
+      }
+      if (nav.children) {
+        nav.children.map(page => {
+          addRoute(page);
         });
-      })
-    );
+      }
+    });
 
   return { route, navs: config };
 };
@@ -48,12 +60,18 @@ let resourceRoute = {
   component: require('./pages/resource.vue')
 };
 
+let indexRoute = {
+  path: '/',
+  name: '首页',
+  component: require('./pages/index.vue')
+};
+
 let changeLogRoute = {
   path: '/changelog',
   component: require('./pages/changelog.vue')
 };
 
-route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
+route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]);
 
 route.route.push({
   path: '*',