Skip to content

Commit 889be54

Browse files
SoonIterSoonIter
committed
fix: make Sidebar pure
1 parent f967628 commit 889be54

File tree

4 files changed

+67
-141
lines changed

4 files changed

+67
-141
lines changed

‎packages/theme-default/src/components/Sidebar/index.scss‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎packages/theme-default/src/components/Sidebar/index.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ import {
88
type SidebarData,
99
} from '@rspress/shared';
1010
import { useEffect } from 'react';
11-
import type { UISwitchResult } from '../../logic/useUISwitch';
12-
import { NavTitle } from '../NewNav/NavTitle';
13-
import './index.scss';
1411
import { SidebarDivider } from './SidebarDivider';
1512
import { SidebarGroup } from './SidebarGroup';
1613
import { SidebarItem } from './SidebarItem';
@@ -23,17 +20,12 @@ import {
2320

2421
interface Props {
2522
isSidebarOpen?: boolean;
26-
beforeSidebar?: React.ReactNode;
27-
afterSidebar?: React.ReactNode;
28-
uiSwitch?: UISwitchResult;
29-
navTitle?: React.ReactNode;
3023
}
3124

3225
export let bodyStyleOverflow: string;
3326

3427
export function Sidebar(props: Props) {
35-
const { isSidebarOpen, beforeSidebar, afterSidebar, uiSwitch, navTitle } =
36-
props;
28+
const { isSidebarOpen } = props;
3729

3830
const [sidebarData, setSidebarData] = useSidebarDynamic();
3931

@@ -54,19 +46,7 @@ export function Sidebar(props: Props) {
5446
}, [isSidebarOpen]);
5547

5648
return (
57-
<div className={`rp-sidebar ${isSidebarOpen ? 'rp-sidebar--open' : ''}`}>
58-
{!uiSwitch?.showNavbar ? null : (
59-
<div className="rp-sidebar__nav-title">{navTitle || <NavTitle />}</div>
60-
)}
61-
<nav className="rp-sidebar__container rspress-scrollbar">
62-
{beforeSidebar}
63-
<SidebarList
64-
sidebarData={sidebarData}
65-
setSidebarData={setSidebarData}
66-
/>
67-
{afterSidebar}
68-
</nav>
69-
</div>
49+
<SidebarList sidebarData={sidebarData} setSidebarData={setSidebarData} />
7050
);
7151
}
7252

‎packages/theme-default/src/layout/DocLayout/index.scss‎

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
:root {
22
// z-index
3-
--rp-z-index-nav-menu: 40;
4-
--rp-z-index-nav: 50;
3+
--rp-z-index-nav-menu: 30;
4+
--rp-z-index-nav: 40;
55
--rp-z-index-backdrop: 60;
6-
--rp-z-index-sidebar: 40;
6+
--rp-z-index-sidebar: 70;
77
--rp-z-index-aside: 40;
88
}
99

1010
:root {
1111
--rp-nav-height: 64px;
1212
--rp-sidebar-width: 320px;
1313
--rp-sidebar-menu-height: 46px;
14+
--rp-sidebar-padding: 20px;
1415
--rp-aside-width: 268px;
1516
--rp-content-padding-x: 80px;
1617
--rp-content-padding-y: 48px;
@@ -23,33 +24,48 @@
2324
}
2425

2526
.rp-doc-layout {
26-
width: 100%; // mobile
27-
padding: 0px;
28-
margin: 0px;
29-
position: relative;
27+
&__container {
28+
width: 100%; // mobile
29+
padding: 0px;
30+
margin: 0px;
31+
position: relative;
3032

31-
display: flex;
32-
justify-content: flex-start;
33-
flex-direction: row;
33+
display: flex;
34+
justify-content: flex-start;
35+
flex-direction: row;
36+
}
3437

3538
&__doc {
3639
display: flex;
3740
flex-direction: column;
3841
position: relative;
3942

4043
width: 100%;
44+
overflow-x: auto;
4145
}
4246

4347
&__sidebar {
4448
width: var(--rp-sidebar-width);
49+
max-width: var(--rp-sidebar-width);
50+
51+
height: calc(100vh - var(--rp-nav-height));
52+
max-height: calc(100vh - var(--rp-nav-height));
53+
54+
padding: var(--rp-sidebar-padding);
55+
border-right: 1px solid var(--rp-c-divider-light);
56+
57+
overflow-x: auto;
58+
overflow-y: scroll;
4559

60+
// postion
4661
position: sticky;
62+
margin-top: calc(-1 * var(--rp-sidebar-menu-height));
4763
top: var(--rp-nav-height);
48-
// bottom: 0;
4964
left: 0;
65+
bottom: 0;
5066
z-index: var(--rp-z-index-sidebar);
51-
height: calc(100vh - var(--rp-nav-height));
52-
max-height: calc(100vh - var(--rp-nav-height));
67+
68+
background: var(--rp-c-bg);
5369
}
5470

5571
&__doc-container {
@@ -77,6 +93,8 @@
7793
top: var(--rp-nav-height);
7894
left: 0;
7995
z-index: var(--rp-z-index-nav-menu);
96+
97+
height: var(--rp-sidebar-menu-height);
8098
}
8199
}
82100

