Add responsive sidebar to Header component

src/components/Burger.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import "@styles/Burger.scss";
+
+export default function Burger({ onClick }: { onClick: () => void }) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const toggleMenu = () => {
+		setIsOpen(!isOpen);
+	};
+
+	return (
+		<div
+			className={`burger ${isOpen ? "open" : ""}`}
+			onClick={() => {
+				toggleMenu();
+				onClick();
+			}}
+		>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	);
+}

src/components/Header.tsx

@@ -1,19 +1,44 @@
 import "@styles/Header.scss";
+import { useState, useEffect } from "react";
+import Burger from "@components/Burger";
+import Sidebar from "@components/Sidebar";
 
 export default function Header() {
+	const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const toggleSidebar = () => setIsOpen(!isOpen);
+
+	useEffect(() => {
+		const checkScreenSize = () => {
+			setIsSmallScreen(window.innerWidth <= 768);
+		};
+
+		window.addEventListener("resize", checkScreenSize);
+
+		return () => window.removeEventListener("resize", checkScreenSize);
+	}, []);
+
 	return (
 		<div className="header">
 			<a href="/" className="logo">
 				<span>&#123;</span>J<span>&#125;</span>
 			</a>
 
-			<nav>
-				<a className="current" href="#">
-					About
-				</a>
-				<a href="#skills">Skills</a>
-				<a href="#projects">Projects</a>
-			</nav>
+			{isSmallScreen ? (
+				<>
+					<Burger onClick={toggleSidebar} />
+					<Sidebar isOpen={isOpen} toggle={toggleSidebar} />
+				</>
+			) : (
+				<nav>
+					<a className="current" href="#">
+						About
+					</a>
+					<a href="#skills">Skills</a>
+					<a href="#projects">Projects</a>
+				</nav>
+			)}
 		</div>
 	);
 }

src/components/Sidebar.tsx

@@ -0,0 +1,23 @@
+import "@styles/Sidebar.scss";
+
+export default function Sidebar({
+	isOpen,
+	toggle,
+}: {
+	isOpen: boolean;
+	toggle: () => void;
+}) {
+	return (
+		<div className={`sidebar ${isOpen ? "open" : ""}`}>
+			<a href="#" onClick={toggle}>
+				About
+			</a>
+			<a href="#skills" onClick={toggle}>
+				Skills
+			</a>
+			<a href="#projects" onClick={toggle}>
+				Projects
+			</a>
+		</div>
+	);
+}

src/styles/Burger.scss

@@ -0,0 +1,50 @@
+.burger {
+	width: 2rem;
+	height: 2rem;
+	position: fixed;
+	top: 15px;
+	right: 20px;
+	z-index: 20;
+	display: flex;
+	justify-content: space-around;
+	flex-flow: column nowrap;
+	cursor: pointer;
+
+	div {
+		width: 2rem;
+		height: 0.25rem;
+		background-color: var(--color-font);
+		border-radius: 10px;
+		transform-origin: 1px;
+		transition: all 200ms linear;
+
+		&:nth-child(1) {
+			transform: rotate(0);
+		}
+
+		&:nth-child(2) {
+			opacity: 1;
+		}
+
+		&:nth-child(3) {
+			transform: rotate(0);
+		}
+	}
+
+	&.open {
+		div {
+			background-color: var(--color-accent);
+			&:nth-child(1) {
+				transform: rotate(45deg);
+			}
+
+			&:nth-child(2) {
+				opacity: 0;
+			}
+
+			&:nth-child(3) {
+				transform: rotate(-45deg);
+			}
+		}
+	}
+}

src/styles/Header.scss

@@ -28,7 +28,7 @@
 		justify-content: center;
 		gap: 50px;
 		a {
-			color: #fff;
+			color: var(--color-font);
 			text-decoration: none;
 			font-size: 1.2rem;
 			font-weight: 500;

src/styles/Sidebar.scss

@@ -0,0 +1,35 @@
+.sidebar {
+	position: fixed;
+	top: 0;
+	right: 0;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	background-color: var(--color-background-sidebar);
+	transform: translateX(100%);
+	transition: transform 100ms ease-in-out;
+
+	&.open {
+		transform: translateX(0);
+	}
+
+	a {
+		font-size: 2rem;
+		text-transform: uppercase;
+		padding: 2rem;
+		font-weight: bold;
+		letter-spacing: 0.5rem;
+		color: var(--color-font);
+		text-decoration: none;
+		transition: color 50ms linear;
+
+		&:hover {
+			color: var(--color-accent);
+		}
+	}
+
+	@media (max-width: 768px) {
+		width: 100%;
+	}
+}

src/styles/index.scss

@@ -2,7 +2,6 @@
 
 :root {
 	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	// line-height: 1.5;
 	font-weight: 400;
 
 	color-scheme: light dark;

src/styles/variables_colors.scss

@@ -3,14 +3,11 @@
 
 	--color-background-body: #000000;
 	--color-background-header: transparent;
+	--color-background-sidebar: #1a1a1a;
 
 	--color-font: #ffffff;
-	--color-font-link-header: #1c1c1c;
-	--color-font-link-header-hover: #000;
 
 	--color-border: #1c1c1c;
-	--color-border-link-header: transparent;
-	--color-border-link-header-hover: var(--color-accent);
 
 	--color-danger: #cf000f;
 	--color-success: #009944;