Add sidebar; modify theme

src/cryptometrics/components/content/Container.js

@@ -2,7 +2,7 @@ import React from "react";
 
 function Container(props) {
   return (
-    <div className="container mx-auto pt-8 p-2 sm:p-8 md:p-16">
+    <div className="container mx-auto pt-8 p-2 sm:p-8 md:py-16 md:pr-16 md:pl-4">
       {props.children}
     </div>
   );

src/cryptometrics/components/content/Wrapper.js

+import React from "react";
+
+function Wrapper(props) {
+  return <div className="flex h-screen">{props.children}</div>;
+}
+
+export default Wrapper;

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";
+
+function Sidebar() {
+  return (
+    <div className="w-64 dark:text-white">
+      {/* Sidebar Head */}
+      <span className="flex justify-center items-center mt-5" id="crypto-logo">
+        <Image
+          className=""
+          src="/crypto_logo.png"
+          width="230%"
+          height="100%"
+          objectFit="contain"
+          alt="CryptoMetrics-logo-large"
+          priority={true}
+        />
+      </span>
+
+      {/* Sidebar Navigation */}
+      <div className="flex flex-col overflow-x-hidden flex-grow">
+        <nav className="ml-1 my-8 cursor-pointer px-2">
+          <SidebarItem
+            title="Home"
+            icon={<GlobeIcon className="w-6 h-6" />}
+            to="/"
+            active={true}
+          />
+          <SidebarItem
+            title="Compare"
+            icon={<ChartBarIcon className="w-6 h-6" />}
+            to="/map"
+            active={false}
+          />
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+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/titles/BoldGradientHeading.js

@@ -2,7 +2,7 @@ import React from "react";
 
 function BoldGradientHeading({ children }) {
   return (
-    <h1 className="text-4xl font-extrabold font-poppins text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-500">
+    <h1 className="text-3xl font-extrabold font-poppins text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-500">
       {children}
     </h1>
   );

src/cryptometrics/styles/globals.css

@@ -5,3 +5,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  html {
+    @apply bg-dark-800;
+  }
+}

src/cryptometrics/tailwind.config.js

@@ -20,9 +20,10 @@ module.exports = {
       },
       colors: {
         dark: {
-          700: "#242731",
-          800: "#1f2128",
-          900: "#191b20",
+          600: "#121418",
+          700: "#111317",
+          800: "#080808",
+          900: "#000",
         },
       },
     },