Skip to content

Commit 79ee857

Browse files
ndcunninghamndcunningham
authored
docs(nx-dev): Update docs sidemenu enabling the close button (#23254)
This PR fixes the issue where the close button was not working in the nx-dev documentation pages after opening the overflow menu. Now, the close button functions correctly.
1 parent 0bfeea6 commit 79ee857

28 files changed

+225
-81
lines changed

‎nx-dev/nx-dev/pages/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ export default function NxDocumentation({
5757
role="main"
5858
className="flex h-full flex-1 overflow-y-hidden"
5959
>
60-
<SidebarContainer menu={menuWithSections} navIsOpen={navIsOpen} />
60+
<SidebarContainer
61+
menu={menuWithSections}
62+
toggleNav={toggleNav}
63+
navIsOpen={navIsOpen}
64+
/>
6165
<div
6266
ref={wrapperElement}
6367
id="wrapper"

‎nx-dev/nx-dev/pages/ai-chat/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,11 @@ export default function AiDocs(): JSX.Element {
4040
className="flex h-full flex-1 overflow-y-hidden"
4141
>
4242
<div className="hidden">
43-
<SidebarContainer menu={{ sections: [] }} navIsOpen={navIsOpen} />
43+
<SidebarContainer
44+
menu={{ sections: [] }}
45+
navIsOpen={navIsOpen}
46+
toggleNav={toggleNav}
47+
/>
4448
</div>
4549

4650
<FeedContainer />

‎nx-dev/nx-dev/pages/changelog.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -223,15 +223,19 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
223223
</div>
224224

225225
<main id="main" role="main">
226-
<div className="mx-auto flex max-w-7xl flex-col py-8 px-4 sm:px-6 lg:px-8">
226+
<div className="mx-auto flex max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
227227
<div className="mb-6">
228228
<Breadcrumbs path={router.asPath} />
229229
</div>
230230
<div className="hidden">
231-
<SidebarContainer menu={menu} navIsOpen={navIsOpen} />
231+
<SidebarContainer
232+
menu={menu}
233+
toggleNav={toggleNav}
234+
navIsOpen={navIsOpen}
235+
/>
232236
</div>
233237
<header className="mt-0">
234-
<h1 className="text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
238+
<h1 className="text-3xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-100">
235239
Nx Changelog
236240
</h1>
237241
<p className="mt-4">
@@ -271,7 +275,7 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
271275
v{changelog.version.split('.').slice(0, 2).join('.')}
272276
</a>
273277
<Link aria-hidden="true" href={`#${changelog.version}`}>
274-
<LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
278+
<LinkIcon className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
275279
</Link>
276280
</p>
277281
<p className="py-0.5 text-xs leading-5 text-slate-400 dark:text-slate-500">

‎nx-dev/nx-dev/pages/ci/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ export default function Pages({
6565
role="main"
6666
className="flex h-full flex-1 overflow-y-hidden"
6767
>
68-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
68+
<SidebarContainer
69+
menu={vm.menu}
70+
navIsOpen={navIsOpen}
71+
toggleNav={toggleNav}
72+
/>
6973
<div
7074
ref={wrapperElement}
7175
id="wrapper"

‎nx-dev/nx-dev/pages/ci/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ export default function CloudRoot({
6565
role="main"
6666
className="flex h-full flex-1 overflow-y-hidden"
6767
>
68-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
68+
<SidebarContainer
69+
menu={vm.menu}
70+
navIsOpen={navIsOpen}
71+
toggleNav={toggleNav}
72+
/>
6973
<div
7074
ref={wrapperElement}
7175
id="wrapper"

‎nx-dev/nx-dev/pages/extending-nx/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ export default function Pages({
6565
role="main"
6666
className="flex h-full flex-1 overflow-y-hidden"
6767
>
68-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
68+
<SidebarContainer
69+
menu={vm.menu}
70+
navIsOpen={navIsOpen}
71+
toggleNav={toggleNav}
72+
/>
6973
<div
7074
ref={wrapperElement}
7175
id="wrapper"

‎nx-dev/nx-dev/pages/extending-nx/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ export default function PluginsRoot({
6565
role="main"
6666
className="flex h-full flex-1 overflow-y-hidden"
6767
>
68-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
68+
<SidebarContainer
69+
menu={vm.menu}
70+
navIsOpen={navIsOpen}
71+
toggleNav={toggleNav}
72+
/>
6973
<div
7074
ref={wrapperElement}
7175
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/documents/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,11 @@ export default function PackageDocument({
7272
role="main"
7373
className="flex h-full flex-1 overflow-y-hidden"
7474
>
75-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
75+
<SidebarContainer
76+
menu={vm.menu}
77+
navIsOpen={navIsOpen}
78+
toggleNav={toggleNav}
79+
/>
7680
<div
7781
ref={wrapperElement}
7882
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/documents/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@ export default function DocumentsIndex({
6464
role="main"
6565
className="flex h-full flex-1 overflow-y-hidden"
6666
>
67-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
67+
<SidebarContainer
68+
menu={vm.menu}
69+
navIsOpen={navIsOpen}
70+
toggleNav={toggleNav}
71+
/>
6872
<div
6973
ref={wrapperElement}
7074
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/executors/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function PackageExecutor({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/executors/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@ export default function ExecutorsIndex({
6464
role="main"
6565
className="flex h-full flex-1 overflow-y-hidden"
6666
>
67-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
67+
<SidebarContainer
68+
menu={vm.menu}
69+
navIsOpen={navIsOpen}
70+
toggleNav={toggleNav}
71+
/>
6872
<div
6973
ref={wrapperElement}
7074
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/generators/[...segments].tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function PackageGenerator({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/generators/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@ export default function GeneratorsIndex({
6464
role="main"
6565
className="flex h-full flex-1 overflow-y-hidden"
6666
>
67-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
67+
<SidebarContainer
68+
menu={vm.menu}
69+
navIsOpen={navIsOpen}
70+
toggleNav={toggleNav}
71+
/>
6872
<div
6973
ref={wrapperElement}
7074
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/[name]/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,11 @@ export default function Package({
6868
role="main"
6969
className="flex h-full flex-1 overflow-y-hidden"
7070
>
71-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
71+
<SidebarContainer
72+
menu={vm.menu}
73+
navIsOpen={navIsOpen}
74+
toggleNav={toggleNav}
75+
/>
7276
<div
7377
ref={wrapperElement}
7478
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,11 @@ export default function Packages({
9292
role="main"
9393
className="flex h-full flex-1 overflow-y-hidden"
9494
>
95-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
95+
<SidebarContainer
96+
menu={vm.menu}
97+
navIsOpen={navIsOpen}
98+
toggleNav={toggleNav}
99+
/>
96100
<div
97101
id="wrapper"
98102
data-testid="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/documents/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,11 @@ export default function DocumentsIndex({
6363
role="main"
6464
className="flex h-full flex-1 overflow-y-hidden"
6565
>
66-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
66+
<SidebarContainer
67+
menu={vm.menu}
68+
navIsOpen={navIsOpen}
69+
toggleNav={toggleNav}
70+
/>
6771
<div
6872
ref={wrapperElement}
6973
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/documents/overview.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,11 @@ export default function Overview({
7070
role="main"
7171
className="flex h-full flex-1 overflow-y-hidden"
7272
>
73-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
73+
<SidebarContainer
74+
menu={vm.menu}
75+
navIsOpen={navIsOpen}
76+
toggleNav={toggleNav}
77+
/>
7478
<div
7579
ref={wrapperElement}
7680
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/documents/rspack-plugins.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,11 @@ export default function RspackPlugins({
7070
role="main"
7171
className="flex h-full flex-1 overflow-y-hidden"
7272
>
73-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
73+
<SidebarContainer
74+
menu={vm.menu}
75+
navIsOpen={navIsOpen}
76+
toggleNav={toggleNav}
77+
/>
7478
<div
7579
ref={wrapperElement}
7680
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/executors/dev-server.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function DevServerExecutor({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/executors/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,11 @@ export default function ExecutorsIndex({
6363
role="main"
6464
className="flex h-full flex-1 overflow-y-hidden"
6565
>
66-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
66+
<SidebarContainer
67+
menu={vm.menu}
68+
navIsOpen={navIsOpen}
69+
toggleNav={toggleNav}
70+
/>
6771
<div
6872
ref={wrapperElement}
6973
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/executors/rspack.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function RspackExecutor({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/generators/application.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function ApplicationGenerator({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/generators/configuration.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function ConfigurationGenerator({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/generators/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,11 @@ export default function GeneratorsIndex({
6363
role="main"
6464
className="flex h-full flex-1 overflow-y-hidden"
6565
>
66-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
66+
<SidebarContainer
67+
menu={vm.menu}
68+
navIsOpen={navIsOpen}
69+
toggleNav={toggleNav}
70+
/>
6771
<div
6872
ref={wrapperElement}
6973
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/generators/init.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ export default function InitGenerator({
7474
role="main"
7575
className="flex h-full flex-1 overflow-y-hidden"
7676
>
77-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
77+
<SidebarContainer
78+
menu={vm.menu}
79+
navIsOpen={navIsOpen}
80+
toggleNav={toggleNav}
81+
/>
7882
<div
7983
ref={wrapperElement}
8084
id="wrapper"

‎nx-dev/nx-dev/pages/nx-api/rspack/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,11 @@ export default function RspackIndex({
6666
role="main"
6767
className="flex h-full flex-1 overflow-y-hidden"
6868
>
69-
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
69+
<SidebarContainer
70+
menu={vm.menu}
71+
navIsOpen={navIsOpen}
72+
toggleNav={toggleNav}
73+
/>
7074
<div
7175
ref={wrapperElement}
7276
id="wrapper"

‎nx-dev/ui-common/src/lib/sidebar-container.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,11 @@ const rspackSection = {
105105
export function SidebarContainer({
106106
menu,
107107
navIsOpen,
108+
toggleNav,
108109
}: {
109110
menu: Menu;
110111
navIsOpen: boolean;
112+
toggleNav: (value: boolean) => void;
111113
}): JSX.Element {
112114
// TODO(jack): Remove this rspack modification once we move rspack into main repo (when stable).
113115
const menuWithRspack = useMemo(() => {
@@ -128,8 +130,12 @@ export function SidebarContainer({
128130

129131
return (
130132
<div id="sidebar" data-testid="sidebar">
131-
<SidebarMobile menu={menuWithRspack} navIsOpen={navIsOpen} />
132-
<div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
133+
<SidebarMobile
134+
menu={menuWithRspack}
135+
toggleNav={toggleNav}
136+
navIsOpen={navIsOpen}
137+
/>
138+
<div className="hidden h-full w-72 flex-col border-r border-slate-200 md:flex dark:border-slate-700 dark:bg-slate-900">
133139
<div className="relative flex flex-grow overflow-y-scroll p-4">
134140
<Sidebar menu={menuWithRspack} />
135141
</div>

0 commit comments

Comments
 (0)