✨ Add responsive Navbar

styles/Navbar.module.scss

@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
+
+.Navbar {
+	height: 100px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	flex-direction: row;
+	border-bottom: 1px solid #eaeaea;
+	.container {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		flex-direction: row;
+
+		.Logo {
+			width: 200px;
+			margin: 1rem;
+		}
+		.MenuToggle {
+			transition: all 0.5s;
+			span {
+				display: block;
+				width: 33px;
+				height: 4px;
+				margin-bottom: 5px;
+				position: relative;
+
+				background: #cdcdcd;
+				border-radius: 3px;
+
+				z-index: 1;
+
+				transform-origin: 4px 0px;
+
+				transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+					background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
+			}
+
+			span:first-child {
+				transform-origin: 0% 0%;
+			}
+
+			span:nth-last-child(2) {
+				transform-origin: 0% 100%;
+			}
+		}
+
+		.MenuActive {
+			transform: rotate(90deg);
+		}
+	}
+
+	.Nav {
+		font-family: "Poppins", sans-serif;
+		font-size: 1.2rem;
+		font-weight: 600;
+
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		a {
+			padding: 1rem;
+			transition: all 0.2s;
+			&:hover {
+				cursor: pointer;
+				color: #057ca6;
+			}
+		}
+	}
+	.MenuOpen {
+		width: 100%;
+		display: flex !important;
+		position: absolute;
+		top: 100px;
+		background-color: #057ca6;
+		color: white;
+	}
+}
+
+//Normal devices
+@media (min-width: 768px) {
+	.container {
+		width: auto;
+		.MenuToggle {
+			display: none;
+		}
+	}
+}
+//Small devices
+@media (max-width: 768px) {
+	.Navbar .Nav {
+		flex-direction: column;
+		display: none;
+	}
+	.Navbar {
+		flex-direction: column;
+	}
+	.container {
+		width: 100%;
+		.MenuToggle {
+			display: block;
+		}
+	}
+}