fix(nx-dev): plugin-registry menu (#26767)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

When on https://nx.dev/plugin-registry the side-bar menu doesn't open on
mobile.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Should obviously open. Also adjusted the top-level header menu
"Documentation" -> "Docs" (just sounds better)

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

nx-dev/nx-dev/pages/plugin-registry.tsx

@@ -1,10 +1,14 @@
-import { getBasicPluginsSection } from '@nx/nx-dev/data-access-menu';
+import { getBasicNxSection } from '@nx/nx-dev/data-access-menu';
-import { Menu } from '@nx/nx-dev/models-menu';
+import { MenuItem } from '@nx/nx-dev/models-menu';
-import { Breadcrumbs, DocumentationHeader, Footer } from '@nx/nx-dev/ui-common';
+import {
+  Breadcrumbs,
+  DocumentationHeader,
+  Footer,
+  SidebarContainer,
+} from '@nx/nx-dev/ui-common';
 import { PluginDirectory } from '@nx/nx-dev/ui-community';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { useRef } from 'react';
 import { menusApi } from '../lib/menus.api';
 import { useNavToggle } from '../lib/navigation-toggle.effect';
 import { nxPackagesApi } from '../lib/packages.api';
@@ -20,7 +24,7 @@ interface PluginInfo {
 }
 interface BrowseProps {
   pluginList: PluginInfo[];
-  // segments: string[];
+  menu: MenuItem[];
 }
 
 export async function getStaticProps(): Promise<{ props: BrowseProps }> {
@@ -56,7 +60,7 @@ export async function getStaticProps(): Promise<{ props: BrowseProps }> {
           isOfficial: false,
         })),
       ],
-      // segments,
+      menu: menusApi.getMenu('nx', ''),
     },
   };
 }
@@ -64,14 +68,9 @@ export async function getStaticProps(): Promise<{ props: BrowseProps }> {
 export default function Browse(props: BrowseProps): JSX.Element {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
-  const wrapperElement = useRef(null);
 
-  const vm: {
+  const menu = {
-    menu: Menu;
+    sections: [getBasicNxSection(props.menu)],
-  } = {
-    menu: {
-      sections: [getBasicPluginsSection(menusApi.getMenu('extending-nx', ''))],
-    },
   };
 
   return (
@@ -106,8 +105,14 @@ export default function Browse(props: BrowseProps): JSX.Element {
           role="main"
           className="flex h-full flex-1 overflow-y-hidden"
         >
+          <div className="hidden">
+            <SidebarContainer
+              menu={menu}
+              navIsOpen={navIsOpen}
+              toggleNav={toggleNav}
+            />
+          </div>
           <div
-            ref={wrapperElement}
             id="wrapper"
             data-testid="wrapper"
             className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"

nx-dev/ui-common/src/lib/headers/documentation-header.tsx

@@ -321,7 +321,7 @@ export function DocumentationHeader({
               title="Documentation"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
             >
-              Documentation
+              Docs
             </Link>
             <Link
               href="/blog"

nx-dev/ui-common/src/lib/headers/header.tsx

@@ -157,7 +157,7 @@ export function Header(): JSX.Element {
               title="Documentation"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
             >
-              Documentation
+              Docs
             </Link>
             <Link
               href="/blog"
@@ -436,7 +436,7 @@ export function Header(): JSX.Element {
                             title="Documentation"
                             className="block py-4 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500"
                           >
-                            Documentation
+                            Docs
                           </Link>
                           <Link
                             href="/blog"

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

@@ -187,11 +187,17 @@ export function SidebarMobile({
   const router = useRouter();
   const isCI: boolean = router.asPath.startsWith('/ci');
   const isAPI: boolean = router.asPath.startsWith('/nx-api');
-  const isPlugins: boolean = router.asPath.startsWith('/extending-nx');
+  const isExtendingNx: boolean = router.asPath.startsWith('/extending-nx');
+  const isPlugins: boolean = router.asPath.startsWith('/plugin-registry');
   const isChangelog: boolean = router.asPath.startsWith('/changelog');
   const isAiChat: boolean = router.asPath.startsWith('/ai-chat');
   const isNx: boolean =
-    !isCI && !isAPI && !isPlugins && !isChangelog && !isAiChat;
+    !isCI &&
+    !isAPI &&
+    !isExtendingNx &&
+    !isPlugins &&
+    !isChangelog &&
+    !isAiChat;
 
   const sections = {
     general: [
@@ -220,6 +226,11 @@ export function SidebarMobile({
       {
         name: 'Extending Nx',
         href: '/extending-nx/intro/getting-started',
+        current: isExtendingNx,
+      },
+      {
+        name: 'Plugins',
+        href: '/plugin-registry',
         current: isPlugins,
       },
       {