doc: new demo layout

demo/demo.vue

@@ -1,22 +1,35 @@
 <template>
-  <div class="demo">
+  <n-app
+    class="demo"
+    namespace="naive-ui-doc"
+    :theme="theme"
+  >
     <n-nimbus-service-layout
       icon="md-contacts"
       :name="`NAIVE UI (${version})`"
       :padding-body="true"
       :items="items"
     >
+      <template v-slot:header>
+        <doc-header />
+      </template>
       <router-view />
     </n-nimbus-service-layout>
-  </div>
+  </n-app>
 </template>
 
 <script>
 import { version } from '../package.json'
+import DocHeader from './header.vue'
+
 export default {
+  components: {
+    DocHeader
+  },
   data () {
     return {
       version,
+      theme: 'default',
       items: [
         {
           name: 'Start',

demo/header.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="nav">
+    <div class="ui-logo">
+      NAIVE UI
+    </div>
+    <div />
+    <div class="theme-picker">
+      <n-select
+        v-model="theme"
+        size="small"
+        :options="options"
+        @change="handleThemeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import withapp from '../packages/mixins/withapp'
+
+export default {
+  mixins: [withapp],
+  data () {
+    return {
+      theme: 'default',
+      options: [
+        {
+          label: 'dark',
+          value: 'default'
+        },
+        {
+          label: 'light',
+          value: 'light'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleThemeChange (theme) {
+      this.NApp.$parent.theme = theme
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nav {
+  display: grid;
+  grid-template-columns: 272px 1fr 160px;
+  grid-template-rows: 64px;
+  align-items: center;
+}
+.ui-logo {
+  padding-left: 48px;
+}
+.theme-picker {
+  padding-right: 48px;
+}
+</style>

demo/init.js

@@ -2,6 +2,7 @@ import Vue from 'vue/dist/vue'
 import VueRouter from 'vue-router'
 import '../styles/index.scss'
 import 'codemirror/lib/codemirror.css'
+import 'highlight.js/styles/github.css'
 import NaiveUI from '../index'
 import SourceBlock from './SourceBlock'
 
@@ -60,6 +61,8 @@ import sliderDemo from './components/sliderDemo'
 import treeDemo from './components/treeDemo'
 
 import demo from './demo'
+import DemoSection from './DemoSection'
+import './CodeBox.scss'
 
 import popoverDebug from './debugComponents/popoverDebug'
 import routerDebug from './debugComponents/routerDebug'
@@ -74,6 +77,7 @@ Vue.use(NaiveUI)
 Vue.use(VueRouter)
 
 Vue.component(SourceBlock.name, SourceBlock)
+Vue.component('DemoSection', DemoSection)
 
 const routes = [
   {