Add responsive sidebar to Header component

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;