Skip to content

Commit f187887

Browse files
yfeng2824yfeng2824
authored
core:restructure navbar (#535)
1 parent fd515ab commit f187887

File tree

7 files changed

+210
-64
lines changed

7 files changed

+210
-64
lines changed

‎website/docusaurus.config.js

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const config = {
8888
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
8989
// Advanced use-case: functional editUrl
9090
editUrl: ({ locale, blogDirPath, blogPath, permalink }) =>
91-
`https://github.com/facebook/docusaurus/edit/main/website/${blogDirPath}/${blogPath}`,
91+
`https://github.com/nervosnetwork/docs-new/tree/develop/website/${blogDirPath}/${blogPath}`,
9292
editLocalizedFiles: false,
9393
blogTitle: "Nervos Blog",
9494
blogDescription: "Blog Posts About Nervos Blockchain",
@@ -243,8 +243,55 @@ const config = {
243243
to: "/docs/getting-started/how-ckb-works",
244244
label: "Docs",
245245
position: "left",
246-
}, // or position: 'right'
247-
{ to: "blog", label: "Blog", position: "left" }, // or position: 'right'
246+
activeBaseRegex:
247+
"/(getting-started|script|common-scripts|how-tos|tech-explanation|serialization|integrate-wallets|dapp|sdk-and-devtool)/",
248+
},
249+
{
250+
to: "/docs/node/rpcs",
251+
label: "Nodes & Mining",
252+
position: "left",
253+
activeBaseRegex: "/(node|mining)/",
254+
},
255+
{
256+
to: "/docs/ecosystem/projects",
257+
label: "Ecosystem",
258+
position: "left",
259+
activeBaseRegex: "/ecosystem/",
260+
},
261+
{
262+
to: "/docs/history-and-hard-forks/intro-to-hard-fork",
263+
label: "History & Hard Forks",
264+
position: "left",
265+
activeBaseRegex: "/history-and-hard-forks/",
266+
},
267+
{
268+
type: "dropdown",
269+
label: "Resources",
270+
position: "left",
271+
items: [
272+
{
273+
label: "Positioning Paper",
274+
href: "https://github.com/nervosnetwork/rfcs/blob/master/rfcs/0001-positioning/0001-positioning.md",
275+
},
276+
{
277+
label: "CKB RFCs",
278+
href: "https://github.com/nervosnetwork/rfcs",
279+
},
280+
{
281+
label: "CKB Dev Log",
282+
href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log",
283+
},
284+
{
285+
label: "CKB Academy",
286+
href: "https://academy.ckb.dev/",
287+
},
288+
{
289+
label: "CKB Cookbook",
290+
href: "https://cookbook.ckbdapps.com/",
291+
},
292+
],
293+
},
294+
{ to: "blog", label: "Blog", position: "left" },
248295
{
249296
type: "search",
250297
position: "right",

‎website/sidebars.js

Lines changed: 35 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
tutorial: [
2+
docs: [
33
{
44
type: "category",
55
label: "Getting Started",
@@ -87,20 +87,6 @@ export default {
8787
"common-scripts/spore-dob-0",
8888
],
8989
},
90-
{
91-
type: "category",
92-
label: "Network & Nodes",
93-
className: "category-node",
94-
collapsible: false,
95-
items: [
96-
"node/rpcs",
97-
"node/run-mainnet-node",
98-
"node/run-testnet-node",
99-
"node/run-devnet-node",
100-
"node/run-public-rpc-node",
101-
"node/turn-on-fee-estimator",
102-
],
103-
},
10490
{
10591
type: "category",
10692
label: "Serialization (Molecule)",
@@ -130,18 +116,7 @@ export default {
130116
"how-tos/how-to-calculate-code-hash",
131117
],
132118
},
133-
{
134-
type: "category",
135-
label: "History & Hard Forks",
136-
className: "category-history",
137-
collapsible: false,
138-
items: [
139-
"history-and-hard-forks/intro-to-hard-fork",
140-
"history-and-hard-forks/ckb-hard-fork-history",
141-
"history-and-hard-forks/history-vm-version",
142-
"history-and-hard-forks/rethinking-forks",
143-
],
144-
},
119+
145120
{
146121
type: "category",
147122
label: "Tech Explanation",
@@ -188,6 +163,31 @@ export default {
188163
"tech-explanation/glossary",
189164
],
190165
},
166+
],
167+
ecosystem: [
168+
{
169+
type: "category",
170+
label: "Ecosystem",
171+
className: "category-ecosystem",
172+
collapsible: false,
173+
items: ["ecosystem/projects", "ecosystem/organizations"],
174+
},
175+
],
176+
"Nodes & Mining": [
177+
{
178+
type: "category",
179+
label: "Network & Nodes",
180+
className: "category-node",
181+
collapsible: false,
182+
items: [
183+
"node/rpcs",
184+
"node/run-mainnet-node",
185+
"node/run-testnet-node",
186+
"node/run-devnet-node",
187+
"node/run-public-rpc-node",
188+
"node/turn-on-fee-estimator",
189+
],
190+
},
191191
{
192192
type: "category",
193193
label: "Mining",
@@ -204,44 +204,18 @@ export default {
204204
"mining/info-stats",
205205
],
206206
},
207+
],
208+
"History & Hard Forks": [
207209
{
208210
type: "category",
209-
label: "Ecosystem",
210-
className: "category-ecosystem",
211-
collapsible: false,
212-
items: ["ecosystem/projects", "ecosystem/organizations"],
213-
},
214-
{
215-
type: "category",
216-
label: "Resources",
217-
className: "category-resources",
211+
label: "History & Hard Forks",
212+
className: "category-history",
218213
collapsible: false,
219214
items: [
220-
{
221-
type: "link",
222-
label: "Positioning Paper",
223-
href: "https://github.com/nervosnetwork/rfcs/blob/master/rfcs/0001-positioning/0001-positioning.md",
224-
},
225-
{
226-
type: "link",
227-
label: "CKB RFCs",
228-
href: "https://github.com/nervosnetwork/rfcs",
229-
},
230-
{
231-
type: "link",
232-
label: "CKB Dev Log",
233-
href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log",
234-
},
235-
{
236-
type: "link",
237-
label: "CKB Academy",
238-
href: "https://academy.ckb.dev/",
239-
},
240-
{
241-
type: "link",
242-
label: "CKB Cookbook",
243-
href: "https://cookbook.ckbdapps.com/",
244-
},
215+
"history-and-hard-forks/intro-to-hard-fork",
216+
"history-and-hard-forks/ckb-hard-fork-history",
217+
"history-and-hard-forks/history-vm-version",
218+
"history-and-hard-forks/rethinking-forks",
245219
],
246220
},
247221
],

‎website/src/css/customTheme.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,25 @@
7575
align-items: center;
7676
padding: 0 1.5rem;
7777
}
78+
.dropdown__menu {
79+
background-color: var(--surface-03);
80+
}
81+
82+
ul.dropdown__menu {
83+
margin-top: 0;
84+
}
85+
86+
@media (max-width: 1280px) {
87+
.navbar__item {
88+
display: none;
89+
}
90+
}
91+
92+
@media (max-width: 1280px) {
93+
.navbar__toggle {
94+
display: inherit;
95+
}
96+
}
7897

7998
/*Search bar - deprecated*/
8099
.navbar-search .DocSearch-Button {

‎website/src/theme/Navbar/MobileSidebar/Header/index.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
3+
import { translate } from "@docusaurus/Translate";
4+
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
5+
import IconClose from "@theme/Icon/Close";
6+
import NavbarLogo from "@theme/Navbar/Logo";
7+
8+
function CloseButton() {
9+
const mobileSidebar = useNavbarMobileSidebar();
10+
return (
11+
<button
12+
type="button"
13+
aria-label={translate({
14+
id: "theme.docs.sidebar.closeSidebarButtonAriaLabel",
15+
message: "Close navigation bar",
16+
description: "The ARIA label for close button of mobile sidebar",
17+
})}
18+
className="clean-btn navbar-sidebar__close"
19+
onClick={() => mobileSidebar.toggle()}
20+
>
21+
<IconClose color="var(--ifm-color-emphasis-600)" />
22+
</button>
23+
);
24+
}
25+
26+
export default function NavbarMobileSidebarHeader(): JSX.Element {
27+
return (
28+
<div className="navbar-sidebar__brand">
29+
<NavbarLogo />
30+
<NavbarColorModeToggle className="margin-right--md" />
31+
<CloseButton />
32+
</div>
33+
);
34+
}

‎website/src/theme/Navbar/MobileSidebar/Layout/index.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import clsx from "clsx";
3+
import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal";
4+
import type { Props } from "@theme/Navbar/MobileSidebar/Layout";
5+
6+
export default function NavbarMobileSidebarLayout({
7+
header,
8+
primaryMenu,
9+
secondaryMenu,
10+
}: Props): JSX.Element {
11+
const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
12+
return (
13+
<div className="navbar-sidebar">
14+
{header}
15+
<div
16+
className={clsx("navbar-sidebar__items", {
17+
"navbar-sidebar__items--show-secondary": secondaryMenuShown,
18+
})}
19+
>
20+
<div className="navbar-sidebar__item menu">{primaryMenu}</div>
21+
<div className="navbar-sidebar__item menu">{secondaryMenu}</div>
22+
</div>
23+
</div>
24+
);
25+
}

‎website/src/theme/Navbar/MobileSidebar/index.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Original source:
3+
* @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/index.tsx
4+
*
5+
* Reason for overriding:
6+
* - The default Docusaurus Navbar Sidebar only appears on screens < 996px, but we need it to be visible on screens <= 1280px.
7+
*/
8+
import React from "react";
9+
import {
10+
useLockBodyScroll,
11+
useNavbarMobileSidebar,
12+
} from "@docusaurus/theme-common/internal";
13+
import NavbarMobileSidebarLayout from "@theme/Navbar/MobileSidebar/Layout";
14+
import NavbarMobileSidebarHeader from "@theme/Navbar/MobileSidebar/Header";
15+
import NavbarMobileSidebarPrimaryMenu from "@theme/Navbar/MobileSidebar/PrimaryMenu";
16+
import NavbarMobileSidebarSecondaryMenu from "@theme/Navbar/MobileSidebar/SecondaryMenu";
17+
18+
export default function NavbarMobileSidebar(): JSX.Element | null {
19+
const mobileSidebar = useNavbarMobileSidebar();
20+
useLockBodyScroll(mobileSidebar.shown);
21+
22+
const isMobileScreen =
23+
typeof window !== "undefined" && window.innerWidth <= 1280;
24+
25+
if (!isMobileScreen) {
26+
return null;
27+
}
28+
29+
return (
30+
<NavbarMobileSidebarLayout
31+
header={<NavbarMobileSidebarHeader />}
32+
primaryMenu={<NavbarMobileSidebarPrimaryMenu />}
33+
secondaryMenu={<NavbarMobileSidebarSecondaryMenu />}
34+
/>
35+
);
36+
}

‎website/src/theme/Navbar/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import NavbarLayout from "@theme/Navbar/Layout";
3+
import NavbarContent from "@theme/Navbar/Content";
4+
5+
export default function Navbar(): JSX.Element {
6+
return (
7+
<NavbarLayout>
8+
<NavbarContent />
9+
</NavbarLayout>
10+
);
11+
}

0 commit comments

Comments
 (0)