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

Commit7079145

Browse files
committed
add a rightSidebar option
1 parent7ea391b commit7079145

File tree

6 files changed

+87
-17
lines changed

6 files changed

+87
-17
lines changed

‎cypress/integration/sidebar/config.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ context('sidebar.configurations', () => {
3232
'loadnavbar',
3333
'loadsidebar',
3434
'hidesidebar',
35+
// 'rightSidebar', // This would require updated snapshots. I think we should get playwright in first.
3536
'submaxlevel',
3637
'auto2top',
3738
'homepage',

‎docs/configuration.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ window.$docsify = {
108108
##hideSidebar
109109

110110
- Type :`Boolean`
111-
- Default:`true`
111+
- Default:`false`
112112

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

@@ -118,6 +118,13 @@ window.$docsify = {
118118
};
119119
```
120120

121+
##rightSidebar
122+
123+
- Type:`Boolean|String`
124+
- Default:`false`
125+
126+
If true, the sidebar will be on the right side instead of the left.
127+
121128
##subMaxLevel
122129

123130
- Type:`Number`

‎docs/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
coverpage:true,
4040
executeScript:true,
4141
loadSidebar:true,
42+
rightSidebar:true,// TODO remove before merging
43+
repo:'http://foo.bar',// TODO remove before merging
4244
loadNavbar:true,
4345
mergeNavbar:true,
4446
maxLevel:4,

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
coverpage:true,
3535
executeScript:true,
3636
loadSidebar:true,
37+
rightSidebar:true,// TODO remove before merging
38+
repo:'http://foo.bar',// TODO remove before merging
3739
loadNavbar:true,
3840
mergeNavbar:true,
3941
maxLevel:4,

‎src/core/init/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,18 @@ import { initRouter } from '../router';
44
import{initEvent}from'../event';
55
import{initFetch}from'../fetch';
66
import{isFn}from'../util/core';
7+
import{body}from'../util/dom';
78
import{initLifecycle,callHook}from'./lifecycle';
89

910
exportfunctioninitMixin(proto){
1011
proto._init=function(){
1112
constvm=this;
1213
vm.config=config(vm);
1314

15+
if(vm.config.rightSidebar){
16+
body.classList.add('right-sidebar');
17+
}
18+
1419
initLifecycle(vm);// Init hooks
1520
initPlugin(vm);// Install plugins
1621
callHook(vm,'init');

‎src/themes/basic/_layout.styl‎

Lines changed: 69 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,15 @@ li input[type='checkbox']
7979
vertical-alignmiddle
8080

8181
/* navbar*/
82+
body.right-sidebar.app-nav
83+
margin25px0060px
84+
left0
85+
rightunset
86+
87+
&>ul
88+
padding-inline-start:0;
89+
padding-inline-end:40px;// Chrome's default value.
90+
8291
.app-nav
8392
margin25px60px00
8493
positionabsolute
@@ -159,6 +168,10 @@ li input[type='checkbox']
159168
displayblock
160169

161170
/* github corner*/
171+
body.right-sidebar.github-corner
172+
rightunset
173+
transformscaleX(-1)
174+
162175
.github-corner
163176
border-bottom0
164177
positionfixed
@@ -199,6 +212,11 @@ main.hidden
199212
text-decorationunderline
200213

201214
/* sidebar*/
215+
body.right-sidebar.sidebar
216+
left100%
217+
border-left1pxsolidrgba(0,0,0,0.07)
218+
border-rightnone
219+
202220
.sidebar
203221
border-right1pxsolidrgba(0,0,0,0.07)
204222
overflow-yauto
@@ -265,6 +283,11 @@ main.hidden
265283
backgroundrgba(136,136,136,0.1)
266284

267285
/* sidebar toggle*/
286+
body.right-sidebar.sidebar-toggle
287+
leftunset
288+
right0
289+
transformscaleX(-1)// keeps toggle button on the right
290+
268291
.sidebar-toggle
269292
background-colortransparent
270293
background-colorrgba($color-bg,0.8)
@@ -295,14 +318,18 @@ body.sticky
295318
positionfixed
296319

297320
/* main content*/
321+
body.right-sidebar.content
322+
right$sidebar-width
323+
left0
324+
298325
.content
299326
padding-top60px
300327
positionabsolute
301328
top0
302329
right0
303330
bottom0
304331
left$sidebar-width
305-
transitionleft250msease
332+
transitionleft250msease,right250msease
306333

307334
/* markdown content found on pages*/
308335
.markdown-section
@@ -391,16 +418,25 @@ body.sticky
391418
.markdown-sectionul.task-list>li
392419
list-style-typenone
393420

394-
body.close
395-
.sidebar
421+
body
422+
&.close.sidebar
396423
transformtranslateX(-$sidebar-width)
397424

398-
.sidebar-toggle
425+
&.right-sidebar.sidebar
426+
transformtranslateX(-$sidebar-width)
427+
428+
&.close.right-sidebar.sidebar
429+
transformtranslateX(0)
430+
431+
&.close.sidebar-toggle
399432
widthauto
400433

401-
.content
434+
$.close.content
402435
left0
403436

437+
&.close.right-sidebar.content
438+
right0
439+
404440
@mediaprint
405441
.github-corner,.sidebar-toggle,.sidebar,.app-nav
406442
displaynone
@@ -419,6 +455,9 @@ body.close
419455
heightauto
420456
overflow-xhidden
421457

458+
body.right-sidebar.sidebar
459+
left100%
460+
422461
.sidebar
423462
left-$sidebar-width
424463
transitiontransform250msease-out
@@ -438,21 +477,35 @@ body.close
438477
widthauto
439478
padding30px30px10px10px
440479

441-
body.close
442-
.sidebar
480+
body
481+
// Note, on mobile .close means open, because mobile starts with the sidebar
482+
// closed (opposite of desktop which starts with sidebar open), and the
483+
// `close` class is toggled by the toggle button.
484+
485+
&.close.sidebar
443486
transformtranslateX($sidebar-width)
444487

445-
.sidebar-toggle
446-
background-colorrgba($color-bg,0.8)
447-
transition1sbackground-color
448-
width$sidebar-width-16px
449-
padding10px
488+
&.right-sidebar.sidebar
489+
transformtranslateX(0)
450490

451-
.content
452-
transformtranslateX($sidebar-width)
491+
&.close.right-sidebar.sidebar
492+
transformtranslateX(-$sidebar-width)
453493

454-
.app-nav,.github-corner
455-
displaynone
494+
&.close
495+
.sidebar-toggle
496+
background-colorrgba($color-bg,0.8)
497+
transition1sbackground-color
498+
width$sidebar-width-16px
499+
padding10px
500+
501+
.content
502+
transformtranslateX($sidebar-width)
503+
504+
&.right-sidebar.content
505+
transformtranslateX(-$sidebar-width)
506+
507+
.app-nav,.github-corner
508+
displaynone
456509

457510
.github-corner
458511
&:hover.octo-arm

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp