Make sidebar modular

src/cryptometrics/components/sidebar/Sidebar.js

 import React from "react";
 import Image from "next/image";
-import Link from "next/link";
-import classNames from "classnames";
 import { ChartBarIcon, GlobeIcon } from "@heroicons/react/outline";
+import SidebarItem from "./SidebarItem";
 
 function Sidebar({ active }) {
   return (
@@ -41,25 +40,4 @@ function Sidebar({ active }) {
   );
 }
 
-function SidebarItem({ title, icon, active, to }) {
-  return (
-    <Link href={to} passHref>
-      <a
-        className={classNames(
-          `flex items-center h-[56px] rounded-xl whitespace-nowrap font-semibold mx-2 px-4 transition-all duration-200 text-gray-500 dark:text-gray-300 select-none hover:bg-gray-100 hover:bg-opacity-40 my-1 dark:bg-dark-800 dark:hover:bg-dark-700 dark:hover:text-gray-200`,
-          {
-            "text-blue-600 dark:text-blue-600 hover:dark:text-blue-600 bg-gray-200 bg-opacity-40 dark:bg-dark-700 border-2 border-blue-500":
-              active,
-          }
-        )}
-      >
-        <div className="relative flex justify-center items-center flex-shrink-0 text-[0]">
-          {icon}
-        </div>
-        <div className="ml-4">{title}</div>
-      </a>
-    </Link>
-  );
-}
-
 export default Sidebar;

src/cryptometrics/components/sidebar/SidebarItem.js

+import classNames from "classnames";
+import Link from "next/link";
+import React from "react";
+
+function SidebarItem({ title, icon, active, to }) {
+  return (
+    <Link href={to} passHref>
+      <a
+        className={classNames(
+          `flex items-center h-[56px] rounded-xl whitespace-nowrap font-semibold mx-2 px-4 transition-all duration-200 text-gray-500 dark:text-gray-300 select-none hover:bg-gray-100 hover:bg-opacity-40 my-1 dark:bg-dark-800 dark:hover:bg-dark-700 dark:hover:text-gray-200`,
+          {
+            "text-blue-600 dark:text-blue-600 hover:dark:text-blue-600 bg-gray-200 bg-opacity-40 dark:bg-dark-700 border-2 border-blue-500":
+              active,
+          }
+        )}
+      >
+        <div className="relative flex justify-center items-center flex-shrink-0 text-[0]">
+          {icon}
+        </div>
+        <div className="ml-4">{title}</div>
+      </a>
+    </Link>
+  );
+}
+
+export default SidebarItem;