-> v3.6.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+
+# 3.6.1 / 2017-04-09
+
+  * feat(event): Collapse the sidebar when click outside element in the small screen
+
+# 3.6.0 / 2017-04-09
+
+  * feat(render): add mergeNavbar option, close ([#125](https://github.com/QingWei-Li/docsify/issues/125)
+
 # 3.5.2/ 2017-04-05
 
   * add optional current route param to toURL and use it to properly compose local anchor links

dev.html

@@ -29,7 +29,8 @@
     loadNavbar: true,
     loadSidebar: true,
     name: 'docsify',
-    subMaxLevel: 2
+    subMaxLevel: 2,
+    mergeNavbar: true
   }
 </script>
 <script src="/lib/docsify.js"></script>

docs/_coverpage.md

@@ -1,6 +1,6 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>3.5</small>
+# docsify <small>3.6</small>
 
 > A magical documentation site generator.
 

docs/_navbar.md

@@ -1,4 +1,4 @@
-- :uk:
- - [:cn: 中文](/zh-cn/)
- - [:de: Deutsch](/de-de/)
- - [:uk: English](/)
+- Translations
+  - [:cn: 中文](/zh-cn/)
+  - [:de: Deutsch](/de-de/)
+  - [:uk: English](/)

docs/configuration.md

@@ -305,3 +305,13 @@ window.$docsify = {
   noEmoji: true
 }
 ```
+
+## merge-navbar
+
+Navbar will be merged with the sidebar on smaller screens.
+
+```js
+window.$docsify = {
+  mergeNavbar: true
+}
+```

docs/de-de/_navbar.md

@@ -1,4 +0,0 @@
-- :de:
- - [:cn: 中文](/zh-cn/)
- - [:de: Deutsch](/de-de/)
- - [:uk: English](/)

docs/de-de/configuration.md

@@ -305,3 +305,13 @@ window.$docsify = {
   noEmoji: true
 }
 ```
+
+## merge-navbar
+
+Navbar will be merged with the sidebar on smaller screens.
+
+```js
+window.$docsify = {
+  mergeNavbar: true
+}
+```

docs/index.html

@@ -32,6 +32,7 @@
     executeScript: true,
     loadSidebar: true,
     loadNavbar: true,
+    mergeNavbar: true,
     maxLevel: 4,
     name: 'docsify',
     search: {

docs/zh-cn/_navbar.md

@@ -1,4 +0,0 @@
-- :cn:
- - [:cn: 中文](/zh-cn/)
- - [:de: Deutsch](/de-de/)
- - [:uk: English](/)

docs/zh-cn/configuration.md

@@ -315,3 +315,14 @@ window.$docsify = {
   noEmoji: true
 }
 ```
+
+## merge-navbar
+
+小屏设备下合并导航栏到侧边栏。
+
+```js
+window.$docsify = {
+  mergeNavbar: true
+}
+```
+

lib/docsify.js

@@ -76,7 +76,8 @@ var config = merge({
   autoHeader: false,
   executeScript: null,
   noEmoji: false,
-  ga: ''
+  ga: '',
+  mergeNavbar: false
 }, window.$docsify);
 
 var script = document.currentScript ||
@@ -415,17 +416,20 @@ var title = $.title;
  * Toggle button
  */
 function btn (el) {
-  var toggle = function () { return body.classList.toggle('close'); };
+  var toggle = function (_) { return body.classList.toggle('close'); };
 
   el = getNode(el);
-  on(el, 'click', toggle);
+  on(el, 'click', function (e) {
+    e.stopPropagation();
+    toggle();
+  });
 
   var sidebar = getNode('.sidebar');
 
-  on(sidebar, 'click', function () {
-    isMobile && toggle();
-    setTimeout(function () { return getAndActive(sidebar, true, true); }, 0);
-  });
+  isMobile && on(body, 'click', function (_) { return body.classList.contains('close') && toggle(); }
+  );
+  on(sidebar, 'click', function (_) { return setTimeout((function (_) { return getAndActive(sidebar, true, true); }, 0)); }
+  );
 }
 
 function sticky () {
@@ -3263,12 +3267,8 @@ function initRender (vm) {
 
   var el = find(id);
   var html = '';
+  var navAppendToTarget = body;
 
-  navEl.classList.add('app-nav');
-
-  if (!config.repo) {
-    navEl.classList.add('no-badge');
-  }
   if (!el) {
     el = create(id);
     appendTo(body, el);
@@ -3283,8 +3283,19 @@ function initRender (vm) {
   html += main(config);
   // Render main app
   vm._renderTo(el, html, true);
+
+  if (config.mergeNavbar && isMobile) {
+    navAppendToTarget = find('.sidebar');
+  } else {
+    navEl.classList.add('app-nav');
+
+    if (!config.repo) {
+      navEl.classList.add('no-badge');
+    }
+  }
+
   // Add nav
-  before(body, navEl);
+  before(navAppendToTarget, navEl);
 
   if (config.themeColor) {
     $.head.innerHTML += theme(config.themeColor);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "3.5.2",
+  "version": "3.6.1",
   "description": "A magical documentation generator.",
   "author": {
     "name": "qingwei-li",

src/core/config.js

@@ -17,7 +17,8 @@ const config = merge({
   autoHeader: false,
   executeScript: null,
   noEmoji: false,
-  ga: ''
+  ga: '',
+  mergeNavbar: false
 }, window.$docsify)
 
 const script = document.currentScript ||

src/core/event/sidebar.js

@@ -7,17 +7,22 @@ const title = dom.$.title
  * Toggle button
  */
 export function btn (el) {
-  const toggle = () => dom.body.classList.toggle('close')
+  const toggle = _ => dom.body.classList.toggle('close')
 
   el = dom.getNode(el)
-  dom.on(el, 'click', toggle)
+  dom.on(el, 'click', e => {
+    e.stopPropagation()
+    toggle()
+  })
 
   const sidebar = dom.getNode('.sidebar')
 
-  dom.on(sidebar, 'click', () => {
-    isMobile && toggle()
-    setTimeout(() => getAndActive(sidebar, true, true), 0)
-  })
+  isMobile && dom.on(dom.body, 'click', _ =>
+    dom.body.classList.contains('close') && toggle()
+  )
+  dom.on(sidebar, 'click', _ =>
+    setTimeout((_ => getAndActive(sidebar, true, true), 0))
+  )
 }
 
 export function sticky () {

src/core/render/index.js

@@ -7,6 +7,7 @@ import { markdown, sidebar, subSidebar, cover } from './compiler'
 import { callHook } from '../init/lifecycle'
 import { getBasePath, getPath, isAbsolutePath } from '../route/util'
 import { isPrimitive } from '../util/core'
+import { isMobile } from '../util/env'
 
 function executeScript () {
   const script = dom.findAll('.markdown-section>script')
@@ -153,12 +154,8 @@ export function initRender (vm) {
 
   let el = dom.find(id)
   let html = ''
+  let navAppendToTarget = dom.body
 
-  navEl.classList.add('app-nav')
-
-  if (!config.repo) {
-    navEl.classList.add('no-badge')
-  }
   if (!el) {
     el = dom.create(id)
     dom.appendTo(dom.body, el)
@@ -173,8 +170,19 @@ export function initRender (vm) {
   html += tpl.main(config)
   // Render main app
   vm._renderTo(el, html, true)
+
+  if (config.mergeNavbar && isMobile) {
+    navAppendToTarget = dom.find('.sidebar')
+  } else {
+    navEl.classList.add('app-nav')
+
+    if (!config.repo) {
+      navEl.classList.add('no-badge')
+    }
+  }
+
   // Add nav
-  dom.before(dom.body, navEl)
+  dom.before(navAppendToTarget, navEl)
 
   if (config.themeColor) {
     dom.$.head.innerHTML += tpl.theme(config.themeColor)

src/themes/basic/_layout.css

@@ -10,7 +10,7 @@
 body:not(.ready) {
   overflow: hidden;
 
-  [data-cloak], nav {
+  [data-cloak], .app-nav {
     display: none;
   }
 }
@@ -83,7 +83,7 @@ kbd {
 }
 
 /* navbar */
-nav.app-nav {
+.app-nav {
   left: 0;
   margin: 25px 60px 0 0;
   position: absolute;
@@ -238,6 +238,11 @@ main {
       color: inherit;
       text-decoration: none;
     }
+
+    .app-nav {
+      display: block;
+      position: static;
+    }
   }
 
   ul {
@@ -325,7 +330,7 @@ body.sticky {
 .markdown-section {
   margin: 0 auto;
   max-width: 800px;
-  padding: 20px 15px 40px 15px;
+  padding: 30px 15px 40px 15px;
   position: relative;
 
   > * {
@@ -430,7 +435,7 @@ body.close {
     display: none;
   }
 
-  nav {
+  .app-nav {
     display: none;
   }
 }
@@ -440,11 +445,11 @@ body.close {
     position: fixed;
   }
 
-  nav {
+  .app-nav {
     margin-top: 16px;
   }
 
-  nav li ul {
+  .app-nav li ul {
     top: 30px;
   }
 
@@ -465,7 +470,7 @@ body.close {
     transition: transform 250ms ease;
   }
 
-  nav, .github-corner {
+  .app-nav, .github-corner {
     transition: transform 250ms ease-out;
   }
 
@@ -489,7 +494,7 @@ body.close {
       transform: translateX($sidebar-width);
     }
 
-    nav, .github-corner {
+    .app-nav, .github-corner {
       display: none;
     }
   }