Fix sidebar width; Add way to change active item on sidebar

src/cryptometrics/components/sidebar/Sidebar.js

@@ -4,9 +4,9 @@ import Link from "next/link";
 import classNames from "classnames";
 import { ChartBarIcon, GlobeIcon } from "@heroicons/react/outline";
 
-function Sidebar() {
+function Sidebar({ active }) {
   return (
-    <div className="w-64 dark:text-white">
+    <div className="w-64 min-w-[16rem] dark:text-white">
       {/* Sidebar Head */}
       <span className="flex justify-center items-center mt-5" id="crypto-logo">
         <Image
@@ -27,13 +27,13 @@ function Sidebar() {
             title="Home"
             icon={<GlobeIcon className="w-6 h-6" />}
             to="/"
-            active={true}
+            active={active === "home"}
           />
           <SidebarItem
             title="Compare"
             icon={<ChartBarIcon className="w-6 h-6" />}
-            to="/map"
-            active={false}
+            to="/compare"
+            active={active === "compare"}
           />
         </nav>
       </div>

src/cryptometrics/pages/index.js

@@ -47,7 +47,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Wrapper>
-        <Sidebar />
+        <Sidebar active="home" />
         <Main>
           <Container>
             {/* Header */}