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-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'
-        }">
+        <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="pure-menu-item app__menu__item"
-          v-for="item in nav.list"
+                class="nav-item"
+                v-for="item in group.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>
+                  v-text="item.title"></router-link>
               </li>
             </ul>
+          </div>
         </template>
+      </li>
+    </ul>
   </div>
 </template>
 <script>

examples/nav.config.json

 [
   {
-    "group": "Basic",
+    "name": "基础组件",
+    "groups": [{
+      "groupName": "Basic",
       "list": [
         {
-        "path": "/button",
+          "path": "/layout",
           "name": "按钮 (button)",
-        "title": "Button 按钮",
-        "description": "常用的操作按钮"
+          "title": "Layout 布局",
+          "description": ""
         },
         {
           "path": "/icon",
@@ -14,10 +16,10 @@
           "title": "Icon 图标"
         },
         {
-        "path": "/tag",
-        "name": "标签 (tag)",
-        "title": "Tag 标签",
-        "description": "Tag 标签"
+          "path": "/button",
+          "name": "按钮 (button)",
+          "title": "Button 按钮",
+          "description": "常用的操作按钮"
         },
         {
           "path": "/dialog",
@@ -30,18 +32,6 @@
           "name": "弹框 (message-box)",
           "title": "message-box 弹框"
         },
-      {
-        "path": "/popover",
-        "name": "弹出框 (popover)",
-        "title": "popover 弹出框",
-        "description": "收纳具体内容和相关操作, 激活后弹出展现"
-      },
-      {
-        "path": "/tooltip",
-        "name": "文字提示 (tooltip)",
-        "title": "tooltip 文字提示",
-        "description": "优雅地展示文字提示信息"
-      },
         {
           "path": "/alert",
           "name": "警告 (alert)",
@@ -75,18 +65,13 @@
       ]
     },
     {
-    "group": "Form",
+      "groupName": "Form",
       "list": [
         {
-        "path": "/autocomplete",
-        "name": "自动完成 (autocomplete)",
-        "title": "Autocomplete 自动完成"
-      },
-      {
-        "path": "/select",
-        "name": "选择器 (select)",
-        "title": "Select 选择器",
-        "description": "当选项过多时, 使用下拉菜单展示并选择内容"
+          "path": "/radio",
+          "name": "单选框 (radio)",
+          "title": "Radio 单选框",
+          "description": "用于在多个备选项选中单个选项。"
         },
         {
           "path": "/checkbox",
@@ -94,12 +79,6 @@
           "title": "Checkbox 多选框",
           "description": "用于在多个可选项中进行多项选择。"
         },
-      {
-        "path": "/radio",
-        "name": "单选框 (radio)",
-        "title": "Radio 单选框",
-        "description": "用于在多个备选项选中单个选项。"
-      },
         {
           "path": "/input",
           "name": "输入框 (input)",
@@ -110,109 +89,110 @@
           "name": "计数器 (input-number)",
           "title": "Input Number 计数器"
         },
+        {
+          "path": "/select",
+          "name": "选择器 (select)",
+          "title": "Select 选择器",
+          "description": "当选项过多时, 使用下拉菜单展示并选择内容"
+        },
         {
           "path": "/switch",
           "name": "开关 (switch)",
           "title": "Switch 开关",
           "description": "用于两种对立状态的切换。"
         },
+        {
+          "path": "/slider",
+          "name": "滑块 (slider)",
+          "title": "Slider 滑块",
+          "description": "通过拖动滑块在一个固定区间内进行选择"
+        },
         {
           "path": "/time-picker",
           "name": "时间选择器（time-picker）",
-        "title": "时间选择器",
+          "title": "TimePicker 时间选择器",
           "description": "用于选择或输入时间"
         },
         {
           "path": "/date-picker",
           "name": "日期选择器（date-picker）",
-        "title": "日期选择器",
+          "title": "DatePicker",
           "description": "用于选择或输入时间"
         },
         {
           "path": "/datetime-picker",
           "name": "日期时间选择器",
-        "title": "日期时间选择器",
+          "title": "DatetimePicker",
           "description": "用于选择或输入日期时间"
         },
         {
           "path": "/upload",
           "name": "上传 (upload)",
-        "title": "upload 上传",
+          "title": "Upload 上传",
           "description": "文件上传组件"
         },
         {
           "path": "/form",
           "name": "表单 (form)",
-        "title": "form 表单",
+          "title": "Form 表单",
           "description": "一个多功能的并带有字段验证的表单组件"
         },
         {
-        "path": "/slider",
-        "name": "滑块 (slider)",
-        "title": "slider 滑块",
-        "description": "通过拖动滑块在一个固定区间内进行选择"
+          "path": "/autocomplete",
+          "name": "自动完成 (autocomplete)",
+          "title": "Autocomplete 自动完成"
         },
         {
           "path": "/rate",
           "name": "评分 (rate)",
-        "title": "评分组件"
+          "title": "Rate 评分组件"
         }
       ]
     },
     {
-    "group": "Nav",
+      "groupName": "Data",
       "list": [
         {
-        "path": "/tabs",
-        "name": "标签页 (tabs)",
-        "title": "tabs 标签页",
-        "description": "富展现的标签页"
-      },
-      {
-        "path": "/breadcrumb",
-        "name": "面包屑 (breadcrumb)",
-        "title": "breadcrumb 面包屑",
-        "description": ""
+          "path": "/table",
+          "name": "表格 (table)",
+          "title": "Table 表格",
+          "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
         },
         {
-        "path": "/dropdown",
-        "name": "下拉菜单 (dropdown)",
-        "title": "Dropdown 下拉菜单"
+          "path": "/tag",
+          "name": "标签 (tag)",
+          "title": "Tag 标签",
+          "description": "Tag 标签"
         },
         {
-        "path": "/steps",
-        "name": "步骤条 (steps)",
-        "title": "Steps 步骤",
-        "description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
-      }
-    ]
+          "path": "/tooltip",
+          "name": "文字提示 (tooltip)",
+          "title": "Tooltip 文字提示",
+          "description": "优雅地展示文字提示信息"
         },
         {
-    "group": "Data",
-    "list": [
-      {
-        "path": "/table",
-        "name": "表格 (table)",
-        "title": "Table 表格",
-        "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
+          "path": "/popover",
+          "name": "弹出框 (popover)",
+          "title": "Popover 弹出框",
+          "description": "收纳具体内容和相关操作, 激活后弹出展现"
         },
         {
           "path": "/progress",
           "name": "进度条 (progress)",
-        "title": "progress 进度条",
+          "title": "Progress 进度条",
           "description": ""
         },
+        {
+          "path": "/tree",
+          "name": "tree (tree)",
+          "title": "Tree 树形控件"
+        },
         {
           "path": "/pagination",
           "name": "分页 (pagination)",
           "title": "Pagination 分页",
           "description": "当数据量过多时, 使用分页分解数据"
         },
-      {
-        "path": "/tree",
-        "name": "tree (tree)",
-        "title": "tree"
-      },
         {
           "path": "/badge",
           "name": "标记 (badge)",
@@ -222,16 +202,42 @@
       ]
     },
     {
-    "group": "使用说明",
+      "groupName": "Nav",
       "list": [
         {
-        "path": "/quickstart",
-        "name": "快速上手"
+          "path": "/tabs",
+          "name": "标签页 (tabs)",
+          "title": "Tabs 标签页",
+          "description": "富展现的标签页"
         },
         {
-        "path": "/development",
-        "name": "开发指南"
+          "path": "/breadcrumb",
+          "name": "面包屑 (breadcrumb)",
+          "title": "Breadcrumb 面包屑",
+          "description": ""
+        },
+        {
+          "path": "/dropdown",
+          "name": "下拉菜单 (dropdown)",
+          "title": "Dropdown 下拉菜单"
+        },
+        {
+          "path": "/steps",
+          "name": "步骤条 (steps)",
+          "title": "Steps 步骤",
+          "description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
         }
       ]
+    }]
+  },
+  {
+    "name": "安装指南",
+    "children": [{
+      "path": "/quickstart",
+      "name": "快速上手"
+    }, {
+      "path": "/development",
+      "name": "开发指南"
+    }]
   }
 ]

examples/pages/component.vue

+<style>
+  .el-col {
+    box-sizing: border-box;
+  }
+</style>
 <template>
   <div class="container">
-    <el-col :span="5">
+    <el-row :gutter="25">
+      <el-col :span="6">
         <side-nav :data="navsData"></side-nav>
       </el-col>
-    <el-col :span="19">
+      <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,9 +6,7 @@ const registerRoute = (config) => {
     component: require('./pages/component.vue'),
     children: []
   }];
-  config
-    .map(nav =>
-      nav.list.map(page => {
+  function addRoute(page) {
     const component = require(`./docs${page.path}.md`);
 
     route[0].children.push({
@@ -19,8 +17,22 @@ const registerRoute = (config) => {
       },
       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: '*',