docsifyjs · QingWei-Li · Nov 29, 2016 · Nov 29, 2016 · Nov 29, 2016 · Nov 29, 2016
diff --git a/404.dev.html b/404.dev.html
@@ -3,14 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <link rel="stylesheet" href="/themes/vue.css">
+  <link rel="stylesheet" href="/themes/buble.css">
 </head>
 <body>
-  <nav>
-    <a href="/">En</a>
-    <a href="/zh-cn">中文</a>
-  </nav>
   <div id="app"></div>
 </body>
-<script src="/lib/docsify.js" data-repo="qingwei-li/docsify"></script>
+<script src="/lib/docsify.js" data-repo="https://qingwei-li/docsify" data-sidebar-toggle></script>
 </html>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 0.6.0
+### Features
+- Navbar support dropdown list, #6
+- Sidebar with toggle
+
+### Bug fixes
+- Fix ineffective option, fixed #10
+
 ## 0.5.0
 ### Features
 - Custom sidebars and navbars by markdown file

diff --git a/docs/404.html b/docs/404.html
@@ -14,5 +14,9 @@
   </nav>
   <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify/lib/docsify.min.js" data-repo="qingwei-li/docsify" data-max-level="3"></script>
+<script
+  src="//unpkg.com/docsify/lib/docsify.min.js"
+  data-repo="qingwei-li/docsify"
+  data-max-level="3"
+  data-sidebar-toggle></script>
 </html>
diff --git a/docs/README.md b/docs/README.md
@@ -121,6 +121,14 @@ Root element.
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
+#### sidebar-toggle
+
+Sidebar with toggle
+
+```html
+<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
+```
+
 #### sidebar
 
 Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.
@@ -196,6 +204,15 @@ The contents of the file can be:
 - [chinese](/zh-cn)
 ```
 
+If you write a sub level list, it will generate a dropdown list.
+
+```markdown
+- [download](/download)
+- language
+  - [en](/)
+  - [chinese](/zh-cn)
+```
+
 ## FAQ
 
 ### Why use `404.html` instead of `index.html`

diff --git a/docs/zh-cn.md b/docs/zh-cn.md
@@ -119,6 +119,14 @@ docsify serve docs
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
+#### sidebar-toggle
+
+Sidebar 开关按钮
+
+```html
+<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
+```
+
 #### sidebar
 
 设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
@@ -193,6 +201,15 @@ docsify serve docs
 - [中文](/zh-cn)
 ```
 
+当然也支持二级列表，将生成一个下拉列表
+```markdown
+- [download](/download)
+- language
+  - [en](/)
+  - [中文](/zh-cn)
+```
+
+
 ## FAQ
 
 ### 为什么是 `404.html` 而不用 `index.html`

diff --git a/src/event.js b/src/event.js
@@ -70,3 +70,14 @@ export function activeLink (dom, activeParent) {
     }
   })
 }
+
+/**
+ * sidebar toggle
+ */
+export function bindToggle (dom) {
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom)
+  if (!dom) return
+  const main = document.querySelector('main')
+
+  dom.addEventListener('click', () => main.classList.toggle('close'))
+}
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ const OPTIONS = {
   repo: '',
   maxLevel: 6,
   sidebar: '',
+  sidebarToggle: false,
   loadSidebar: null,
   loadNavbar: null
 }
