Updated the Navbar to look more like the rest of the design

src/components/Navbar.tsx

@@ -1,6 +1,8 @@
 import axios from "axios";
 import Link from "next/link";
 import {useRouter} from "next/router";
+import {Menubar} from "primereact/menubar";
+import {MenuItem} from "primereact/menuitem";
 
 interface Props {
 	profilePicture: string;
@@ -16,38 +18,40 @@ export default function Navbar({profilePicture}: Props) {
 		});
 	};
 
+	const items: MenuItem[] = [
+		{
+			label: "Home",
+			icon: "pi pi-fw pi-home",
+			url: "/",
+		},
+		{
+			label: "Account",
+			icon: "pi pi-fw pi-user",
+			url: "/profile",
+		},
+		{
+			label: "Exam",
+			icon: "pi pi-fw pi-plus-circle",
+			url: "/exam",
+		},
+		{
+			label: "Users",
+			icon: "pi pi-fw pi-users",
+			items: [
+				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
+				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/user-stats"},
+			],
+		},
+		{
+			label: "Logout",
+			icon: "pi pi-fw pi-power-off",
+			command: logout,
+		},
+	];
+
 	return (
-		<div className="navbar bg-neutral-100 drop-shadow-md text-black z-10">
+		<div className="bg-neutral-100 z-10 w-full p-2">
-			<div className="flex-1">
+			<Menubar model={items} />
-				<Link className="btn btn-ghost normal-case text-xl" href="/">
-					IELTS GPT
-				</Link>
-			</div>
-			<div className="flex-none gap-2">
-				<div className="form-control">
-					<input type="text" placeholder="Search" className="input input-bordered bg-white" />
-				</div>
-				<div className="dropdown dropdown-end">
-					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-						<div className="w-10 rounded-full">
-							<img src={profilePicture} alt="Profile picture" />
-						</div>
-					</label>
-					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
-						<li>
-							<Link href="/profile" className="justify-between">
-								Profile
-							</Link>
-						</li>
-						<li>
-							<a>Settings</a>
-						</li>
-						<li>
-							<a onClick={logout}>Logout</a>
-						</li>
-					</ul>
-				</div>
-			</div>
 		</div>
 	);
 }