@@ -101,12 +119,17 @@
101119
}
102120

103121
@media (max-width: 1279px) {
104-
.rp-doc-layout {
122+
:root {
105123
--rp-content-padding-x: 24px;
106124
--rp-content-padding-y: 48px;
125+
}
126+
.rp-doc-layout {
107127
&__aside {
108128
display: none;
109129
}
130+
&__doc-container {
131+
padding: var(--rp-content-padding-y) var(--rp-content-padding-x);
132+
}
110133
}
111134
}
112135

@@ -117,10 +140,25 @@
117140
}
118141
.rp-doc-layout {
119142
&__sidebar {
143+
height: 100vh;
144+
max-width: 100vh;
145+
120146
position: fixed;
121-
left: calc(-1 * var(--rp-sidebar-width));
147+
top: unset;
148+
bottom: 0;
149+
150+
background: var(--rp-c-bg);
151+
opacity: 0;
152+
transform: translate3d(-100%, 0, 0);
153+
transition:
154+
opacity 0.25s,
155+
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
156+
122157
&--open {
123158
left: 0;
159+
opacity: 1;
160+
visibility: visible;
161+
transform: translate3d(0, 0, 0);
124162
}
125163
}
126164
}

‎packages/theme-default/src/layout/DocLayout/index.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export function DocLayout(props: DocLayoutProps) {
3939
beforeSidebar,
4040
afterSidebar,
4141
uiSwitch,
42-
navTitle,
4342
components,
4443
} = props;
4544
const { frontmatter } = useFrontmatter();
@@ -52,35 +51,32 @@ export function DocLayout(props: DocLayoutProps) {
5251

5352
return (
5453
<>
54+
<div className="rp-doc-layout__menu">
55+
<SidebarMenu
56+
isSidebarOpen={isSidebarOpen}
57+
onIsSidebarOpenChange={setIsSidebarOpen}
58+
uiSwitch={uiSwitch}
59+
/>
60+
</div>
5561
{beforeDoc}
56-
<div className="rp-doc-layout">
62+
<div className="rp-doc-layout__container">
5763
{/* Sidebar */}
5864
{uiSwitch?.showSidebar && (
5965
<aside
6066
className={clsx(
6167
'rp-doc-layout__sidebar',
6268
isSidebarOpen && 'rp-doc-layout__sidebar--open',
69+
'rspress-scrollbar',
6370
)}
6471
>
65-
<Sidebar
66-
isSidebarOpen={isSidebarOpen}
67-
beforeSidebar={beforeSidebar}
68-
afterSidebar={afterSidebar}
69-
uiSwitch={uiSwitch}
70-
navTitle={navTitle}
71-
/>
72+
{beforeSidebar}
73+
<Sidebar isSidebarOpen={isSidebarOpen} />
74+
{afterSidebar}
7275
</aside>
7376
)}
7477

7578
{/* Main document content */}
7679
<div className="rp-doc-layout__doc">
77-
<div className="rp-doc-layout__menu">
78-
<SidebarMenu
79-
isSidebarOpen={isSidebarOpen}
80-
onIsSidebarOpenChange={setIsSidebarOpen}
81-
uiSwitch={uiSwitch}
82-
/>
83-
</div>
8480
<main className="rp-doc-layout__doc-container">
8581
{isOverviewPage ? (
8682
<>

0 commit comments

Comments
 (0)