update navbar

andy89923 · Jan 12, 2023 · 9de4fb2 · 9de4fb2
1 parent 4de0715
commit 9de4fb2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/movis/src/components/Navbar.tsx b/movis/src/components/Navbar.tsx
@@ -4,37 +4,43 @@ import Link from "next/link";
 
 import { api } from "../utils/api";
 import DataRangeComp from "./DataRangeComp";
-
-// Navigation Element
-const Navigation: React.FC<{ title: string; url: string }> = (props) => {
-  return (
-    <Link
-      href={props.url}
-      className="font-bold hover:text-[hsl(295,32%,69%)]"
-      key={props.title}
-    >
-      {props.title}
-    </Link>
-  );
-};
+import { IoAnalytics } from "react-icons/io5";
+import { HiUserGroup } from "react-icons/hi2";
+import { RiBubbleChartFill } from "react-icons/ri";
+import { AiFillHome } from "react-icons/ai";
 
 export default function Navbar() {
   return (
     <div className="sticky top-0 z-10 flex h-20 flex-row items-center justify-between bg-black px-20 text-white">
+      <Link href="/" className="flex items-center text-4xl font-bold">
+        <AiFillHome className="mr-2 h-8 w-8" />
+        Mo<span className="text-[hsl(280,100%,70%)]">Vis</span>
+      </Link>
       <div className="page-nav flex flex-row items-center gap-6">
-        <div className="brand mr-4">
-          <Link href="/" className="text-2xl font-bold">
-            Mo<span className="text-[hsl(280,100%,70%)]">Vis</span>
-          </Link>
-        </div>
-        <Navigation title="Overview" url="/overview" />
-        <Navigation title="Company Comparison" url="/compare" />
-        <Navigation title="Relation Analysis" url="/relation" />
-        <Navigation title="Playground" url="/playground" />
-        <Navigation title="CTFangLand" url="/ctfangland" />
-        <Navigation title="F315" url="/f315" />
+        <Link
+          href="/overview"
+          className="flex items-center space-x-2 align-middle text-xl font-bold hover:text-[hsl(295,32%,69%)]"
+        >
+          <IoAnalytics className="h-8 w-8" />
+          <span>Overview</span>
+        </Link>
+        <Link
+          href="/compare"
+          className="flex items-center space-x-2 align-middle text-xl font-bold hover:text-[hsl(295,32%,69%)]"
+        >
+          <HiUserGroup className="h-8 w-8" />
+          <span>Company Comparison</span>
+        </Link>
+        <Link
+          href="/relation"
+          className="flex items-center space-x-2 align-middle text-xl font-bold hover:text-[hsl(295,32%,69%)]"
+        >
+          <RiBubbleChartFill className="h-8 w-8" />
+          <span>Relation Analysis</span>
+        </Link>
       </div>
-      <div className="user-settings flex flex-row gap-4">
+      <div className="flex flex-col items-start align-middle text-sm">
+        <span>Select comparison time period:</span>
         <DataRangeComp />
       </div>
     </div>

diff --git a/movis/src/pages/index.tsx b/movis/src/pages/index.tsx
@@ -5,7 +5,7 @@ import Navbar from "../components/Navbar";
 import { api } from "../utils/api";
 import { useContext } from "react";
 import { IoAnalytics } from "react-icons/io5";
-import { HiUserGroup } from "react-icons/hi";
+import { HiUserGroup } from "react-icons/hi2";
 import { RiBubbleChartFill } from "react-icons/ri";
 
 import DataRangeComp from "../components/DataRangeComp";
@@ -72,7 +72,7 @@ const Home: NextPage = () => {
               </Link>
 
               <Link
-                href="/f315"
+                href="/compare"
                 type="button"
                 className="inline-flex flex-1 items-center space-x-5 border border-gray-200 bg-white/50 bg-white px-8 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700"
               >