From c0b8e19ef0a2fbfd38ab12426b7e51ca49823986 Mon Sep 17 00:00:00 2001
From: DerTyp7 <janis@tealfire.de>
Date: Tue, 10 Oct 2023 16:20:58 +0200
Subject: [PATCH] implement responsive header

---
 src/components/Header.tsx | 13 ++++++++++
 src/styles/Header.scss    | 53 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3ec23ee..6438dd4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,9 +4,22 @@ import ThemeSwitch from "@components/ThemeSwitch";
 export default function Header() {
 	return (
 		<header className="header">
+			{/* Mobile Top Row Header */}
+			<div className="header-mobile">
+				<div className="logo">
+					<h1>Meister</h1>
+				</div>
+				<div className="control">
+					<ThemeSwitch />
+					<div>Language</div>
+				</div>
+			</div>
+			{/* END: Mobile Top Row Header */}
+
 			<div className="logo">
 				<h1>Meister</h1>
 			</div>
+
 			<div className="links">
 				<a href="">About</a>
 				<a href="">Skills</a>
diff --git a/src/styles/Header.scss b/src/styles/Header.scss
index 64338bc..17fc00e 100644
--- a/src/styles/Header.scss
+++ b/src/styles/Header.scss
@@ -39,4 +39,57 @@
 		align-items: center;
 		flex: 0.5;
 	}
+
+	.header-mobile {
+		display: none; // will be set to flex on mobile/small screens
+		justify-content: space-between;
+		flex: 1;
+		width: 100%;
+		flex-direction: row;
+
+		.logo {
+			display: flex;
+		}
+
+		.control {
+			display: flex;
+			justify-content: flex-end;
+			gap: 1rem;
+		}
+	}
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		gap: 1rem;
+		.logo {
+			display: none;
+		}
+
+		.control {
+			display: none;
+		}
+		.header-mobile {
+			display: flex;
+		}
+	}
+
+	@media (max-width: 300px) {
+		.header-mobile {
+			flex-direction: column;
+			.logo {
+				justify-content: center;
+			}
+
+			.control {
+				justify-content: center;
+			}
+		}
+
+		.links {
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 1rem;
+		}
+	}
 }