feat(render): add mergeNavbar option, close #125, #124

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/_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/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/configuration.md

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

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/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;
  }
  }