Skip to content

Commit

Permalink
feat(render): add mergeNavbar option, close #125, #124 (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li authored Apr 9, 2017
1 parent b8100c0 commit 9220523
Show file tree
Hide file tree
Showing 11 changed files with 67 additions and 28 deletions.
3 changes: 2 additions & 1 deletion dev.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
loadNavbar: true,
loadSidebar: true,
name: 'docsify',
subMaxLevel: 2
subMaxLevel: 2,
mergeNavbar: true
}
</script>
<script src="/lib/docsify.js"></script>
Expand Down
8 changes: 4 additions & 4 deletions docs/_navbar.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
- :uk:
- [:cn: 中文](/zh-cn/)
- [:de: Deutsch](/de-de/)
- [:uk: English](/)
- Translations
- [:cn: 中文](/zh-cn/)
- [:de: Deutsch](/de-de/)
- [:uk: English](/)
10 changes: 10 additions & 0 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
```
4 changes: 0 additions & 4 deletions docs/de-de/_navbar.md

This file was deleted.

10 changes: 10 additions & 0 deletions docs/de-de/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
```
1 change: 1 addition & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
executeScript: true,
loadSidebar: true,
loadNavbar: true,
mergeNavbar: true,
maxLevel: 4,
name: 'docsify',
search: {
Expand Down
4 changes: 0 additions & 4 deletions docs/zh-cn/_navbar.md

This file was deleted.

11 changes: 11 additions & 0 deletions docs/zh-cn/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -315,3 +315,14 @@ window.$docsify = {
noEmoji: true
}
```

## merge-navbar

小屏设备下合并导航栏到侧边栏。

```js
window.$docsify = {
mergeNavbar: true
}
```

3 changes: 2 additions & 1 deletion src/core/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const config = merge({
autoHeader: false,
executeScript: null,
noEmoji: false,
ga: ''
ga: '',
mergeNavbar: false
}, window.$docsify)

const script = document.currentScript ||
Expand Down
20 changes: 14 additions & 6 deletions src/core/render/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand Down
21 changes: 13 additions & 8 deletions src/themes/basic/_layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
body:not(.ready) {
overflow: hidden;

[data-cloak], nav {
[data-cloak], .app-nav {
display: none;
}
}
Expand Down Expand Up @@ -83,7 +83,7 @@ kbd {
}

/* navbar */
nav.app-nav {
.app-nav {
left: 0;
margin: 25px 60px 0 0;
position: absolute;
Expand Down Expand Up @@ -238,6 +238,11 @@ main {
color: inherit;
text-decoration: none;
}

.app-nav {
display: block;
position: static;
}
}

ul {
Expand Down Expand Up @@ -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;

> * {
Expand Down Expand Up @@ -430,7 +435,7 @@ body.close {
display: none;
}

nav {
.app-nav {
display: none;
}
}
Expand All @@ -440,11 +445,11 @@ body.close {
position: fixed;
}

nav {
.app-nav {
margin-top: 16px;
}

nav li ul {
.app-nav li ul {
top: 30px;
}

Expand All @@ -465,7 +470,7 @@ body.close {
transition: transform 250ms ease;
}

nav, .github-corner {
.app-nav, .github-corner {
transition: transform 250ms ease-out;
}

Expand All @@ -489,7 +494,7 @@ body.close {
transform: translateX($sidebar-width);
}

nav, .github-corner {
.app-nav, .github-corner {
display: none;
}
}
Expand Down

1 comment on commit 9220523

@jrappen
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@QingWei-Li I've noticed that mergeNavbar works fine, however there is one edge case where it might not behave as expected when you resize the window but docsify only applies navbar behavior settings when the page is loaded.

Please sign in to comment.