docs: enhance navigation UI with improved theme components (#438)

docusaurus.config.ts

@@ -175,7 +175,7 @@ const config: Config = {
 			"classic",
 			{
 				docs: {
-					editUrl: "https://github.com/coderabbitai/coderabbit-docs/edit/main/",
+					editUrl: () => null,
 					sidebarPath: "./sidebars.ts",
 					path: "docs",
 					routeBasePath: "/",
@@ -221,6 +221,10 @@ const config: Config = {
 			src: "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.min.js",
 			async: true,
 		},
+		{
+			src: "/js/navbar-theme.js",
+			async: true,
+		},
 	],
 
 	themeConfig: {
@@ -253,11 +257,6 @@ const config: Config = {
 					to: "/",
 					className: "navbar-link-active",
 				},
-				{
-					href: "https://coderabbit.ai/blog",
-					label: "Blog",
-					position: "left",
-				},
 				{
 					href: "https://discord.gg/coderabbit",
 					className: "navbar-icon-link discord-link",
@@ -270,6 +269,17 @@ const config: Config = {
 					"aria-label": "GitHub",
 					position: "right",
 				},
+				{
+					type: "html",
+					position: "right",
+					value:
+						'<div class="navbar__item"><button class="clean-btn navbar__item navbar-theme-toggle" type="button" aria-label="Switch between dark and light mode" tabindex="0"></button></div>',
+				},
+				{
+					href: "https://coderabbit.ai/blog",
+					label: "Blog",
+					position: "right",
+				},
 			],
 		},
 		prism: {

src/components/SidebarSearch.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import SearchBar from '@theme/SearchBar';
+
+export default function SidebarSearch(): JSX.Element {
+  return (
+    <div className="sidebar-search-container">
+      <SearchBar />
+    </div>
+  );
+}