implement responsive header

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>

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;
+		}
+	}
 }