Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

[do not merge] add a rightSidebar option#1288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
trusktr wants to merge2 commits intodevelop
base:develop
Choose a base branch
Loading
fromright-sidebar
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionscypress/integration/sidebar/config.spec.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ context('sidebar.configurations', () => {
'loadnavbar',
'loadsidebar',
'hidesidebar',
// 'rightSidebar', // This would require updated snapshots. I think we should get playwright in first.
'submaxlevel',
'auto2top',
'homepage',
Expand Down
9 changes: 8 additions & 1 deletiondocs/configuration.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -108,7 +108,7 @@ window.$docsify = {
## hideSidebar

- Type : `Boolean`
- Default: `true`
- Default: `false`
Copy link
MemberAuthor

Choose a reason for hiding this comment

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

This was wrong


This option will completely hide your sidebar and wont render any content of the side even .

Expand All@@ -118,6 +118,13 @@ window.$docsify = {
};
```

## rightSidebar

- Type: `Boolean|String`
- Default: `false`

If true, the sidebar will be on the right side instead of the left.

## subMaxLevel

- Type: `Number`
Expand Down
2 changes: 2 additions & 0 deletionsdocs/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,8 @@
coverpage: true,
executeScript: true,
loadSidebar: true,
rightSidebar: true, // TODO remove before merging
repo: 'http://foo.bar', // TODO remove before merging
loadNavbar: true,
mergeNavbar: true,
maxLevel: 4,
Expand Down
2 changes: 2 additions & 0 deletionsindex.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,6 +34,8 @@
coverpage: true,
executeScript: true,
loadSidebar: true,
rightSidebar: true, // TODO remove before merging
repo: 'http://foo.bar', // TODO remove before merging
loadNavbar: true,
mergeNavbar: true,
maxLevel: 4,
Expand Down
5 changes: 5 additions & 0 deletionssrc/core/init/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,13 +4,18 @@ import { initRouter } from '../router';
import { initEvent } from '../event';
import { initFetch } from '../fetch';
import { isFn } from '../util/core';
import { body } from '../util/dom';
import { initLifecycle, callHook } from './lifecycle';

export function initMixin(proto) {
proto._init = function() {
const vm = this;
vm.config = config(vm);

if (vm.config.rightSidebar) {
body.classList.add('right-sidebar');
}

initLifecycle(vm); // Init hooks
initPlugin(vm); // Install plugins
callHook(vm, 'init');
Expand Down
85 changes: 69 additions & 16 deletionssrc/themes/basic/_layout.styl
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -79,6 +79,15 @@ li input[type='checkbox']
vertical-align middle

/* navbar */
body.right-sidebar .app-nav
margin 25px 0 0 60px
left 0
right unset

& > ul
padding-inline-start: 0;
padding-inline-end: 40px; // Chrome's default value.

Copy link
MemberAuthor

Choose a reason for hiding this comment

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

@jhildenbiddle I aimed to make all the changes in here non-breaking for the end user.

You may have some opinion on how better to organize this change. Happy to hear if you do!

Copy link
MemberAuthor

Choose a reason for hiding this comment

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

The reason forpadding-inline-end: 40px; thing is to flip it to the other side when the menu is on the left, otherwise it has a default style in Chrome's user-agent style ofpadding-inline-start: 40px;.

Maybepadding-inline-start: 40px should be hard-coded for nonright-sidebar` mode, otherwise that one can vary from browser to browser (I don't know if they settled on the same values, haven't checked).

.app-nav
margin 25px 60px 0 0
position absolute
Expand DownExpand Up@@ -159,6 +168,10 @@ li input[type='checkbox']
display block

/* github corner */
body.right-sidebar .github-corner
right unset
transform scaleX(-1)

.github-corner
border-bottom 0
position fixed
Expand DownExpand Up@@ -199,6 +212,11 @@ main.hidden
text-decoration underline

/* sidebar */
body.right-sidebar .sidebar
left 100%
border-left 1px solid rgba(0, 0, 0, 0.07)
border-right none

.sidebar
border-right 1px solid rgba(0, 0, 0, 0.07)
overflow-y auto
Expand DownExpand Up@@ -265,6 +283,11 @@ main.hidden
background rgba(136, 136, 136, 0.1)

/* sidebar toggle */
body.right-sidebar .sidebar-toggle
left unset
right 0
transform scaleX(-1) // keeps toggle button on the right

.sidebar-toggle
background-color transparent
background-color rgba($color-bg, 0.8)
Expand DownExpand Up@@ -295,14 +318,18 @@ body.sticky
position fixed

/* main content */
body.right-sidebar .content
right $sidebar-width
left 0

.content
padding-top 60px
position absolute
top 0
right 0
bottom 0
left $sidebar-width
transition left 250ms ease
transition left 250ms ease, right 250ms ease

/* markdown content found on pages */
.markdown-section
Expand DownExpand Up@@ -391,16 +418,25 @@ body.sticky
.markdown-section ul.task-list > li
list-style-type none

body.close
.sidebar
body
&.close.sidebar
transform translateX(- $sidebar-width)

.sidebar-toggle
&.right-sidebar .sidebar
transform translateX(- $sidebar-width)

&.close.right-sidebar .sidebar
transform translateX(0)

&.close .sidebar-toggle
width auto

.content
$.close.content
left 0

&.close.right-sidebar .content
right 0

@media print
.github-corner, .sidebar-toggle, .sidebar, .app-nav
display none
Expand All@@ -419,6 +455,9 @@ body.close
height auto
overflow-x hidden

body.right-sidebar .sidebar
left 100%

.sidebar
left - $sidebar-width
transition transform 250ms ease-out
Expand All@@ -438,21 +477,35 @@ body.close
width auto
padding 30px 30px 10px 10px

body.close
.sidebar
body
// Note, on mobile .close means open, because mobile starts with the sidebar
// closed (opposite of desktop which starts with sidebar open), and the
// `close` class is toggled by the toggle button.

&.close .sidebar
transform translateX($sidebar-width)

.sidebar-toggle
background-color rgba($color-bg, 0.8)
transition 1s background-color
width $sidebar-width - 16px
padding 10px
&.right-sidebar .sidebar
transform translateX(0)

.content
transform translateX($sidebar-width)
&.close.right-sidebar .sidebar
transform translateX(-$sidebar-width)

.app-nav, .github-corner
display none
&.close
.sidebar-toggle
background-color rgba($color-bg, 0.8)
transition 1s background-color
width $sidebar-width - 16px
padding 10px

.content
transform translateX($sidebar-width)

&.right-sidebar .content
transform translateX(- $sidebar-width)

.app-nav, .github-corner
display none

.github-corner
&:hover .octo-arm
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp