miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(nx-dev): Update docs sidemenu enabling the close button (#23254)

Browse Source 
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.
This commit is contained in:
Nicholas Cunningham 2024-05-08 14:18:37 -06:00 committed by GitHub
parent 0bfeea6be3
commit 79ee857380
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 225 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
nx-dev/nx-dev/pages/[...segments].tsx
View File

@ -57,7 +57,11 @@ export default function NxDocumentation({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={menuWithSections} navIsOpen={navIsOpen} />
<SidebarContainer
menu={menuWithSections}
toggleNav={toggleNav}
navIsOpen={navIsOpen}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/ai-chat/index.tsx
View File

@ -40,7 +40,11 @@ export default function AiDocs(): JSX.Element {
className="flex h-full flex-1 overflow-y-hidden"
>
<div className="hidden">
<SidebarContainer menu={{ sections: [] }} navIsOpen={navIsOpen} />
<SidebarContainer
menu={{ sections: [] }}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
</div>
<FeedContainer />

12
nx-dev/nx-dev/pages/changelog.tsx
View File

@ -223,15 +223,19 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
</div>
<main id="main" role="main">
<div className="mx-auto flex max-w-7xl flex-col py-8 px-4 sm:px-6 lg:px-8">
<div className="mx-auto flex max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
<div className="mb-6">
<Breadcrumbs path={router.asPath} />
</div>
<div className="hidden">
<SidebarContainer menu={menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={menu}
toggleNav={toggleNav}
navIsOpen={navIsOpen}
/>
</div>
<header className="mt-0">
<h1 className="text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
<h1 className="text-3xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-100">
Nx Changelog
</h1>
<p className="mt-4">
@ -271,7 +275,7 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
v{changelog.version.split('.').slice(0, 2).join('.')}
</a>
<Link aria-hidden="true" href={`#${changelog.version}`}>
<LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
<LinkIcon className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
</Link>
</p>
<p className="py-0.5 text-xs leading-5 text-slate-400 dark:text-slate-500">

6
nx-dev/nx-dev/pages/ci/[...segments].tsx
View File

@ -65,7 +65,11 @@ export default function Pages({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/ci/index.tsx
View File

@ -65,7 +65,11 @@ export default function CloudRoot({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/extending-nx/[...segments].tsx
View File

@ -65,7 +65,11 @@ export default function Pages({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/extending-nx/index.tsx
View File

@ -65,7 +65,11 @@ export default function PluginsRoot({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/documents/[...segments].tsx
View File

@ -72,7 +72,11 @@ export default function PackageDocument({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/documents/index.tsx
View File

@ -64,7 +64,11 @@ export default function DocumentsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/executors/[...segments].tsx
View File

@ -74,7 +74,11 @@ export default function PackageExecutor({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/executors/index.tsx
View File

@ -64,7 +64,11 @@ export default function ExecutorsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/generators/[...segments].tsx
View File

@ -74,7 +74,11 @@ export default function PackageGenerator({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/generators/index.tsx
View File

@ -64,7 +64,11 @@ export default function GeneratorsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/[name]/index.tsx
View File

@ -68,7 +68,11 @@ export default function Package({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/index.tsx
View File

@ -92,7 +92,11 @@ export default function Packages({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
id="wrapper"
data-testid="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/documents/index.tsx
View File

@ -63,7 +63,11 @@ export default function DocumentsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/documents/overview.tsx
View File

@ -70,7 +70,11 @@ export default function Overview({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/documents/rspack-plugins.tsx
View File

@ -70,7 +70,11 @@ export default function RspackPlugins({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/executors/dev-server.tsx
View File

@ -74,7 +74,11 @@ export default function DevServerExecutor({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/executors/index.tsx
View File

@ -63,7 +63,11 @@ export default function ExecutorsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/executors/rspack.tsx
View File

@ -74,7 +74,11 @@ export default function RspackExecutor({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/generators/application.tsx
View File

@ -74,7 +74,11 @@ export default function ApplicationGenerator({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/generators/configuration.tsx
View File

@ -74,7 +74,11 @@ export default function ConfigurationGenerator({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/generators/index.tsx
View File

@ -63,7 +63,11 @@ export default function GeneratorsIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/generators/init.tsx
View File

@ -74,7 +74,11 @@ export default function InitGenerator({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

6
nx-dev/nx-dev/pages/nx-api/rspack/index.tsx
View File

@ -66,7 +66,11 @@ export default function RspackIndex({
role="main"
className="flex h-full flex-1 overflow-y-hidden"
>
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
<SidebarContainer
menu={vm.menu}
navIsOpen={navIsOpen}
toggleNav={toggleNav}
/>
<div
ref={wrapperElement}
id="wrapper"

10
nx-dev/ui-common/src/lib/sidebar-container.tsx
View File

@ -105,9 +105,11 @@ const rspackSection = {
export function SidebarContainer({
menu,
navIsOpen,
toggleNav,
}: {
menu: Menu;
navIsOpen: boolean;
toggleNav: (value: boolean) => void;
}): JSX.Element {
// TODO(jack): Remove this rspack modification once we move rspack into main repo (when stable).
const menuWithRspack = useMemo(() => {
@ -128,8 +130,12 @@ export function SidebarContainer({
return (
<div id="sidebar" data-testid="sidebar">
<SidebarMobile menu={menuWithRspack} navIsOpen={navIsOpen} />
<div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
<SidebarMobile
menu={menuWithRspack}
toggleNav={toggleNav}
navIsOpen={navIsOpen}
/>
<div className="hidden h-full w-72 flex-col border-r border-slate-200 md:flex dark:border-slate-700 dark:bg-slate-900">
<div className="relative flex flex-grow overflow-y-scroll p-4">
<Sidebar menu={menuWithRspack} />
</div>

134
nx-dev/ui-common/src/lib/sidebar.tsx
View File

@ -1,9 +1,12 @@
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { AlgoliaSearch } from '@nx/nx-dev/feature-search';
import { Menu, MenuItem, MenuSection } from '@nx/nx-dev/models-menu';
import cx from 'classnames';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { createRef, Fragment, useCallback, useEffect, useState } from 'react';
import { NxIcon } from './nx-icon';
export interface SidebarProps {
menu: Menu;
@ -11,6 +14,7 @@ export interface SidebarProps {
export interface FloatingSidebarProps {
menu: Menu;
navIsOpen: boolean;
toggleNav: (open: boolean) => void;
}
export function Sidebar({ menu }: SidebarProps): JSX.Element {
@ -177,6 +181,7 @@ function CollapsibleIcon({
export function SidebarMobile({
menu,
navIsOpen,
toggleNav,
}: FloatingSidebarProps): JSX.Element {
const router = useRouter();
const isCI: boolean = router.asPath.startsWith('/ci');
@ -237,7 +242,7 @@ export function SidebarMobile({
return (
<Transition.Root show={navIsOpen} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={() => void 0}>
<div className="fixed inset-0 top-[57px] z-40 flex">
<div className="fixed inset-0 z-40 flex">
<Transition.Child
as={Fragment}
enter="transition ease-in-out duration-300 transform"
@ -247,58 +252,87 @@ export function SidebarMobile({
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<Dialog.Panel className="relative flex w-full flex-col overflow-y-auto bg-white p-4 dark:bg-slate-900">
{/*SECTIONS*/}
<div className="divide-y divide-slate-200">
<div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
{sections.general.map((section) => (
<Link
key={section.name}
href={section.href}
className={cx(
section.current
? 'text-blue-600 dark:text-sky-500'
: 'hover:text-slate-900 dark:hover:text-sky-400',
'whitespace-nowrap p-4 text-center text-sm font-medium'
)}
aria-current={section.current ? 'page' : undefined}
>
{section.name}
</Link>
))}
<Dialog.Panel className="relative flex w-full flex-col overflow-y-auto bg-white dark:bg-slate-900">
{/*HEADER*/}
<div className="flex w-full items-center border-b border-slate-200 bg-slate-50 p-4 lg:hidden dark:border-slate-700 dark:bg-slate-800/60">
{/*CLOSE BUTTON*/}
<button
type="button"
className="flex focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
onClick={() => toggleNav(!navIsOpen)}
>
<span className="sr-only">Close sidebar</span>
<XMarkIcon className="mr-3 h-6 w-6" />
</button>
{/*SEARCH*/}
<div className="mx-4 w-auto">
<AlgoliaSearch />
</div>
<div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
{sections.documentation.map((section) => (
<Link
key={section.name}
href={section.href}
className={cx(
section.current
? 'text-blue-600 dark:text-sky-500'
: 'hover:text-slate-900 dark:hover:text-sky-400',
'whitespace-nowrap p-4 text-center text-sm font-medium'
)}
aria-current={section.current ? 'page' : undefined}
>
{section.name}
</Link>
))}
{/*LOGO*/}
<div className="ml-auto flex items-center">
<Link
href="/"
className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
>
<span className="sr-only">Nx</span>
<NxIcon aria-hidden="true" className="h-8 w-8" />
</Link>
</div>
</div>
{/*SIDEBAR*/}
<div data-testid="mobile-navigation-wrapper" className="mt-8">
<nav
id="mobile-nav"
data-testid="mobile-navigation"
className="text-base lg:text-sm"
>
{menu.sections.map((section, index) => (
<SidebarSection
key={section.id + '-' + index}
section={section}
/>
))}
</nav>
<div className="p-4">
{/*SECTIONS*/}
<div className="mt-5 divide-y divide-slate-200">
<div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
{sections.general.map((section) => (
<Link
key={section.name}
href={section.href}
className={cx(
section.current
? 'text-blue-600 dark:text-sky-500'
: 'hover:text-slate-900 dark:hover:text-sky-400',
'whitespace-nowrap p-4 text-center text-sm font-medium'
)}
aria-current={section.current ? 'page' : undefined}
>
{section.name}
</Link>
))}
</div>
<div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
{sections.documentation.map((section) => (
<Link
key={section.name}
href={section.href}
className={cx(
section.current
? 'text-blue-600 dark:text-sky-500'
: 'hover:text-slate-900 dark:hover:text-sky-400',
'whitespace-nowrap p-4 text-center text-sm font-medium'
)}
aria-current={section.current ? 'page' : undefined}
>
{section.name}
</Link>
))}
</div>
</div>
{/*SIDEBAR*/}
<div data-testid="mobile-navigation-wrapper" className="mt-8">
<nav
id="mobile-nav"
data-testid="mobile-navigation"
className="text-base lg:text-sm"
>
{menu.sections.map((section, index) => (
<SidebarSection
key={section.id + '-' + index}
section={section}
/>
))}
</nav>
</div>
</div>
</Dialog.Panel>
</Transition.Child>