chore(nx-dev): move version picker to header (#29823)

Move the version picker to the header next to the docs logo
nrwl · Feb 3, 2025 · 0b6ad05 · 0b6ad05
1 parent 9e63a36
commit 0b6ad05
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx
@@ -201,9 +201,6 @@ export function Footer({
                 )
               )}
             </div>
-            <div className="flex items-center text-sm">
-              Nx Version <VersionPicker />
-            </div>
             <div className="flex items-center text-sm">
               Theme <ThemeSwitcher />
             </div>

diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
@@ -20,6 +20,7 @@ import {
 import { resourceMenuItems } from './menu-items';
 import { SectionsMenu } from './sections-menu';
 import { DiscordIcon } from '../discord-icon';
+import { VersionPicker } from '../version-picker';
 
 function Menu({ tabs }: { tabs: any[] }): ReactElement {
   return (
@@ -186,7 +187,7 @@ export function DocumentationHeader({
 
   return (
     <div className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 print:hidden">
-      <div className="mx-auto flex w-full items-center gap-6 lg:px-8 lg:py-4">
+      <div className="mx-auto flex w-full items-center gap-4 lg:px-8 lg:py-4">
         {/*MOBILE MENU*/}
         <div className="flex w-full items-center lg:hidden">
           <button
@@ -211,7 +212,7 @@ export function DocumentationHeader({
           </div>
         </div>
         {/*LOGO*/}
-        <div className="flex items-center">
+        <div className="flex items-center gap-4">
           <Link
             href="/"
             className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
@@ -229,6 +230,7 @@ export function DocumentationHeader({
               Docs
             </span>
           </Link>
+          <VersionPicker />
         </div>
         {/*SEARCH*/}
         <div className="hidden w-full max-w-[14rem] lg:inline">

diff --git a/nx-dev/ui-common/src/lib/version-picker.tsx b/nx-dev/ui-common/src/lib/version-picker.tsx
@@ -12,19 +12,19 @@ import { Fragment, JSX, useState } from 'react';
 
 const versionOptions = [
   {
-    label: '20',
+    label: 'v20',
     value: '',
   },
   {
-    label: '19',
+    label: 'v19',
     value: '19',
   },
   {
-    label: '18',
+    label: 'v18',
     value: '18',
   },
   {
-    label: '17',
+    label: 'v17',
     value: '17',
   },
 ];
@@ -33,19 +33,18 @@ export function VersionPicker(): JSX.Element {
   const [selected, _] = useState(versionOptions[0]);
   return (
     <>
-      <span className="inline-block align-bottom text-sm font-semibold uppercase leading-[38px] tracking-wide text-slate-800 lg:text-xs lg:leading-[38px] dark:text-slate-200"></span>
-      <div className="ml-2 inline-block">
+      <div className="inline-block">
         <div className="w-full">
           <Listbox value={selected}>
             {({ open }) => (
               <div className="relative">
                 <ListboxButton
                   className={
-                    'relative w-full cursor-pointer rounded-lg border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700'
+                    'relative w-full cursor-pointer rounded-lg border-slate-200 py-2 pr-6 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700'
                   }
                 >
                   <span className="block truncate">{selected.label}</span>
-                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center">
                     <ChevronUpDownIcon
                       className="h-5 w-5 text-slate-500"
                       aria-hidden="true"