day one

components/Navigation/Navigation.module.scss

@@ -0,0 +1,36 @@
+.nav {
+	display: flex;
+	background-color: var(--black1);
+	min-height: 4rem;
+}
+.link {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: inherit;
+	text-decoration: none;
+	padding: 0 2rem;
+	height: auto;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		color: var(--color);
+	}
+}
+.profile {
+	margin-left: auto;
+	background: var(--color);
+	color: var(--backdrop);
+}
+.logo {
+	padding: 0 1rem;
+	transition-duration: 100ms;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		cursor: pointer;
+	}
+	&:active {
+		transform: scale(1.1);
+	}
+}

components/Navigation/Navigation.tsx

@@ -0,0 +1,43 @@
+import styles from "./Navigation.module.scss";
+import GractwoLogo from "../logo";
+import Link from "next/link";
+
+const PageNavigation = () => {
+	let username: string = "";
+	return (
+		<>
+			<div className={styles.nav}>
+				<GractwoLogo className={styles.logo} />
+				{/* <h1 className={styles.wordmark}>Gractwo!</h1> */}
+				<Link href="/" className={styles.link}>
+					główna
+				</Link>
+				<Link href="/o-gractwie" className={styles.link}>
+					o gractwie
+				</Link>
+				<Link href="/cytaty" className={styles.link}>
+					cytaty
+				</Link>
+				<Link href="/rankingi" className={styles.link}>
+					rankingi
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "flex" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					zaloguj się
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "none" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					{username ? username : "twój profil"}
+				</Link>
+			</div>
+		</>
+	);
+};
+
+export default PageNavigation;