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.

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

@@ -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"

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

@@ -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 />

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

@@ -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">

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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>

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

@@ -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,9 +252,37 @@ 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">
+            <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>
+                {/*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>
+              <div className="p-4">
                 {/*SECTIONS*/}
-              <div className="divide-y divide-slate-200">
+                <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
@@ -300,6 +333,7 @@ export function SidebarMobile({
                     ))}
                   </nav>
                 </div>
+              </div>
             </Dialog.Panel>
           </Transition.Child>
         </div>