@@ -15,7 +16,7 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
 if (script) {
   for (const prop in OPTIONS) {
     const val = script.getAttribute('data-' + camel2kebab(prop))
-    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
+    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
   }
   if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
   if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
@@ -34,7 +35,8 @@ const Docsify = function () {
 
   // Render markdown file
   load(`${loc}.md`)
-    .then(render.renderArticle, _ => render.renderArticle())
+    .then(content => render.renderArticle(content, OPTIONS),
+      _ => render.renderArticle(null, OPTIONS))
 
   // Render sidebar
   if (OPTIONS.loadSidebar) {

diff --git a/src/render.js b/src/render.js
@@ -1,7 +1,7 @@
 import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
-import { activeLink, scrollActiveSidebar } from './event'
+import { activeLink, scrollActiveSidebar, bindToggle } from './event'
 import { genTree } from './util'
 
 const renderTo = function (dom, content) {
@@ -38,17 +38,20 @@ marked.setOptions({ renderer })
 export function renderApp (dom, replace, opts) {
   const nav = document.querySelector('nav') || document.createElement('nav')
 
-  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
+  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(opts.sidebarToggle) + tpl.corner(opts.repo) + tpl.main()
   document.body.insertBefore(nav, document.body.children[0])
+
+  // bind toggle
+  bindToggle('button.sidebar-toggle')
 }
 
 /**
  * article
  */
-export function renderArticle (content = 'not found') {
+export function renderArticle (content = 'not found', OPTIONS) {
   renderTo('article', marked(content))
-  if (!renderSidebar.rendered) renderSidebar(null)
-  if (!renderNavbar.rendered) renderNavbar(null)
+  if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
+  if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
 }
 
 /**

diff --git a/src/tpl.js b/src/tpl.js
@@ -7,6 +7,7 @@
 export function corner (data) {
   if (!data) return ''
   if (!/\/\//.test(data)) data = 'https://github.com/' + data
+  data = data.replace(/^git\+/, '')
 
   return `
   <a href="${data}" class="github-corner" aria-label="View source on Github">
@@ -31,6 +32,13 @@ export function main () {
   </main>`
 }
 
+export function toggle (bool) {
+  if (!bool) return ''
+  return `<button class="sidebar-toggle">
+    <span></span><span></span><span></span>
+  </button>`
+}
+
 /**
  * Render tree
  * @param  {Array} tree

diff --git a/themes/buble.css b/themes/buble.css
@@ -21,6 +21,51 @@ nav {
   text-align: right;
 }
 
+nav ul, nav li {
+  list-style: none;
+  display: inline-block;
+}
+
+/* navbar dropdown */
+nav li {
+  position: relative;
+}
+
+nav li ul {
+  padding: 0;
+  max-height: 0;
+  position: absolute;
+  top: 24px;
+  background-color: rgba(255, 255, 255, .6);
+  border: 1px solid #0074D9;
+  right: 0;
+  overflow: hidden;
+  opacity: 0;
+  overflow-y: auto;
+  transition: opacity .3s ease, max-height .5s ease;
+}
+
+nav li:hover ul {
+  opacity: 1;
+  max-height: 100px;
+}
+
+nav li ul li {
+  display: block;
+}
+
+nav li ul a {
+  display: block;
+  font-size: 14px;
+  margin: 0;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+nav li ul a.active {
+  border-bottom: 0;
+}
+
 nav a {
   margin: 0 1em;
   padding: 5px 0;
@@ -108,6 +153,8 @@ main {
   width: 16em;
   z-index: 1;
   padding-top: 40px;
+  left: 0;
+  transition: left 250ms ease-out;
 }
 
 .sidebar ul {
@@ -138,6 +185,32 @@ main {
   color: #333;
 }
 
+/* sidebar toggle */
+.sidebar-toggle {
+  background-color: transparent;
+  border: 0;
+  bottom: 10px;
+  left: 10px;
+  position: absolute;
+  text-align: center;
+  transition: opacity .3s;
+  width: 30px;
+  z-index: 10;
+  outline: none;
+}
+
+.sidebar-toggle:hover {
+  opacity: .4;
+}
+
+.sidebar-toggle span {
+  background-color: #0074D9;
+  display: block;
+  height: 2px;
+  margin-bottom: 4px;
+  width: 16px;
+}
+
 /* main content */
 .content {
   bottom: 0;
@@ -148,15 +221,43 @@ main {
   top: 0;
   overflow-x: hidden;
   padding-top: 20px;
+  transition: left 250ms ease;
+}
+
+main.close .sidebar {
+  left: -16em;
+}
+
+main.close .content {
+  left: 0;
 }
 
 @media screen and (max-width: 600px) {
+  nav {
+    margin-top: 16px;
+  }
+
+  nav li ul {
+    top: 30px;
+  }
+
   .sidebar {
     left: -16em;
+    transition: left 250ms ease;
   }
 
   .content {
     left: 0;
+    min-width: 100vw;
+    transition: left 250ms ease-out;
+  }
+
+  main.close .sidebar {
+    left: 0;
+  }
+
+  main.close .content {
+    left: 16em;
   }
 }