diff --git a/nx-dev/nx-dev/pages/[...segments].tsx b/nx-dev/nx-dev/pages/[...segments].tsx
index 71d706fda1..ec5afecbd0 100644
--- a/nx-dev/nx-dev/pages/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/ai-chat/index.tsx b/nx-dev/nx-dev/pages/ai-chat/index.tsx
index 1676165a63..097f01a64f 100644
--- a/nx-dev/nx-dev/pages/ai-chat/index.tsx
+++ b/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 />
diff --git a/nx-dev/nx-dev/pages/changelog.tsx b/nx-dev/nx-dev/pages/changelog.tsx
index c5e6d070ea..c69e331f73 100644
--- a/nx-dev/nx-dev/pages/changelog.tsx
+++ b/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">
diff --git a/nx-dev/nx-dev/pages/ci/[...segments].tsx b/nx-dev/nx-dev/pages/ci/[...segments].tsx
index baa4da30d2..68c6bf3fb7 100644
--- a/nx-dev/nx-dev/pages/ci/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/ci/index.tsx b/nx-dev/nx-dev/pages/ci/index.tsx
index f2a8759c39..8823201424 100644
--- a/nx-dev/nx-dev/pages/ci/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/extending-nx/[...segments].tsx b/nx-dev/nx-dev/pages/extending-nx/[...segments].tsx
index 5e08c75a67..4da9dc82ed 100644
--- a/nx-dev/nx-dev/pages/extending-nx/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/extending-nx/index.tsx b/nx-dev/nx-dev/pages/extending-nx/index.tsx
index 5d8f92214e..af3a88a8db 100644
--- a/nx-dev/nx-dev/pages/extending-nx/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/documents/[...segments].tsx b/nx-dev/nx-dev/pages/nx-api/[name]/documents/[...segments].tsx
index 9b70227569..9b1f3b077b 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/documents/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/documents/index.tsx b/nx-dev/nx-dev/pages/nx-api/[name]/documents/index.tsx
index a0e558830b..3589e48ff2 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/documents/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/executors/[...segments].tsx b/nx-dev/nx-dev/pages/nx-api/[name]/executors/[...segments].tsx
index d76e9e73c2..1194e75e02 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/executors/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/executors/index.tsx b/nx-dev/nx-dev/pages/nx-api/[name]/executors/index.tsx
index 5f4b7f8702..d74c5f9346 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/executors/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/generators/[...segments].tsx b/nx-dev/nx-dev/pages/nx-api/[name]/generators/[...segments].tsx
index 974ab01525..2225bd5330 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/generators/[...segments].tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/generators/index.tsx b/nx-dev/nx-dev/pages/nx-api/[name]/generators/index.tsx
index 3a7c027b81..790f40552c 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/generators/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/[name]/index.tsx b/nx-dev/nx-dev/pages/nx-api/[name]/index.tsx
index 47c7bcef09..9c4dd9586a 100644
--- a/nx-dev/nx-dev/pages/nx-api/[name]/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/index.tsx b/nx-dev/nx-dev/pages/nx-api/index.tsx
index b5861dee91..15bcc686ef 100644
--- a/nx-dev/nx-dev/pages/nx-api/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/documents/index.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/documents/index.tsx
index 01c9ef3588..45d03cc68c 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/documents/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/documents/overview.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/documents/overview.tsx
index 2c5a16d329..25b2198ef6 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/documents/overview.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/documents/rspack-plugins.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/documents/rspack-plugins.tsx
index 8fb2fa4a19..e333293bed 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/documents/rspack-plugins.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/executors/dev-server.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/executors/dev-server.tsx
index 29f8f40b0e..853c533d93 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/executors/dev-server.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/executors/index.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/executors/index.tsx
index 80b0e45f45..055a983cb0 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/executors/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/executors/rspack.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/executors/rspack.tsx
index 9e0140114f..6da30fa68d 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/executors/rspack.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/generators/application.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/generators/application.tsx
index ad198d6a09..310a7d106f 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/generators/application.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/generators/configuration.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/generators/configuration.tsx
index 9b7dab0141..4cdc1c2c55 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/generators/configuration.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/generators/index.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/generators/index.tsx
index 44a63631e1..449d8a2040 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/generators/index.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/generators/init.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/generators/init.tsx
index c1fc501540..9b3497a267 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/generators/init.tsx
+++ b/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"
diff --git a/nx-dev/nx-dev/pages/nx-api/rspack/index.tsx b/nx-dev/nx-dev/pages/nx-api/rspack/index.tsx
index e1a474bdd4..a2124b7127 100644
--- a/nx-dev/nx-dev/pages/nx-api/rspack/index.tsx
+++ b/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"
diff --git a/nx-dev/ui-common/src/lib/sidebar-container.tsx b/nx-dev/ui-common/src/lib/sidebar-container.tsx
index 936f9aee90..d6cd9966a6 100644
--- a/nx-dev/ui-common/src/lib/sidebar-container.tsx
+++ b/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>
diff --git a/nx-dev/ui-common/src/lib/sidebar.tsx b/nx-dev/ui-common/src/lib/sidebar.tsx
index fea859f18a..531847eb63 100644
--- a/nx-dev/ui-common/src/lib/sidebar.tsx
+++ b/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,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>