Updated the timer to be on the Navbar, making it more mobile friendly

src/components/LevelProgressBar.tsx

@@ -7,7 +7,7 @@ interface Props {
 	progressBarWidth?: string;
 }
 
-export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) {
+export default function LevelProgressBar({experience, className, progressBarWidth = "w-32 md:w-64"}: Props) {
 	const levelResult = levelCalculator(experience);
 
 	return (

src/components/Navbar.tsx

@@ -6,10 +6,11 @@ import {MenuItem} from "primereact/menuitem";
 
 interface Props {
 	profilePicture: string;
+	timer?: number;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({profilePicture}: Props) {
+export default function Navbar({profilePicture, timer}: Props) {
 	const router = useRouter();
 
 	const logout = async () => {
@@ -49,9 +50,17 @@ export default function Navbar({profilePicture}: Props) {
 		},
 	];
 
+	const end = timer && (
+		<span className="pr-2 font-semibold">
+			{Math.floor(timer / 60) < 10 ? "0" : ""}
+			{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
+			{timer % 60}
+		</span>
+	);
+
 	return (
 		<div className="bg-neutral-100 z-10 w-full p-2">
-			<Menubar model={items} />
+			<Menubar model={items} end={end} />
 		</div>
 	);
 }