add reflection of user's login state to navbar

components/Navigation/Navigation.module.scss

@@ -20,10 +20,24 @@
 		color: var(--color);
 	}
 }
+.partprofile {
+	background: rgba(255, 255, 255, 0.1);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+}
 .profile {
+	background: rgba(255, 255, 255, 0.1);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
 	margin-left: auto;
-	background: var(--color);
-	color: var(--backdrop);
+	img {
+		height: 2.3rem;
+		border-radius: 50%;
+	}
 }
 .logo {
 	padding: 0 1rem;

components/Navigation/Navigation.tsx

@@ -5,8 +5,10 @@ import { Icon } from "../Icon";
 import navigation from "../../data/navigation.json";
 import Link from "next/link";
 
+import { useUser } from "@auth0/nextjs-auth0/client";
+
 const Navigation = () => {
-	let username: string = "";
+	const { user, isLoading } = useUser();
 	return (
 		<>
 			<div className={styles.nav}>
@@ -42,20 +44,43 @@ const Navigation = () => {
 						})}
 					</div>
 				</div>
-				<a
-					href="/api/auth/login"
-					style={{ display: "flex" }}
-					className={`${styles.link} ${styles.profile}`}
-				>
-					zaloguj się
-				</a>
-				<Link
-					href=""
-					style={{ display: "none" }}
-					className={`${styles.link} ${styles.profile}`}
-				>
-					{username ? username : "twój profil"}
-				</Link>
+				{isLoading && (
+					<>
+						<Link href="/" className={`${styles.link} ${styles.profile}`}>
+							fetching danych...
+						</Link>
+					</>
+				)}
+				{!isLoading && user && (
+					<>
+						<Link href="/ja" className={`${styles.link} ${styles.profile}`}>
+							{user.picture && (
+								<img
+									src={user.picture}
+									alt={`${user.name}'s profile picture`}
+								/>
+							)}
+							{!user.picture && <Icon icon="User" />}
+							{user.nickname}
+						</Link>
+						<a
+							href="/api/auth/logout"
+							className={`${styles.link} ${styles.partprofile}`}
+						>
+							<Icon icon="LogOut" />
+						</a>
+					</>
+				)}
+				{!isLoading && !user && (
+					<a
+						href="/api/auth/login"
+						style={{ display: "flex" }}
+						className={`${styles.link} ${styles.partprofile}`}
+					>
+						zaloguj się
+						<Icon icon="LogIn" />
+					</a>
+				)}
 			</div>
 		</>
 	);