diff --git a/dev.html b/dev.html index 2e88bb421..63cecbe34 100644 --- a/dev.html +++ b/dev.html @@ -29,7 +29,8 @@ loadNavbar: true, loadSidebar: true, name: 'docsify', - subMaxLevel: 2 + subMaxLevel: 2, + mergeNavbar: true } diff --git a/docs/_navbar.md b/docs/_navbar.md index 350c32be6..eccd4415c 100644 --- a/docs/_navbar.md +++ b/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](/) diff --git a/docs/configuration.md b/docs/configuration.md index 574aa0b65..946ac2050 100644 --- a/docs/configuration.md +++ b/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 +} +``` diff --git a/docs/de-de/_navbar.md b/docs/de-de/_navbar.md deleted file mode 100644 index 758167df1..000000000 --- a/docs/de-de/_navbar.md +++ /dev/null @@ -1,4 +0,0 @@ -- :de: - - [:cn: 中文](/zh-cn/) - - [:de: Deutsch](/de-de/) - - [:uk: English](/) diff --git a/docs/de-de/configuration.md b/docs/de-de/configuration.md index 8fd01ab00..19ec077d6 100644 --- a/docs/de-de/configuration.md +++ b/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 +} +``` \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index d72d8e17e..e2bef93f1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,6 +32,7 @@ executeScript: true, loadSidebar: true, loadNavbar: true, + mergeNavbar: true, maxLevel: 4, name: 'docsify', search: { diff --git a/docs/zh-cn/_navbar.md b/docs/zh-cn/_navbar.md deleted file mode 100644 index 87019b516..000000000 --- a/docs/zh-cn/_navbar.md +++ /dev/null @@ -1,4 +0,0 @@ -- :cn: - - [:cn: 中文](/zh-cn/) - - [:de: Deutsch](/de-de/) - - [:uk: English](/) diff --git a/docs/zh-cn/configuration.md b/docs/zh-cn/configuration.md index ef7a73096..028a8e1cb 100644 --- a/docs/zh-cn/configuration.md +++ b/docs/zh-cn/configuration.md @@ -315,3 +315,14 @@ window.$docsify = { noEmoji: true } ``` + +## merge-navbar + +小屏设备下合并导航栏到侧边栏。 + +```js +window.$docsify = { + mergeNavbar: true +} +``` + diff --git a/src/core/config.js b/src/core/config.js index 705051967..771e46d1e 100644 --- a/src/core/config.js +++ b/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 || diff --git a/src/core/render/index.js b/src/core/render/index.js index de7a6fa28..04778eb31 100644 --- a/src/core/render/index.js +++ b/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) diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index 17527943e..0f1f7f522 100644 --- a/src/themes/basic/_layout.css +++ b/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; } }