[website][upgrade] feat: cli pages migration (#13660)

diff --git a/site2/website-next/docusaurus.config.js b/site2/website-next/docusaurus.config.js
index 5d7d036..2c825e2 100644
--- a/site2/website-next/docusaurus.config.js
+++ b/site2/website-next/docusaurus.config.js
@@ -148,6 +148,28 @@
           ],
         },
         {
+          label: "CLI",
+          position: "left",
+          items: [
+            {
+              label: "Pulsar Admin",
+              to: "/pulsar-admin-cli",
+            },
+            {
+              label: "Pulsar Client",
+              to: "/pulsar-client-cli",
+            },
+            {
+              label: "Pulsar Perf",
+              to: "/pulsar-perf-cli",
+            },
+            {
+              label: "Pulsar",
+              to: "/pulsar-cli",
+            },
+          ],
+        },
+        {
           href: "https://github.com/apache/pulsar",
           label: "GitHub",
           position: "right",
diff --git a/site2/website-next/src/components/CLI.js b/site2/website-next/src/components/CLI.js
new file mode 100644
index 0000000..b269789
--- /dev/null
+++ b/site2/website-next/src/components/CLI.js
@@ -0,0 +1,73 @@
+const React = require("react");
+import Layout from "@theme/Layout";
+const versionList = require("../../versions.json");
+
+class CLI extends React.Component {
+  componentDidMount() {
+    let params = window.location.search;
+    let latestVersion = versionList[0];
+    let clientModule = this.props.module || "pulsar-admin";
+    params = params.replace("?", "");
+    const paramsList = params.split("&");
+    let version = "master";
+    for (let i in paramsList) {
+      let param = paramsList[i].split("=");
+      if (param[0] === "version") {
+        version = param[1];
+      }
+    }
+    if (version === "master") {
+      let latestVersionSplit = latestVersion.split(".");
+      version =
+        parseInt(latestVersionSplit[0]) +
+        "." +
+        (parseInt(latestVersionSplit[1]) + 1) +
+        ".0";
+    }
+    let versions = version.split(".");
+    let majorVersion = parseInt(versions[0]);
+    let minorVersion = parseInt(versions[1]);
+    let minMinorVersion = 5;
+    let referenceLink = "/pulsar-admin";
+    if (clientModule === "pulsar-client") {
+      minMinorVersion = 8;
+      referenceLink = "/reference-cli-tools/#pulsar-client";
+    } else if (clientModule === "pulsar-perf") {
+      minMinorVersion = 8;
+      referenceLink = "/reference-cli-tools/#pulsar-perf";
+    } else if (clientModule === "pulsar") {
+      minMinorVersion = 8;
+      referenceLink = "/reference-cli-tools/#pulsar";
+    }
+    if (
+      (majorVersion > 1 && minorVersion <= minMinorVersion) ||
+      majorVersion === 1
+    ) {
+      if (version === latestVersion) {
+        window.location.href = "/docs/en" + referenceLink;
+      } else {
+        window.location.href = "/docs/en/" + version + referenceLink;
+      }
+    } else {
+      version = parseInt(versions[0]) + "." + parseInt(versions[1]) + ".0";
+      window.location.href =
+        "http://pulsar.apache.org/tools/" +
+        clientModule +
+        "/" +
+        version +
+        "-SNAPSHOT";
+    }
+  }
+
+  render() {
+    return (
+      <Layout>
+        <div className="tailwind">
+          <div className="my-12 container"></div>
+        </div>
+      </Layout>
+    );
+  }
+}
+
+export default CLI;
diff --git a/site2/website-next/src/pages/pulsar-admin-cli.js b/site2/website-next/src/pages/pulsar-admin-cli.js
new file mode 100644
index 0000000..6cb69a9
--- /dev/null
+++ b/site2/website-next/src/pages/pulsar-admin-cli.js
@@ -0,0 +1,6 @@
+const React = require("react");
+import CLI from "../components/CLI";
+
+export default () => {
+  return <CLI module="pulsar-admin" />;
+};
diff --git a/site2/website-next/src/pages/pulsar-cli.js b/site2/website-next/src/pages/pulsar-cli.js
new file mode 100644
index 0000000..2f078fa
--- /dev/null
+++ b/site2/website-next/src/pages/pulsar-cli.js
@@ -0,0 +1,6 @@
+const React = require("react");
+import CLI from "../components/CLI";
+
+export default () => {
+  return <CLI module="pulsar" />;
+};
diff --git a/site2/website-next/src/pages/pulsar-client-cli.js b/site2/website-next/src/pages/pulsar-client-cli.js
new file mode 100644
index 0000000..2ee38e8
--- /dev/null
+++ b/site2/website-next/src/pages/pulsar-client-cli.js
@@ -0,0 +1,6 @@
+const React = require("react");
+import CLI from "../components/CLI";
+
+export default () => {
+  return <CLI module="pulsar-client" />;
+};
diff --git a/site2/website-next/src/pages/pulsar-perf-cli.js b/site2/website-next/src/pages/pulsar-perf-cli.js
new file mode 100644
index 0000000..000501b
--- /dev/null
+++ b/site2/website-next/src/pages/pulsar-perf-cli.js
@@ -0,0 +1,6 @@
+const React = require("react");
+import CLI from "../components/CLI";
+
+export default () => {
+  return <CLI module="pulsar-perf" />;
+};
diff --git a/site2/website-next/src/theme/Navbar/index.js b/site2/website-next/src/theme/Navbar/index.js
index 6fb2869..dedba7c 100644
--- a/site2/website-next/src/theme/Navbar/index.js
+++ b/site2/website-next/src/theme/Navbar/index.js
@@ -227,6 +227,13 @@
                       getApiVersion(param),
                   };
                 });
+              } else if (item.label == "CLI") {
+                item.items = item.items.map((e) => {
+                  return {
+                    ...e,
+                    link: e.to + "?version=" + getVersion(),
+                  };
+                });
               }
               return (
                 <NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
@@ -327,6 +334,13 @@
                     getApiVersion(param),
                 };
               });
+            } else if (item.label == "CLI") {
+              item.items = item.items.map((e) => {
+                return {
+                  ...e,
+                  link: e.to + "?version=" + getVersion(),
+                };
+              });
             }
             return <NavbarItem {...item} key={i} />;
           })}