navigation from config + further mobile tweaks

components/Navigation/Navigation.module.scss

@@ -34,3 +34,18 @@
 		transform: scale(1.1);
 	}
 }
+
+.mobile {
+	display: none;
+}
+@media screen and (max-width: 800px) {
+	.nav {
+		min-height: 3rem;
+	}
+	.desktop {
+		display: none;
+	}
+	.mobile {
+		display: inherit;
+	}
+}

components/Navigation/Navigation.tsx

@@ -2,34 +2,39 @@ import styles from "./Navigation.module.scss";
 import GractwoLogo from "../logo";
 import Link from "next/link";
 
+import config from "../../data/config.json";
+
 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>
+				<GractwoLogo className={`${styles.logo} ${styles.desktop}`} />
+				{/* <GractwoLogo
+					width={48}
+					height={48}
+					className={`${styles.logo} ${styles.mobile}`}
+				/> */}
+				{config.navigation.map((navlink) => {
+					return (
 						<Link
-					href="/"
+							key={`desktop${navlink.href}`}
+							href={navlink.href}
+							className={`${styles.link} ${styles.desktop}`}
+						>
+							{navlink.name}
+						</Link>
+					);
+				})}
+				<Link
+					href=""
 					style={{ display: "flex" }}
 					className={`${styles.link} ${styles.profile}`}
 				>
 					zaloguj się
 				</Link>
 				<Link
-					href="/"
+					href=""
 					style={{ display: "none" }}
 					className={`${styles.link} ${styles.profile}`}
 				>

data/config.json

@@ -45,6 +45,24 @@
 			"author": "mollin"
 		}
 	],
+	"navigation": [
+		{
+			"name": "główna",
+			"href": "/"
+		},
+		{
+			"name": "o gractwie",
+			"href": "/o-gractwie"
+		},
+		{
+			"name": "cytaty",
+			"href": "/cytaty"
+		},
+		{
+			"name": "rankingi",
+			"href": "/rankingi"
+		}
+	],
 	"links": [
 		{
 			"name": "Discord",