KI-8 Navbar Component

package.json

@@ -18,8 +18,10 @@
     "@emotion/react": "^11.14.0",
     "mongoose": "^8",
     "next": "^14.2.35",
+    "next-themes": "^0.4.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/dashboard/page.tsx

@@ -0,0 +1 @@
+export default function Dashboard() {}

src/app/home/page.tsx

@@ -0,0 +1 @@
+export default function Home() {}

src/components/Navbar.tsx

@@ -1,3 +1,28 @@
+import { Button, Link, Text } from "@chakra-ui/react";
+
 export default function Navbar() {
-  return <div>Navbar</div>;
+  return (
+    <header className="navbar">
+      <nav className="navList">
+        <Link href="/home">
+          <Button className="home">
+            <Text>Home</Text>
+          </Button>
+        </Link>
+        <Link href="/dashboard">
+          <Button className="dashboard">
+            <Text>Dashboard</Text>
+          </Button>
+        </Link>
+        <Link href="/profile">
+          <Button className="profile">
+            <Text>Profile</Text>
+          </Button>
+        </Link>
+        <Button className="signOut" onClick={undefined}>
+          <Text>Sign-out</Text>
+        </Button>
+      </nav>
+    </header>
+  );
 }