feat: implement responsive hamburger menu and enhance header layout

2025-05-20 00:52:23 +02:00
parent c00cac389c
commit edf737092a
3 changed files with 316 additions and 4 deletions
--- a/src/main.css
+++ b/src/main.css
@@ -708,3 +708,264 @@ input:checked + .toggle-slider:before {
 	font-size: 14px;
 	color: var(--text-color);
 }
+
+/* Hamburger Menu Icon */
+.hamburger {
+	display: none;
+	cursor: pointer;
+	flex-direction: column;
+	justify-content: space-around;
+	width: 30px;
+	height: 21px;
+	background: transparent;
+	border: none;
+	padding: 0;
+}
+
+.hamburger-line {
+	display: block;
+	width: 100%;
+	height: 3px;
+	background-color: var(--text-color);
+	border-radius: 10px;
+	transition: all 0.3s ease;
+}
+
+/* Responsive Header Adjustments */
+@media (max-width: 768px) {
+	.header {
+		flex-wrap: wrap;
+		padding: var(--spacing-md);
+	}
+
+	.logo {
+		flex: 1;
+	}
+
+	.hamburger {
+		display: flex;
+		order: 2;
+	}
+
+	.main-nav {
+		width: 100%;
+		order: 3;
+		height: 0;
+		overflow: hidden;
+		transition: height 0.3s ease;
+	}
+
+	.main-nav.open {
+		height: auto;
+		margin-top: var(--spacing-md);
+	}
+
+	.main-nav ul {
+		flex-direction: column;
+		width: 100%;
+		align-items: flex-start;
+		gap: var(--spacing-sm);
+	}
+
+	.main-nav ul li {
+		width: 100%;
+	}
+
+	.main-nav ul li .btn {
+		width: 100%;
+		text-align: left;
+	}
+
+	.toggle-container {
+		margin: var(--spacing-sm) 0;
+	}
+
+	/* Hamburger animation when open */
+	.hamburger.open .hamburger-line:nth-child(1) {
+		transform: translateY(9px) rotate(45deg);
+	}
+
+	.hamburger.open .hamburger-line:nth-child(2) {
+		opacity: 0;
+	}
+
+	.hamburger.open .hamburger-line:nth-child(3) {
+		transform: translateY(-9px) rotate(-45deg);
+	}
+}
+
+/* ================= RESPONSIVE DESIGN ================= */
+
+/* Base responsive layout */
+@media (max-width: 1024px) {
+	.main-content {
+		flex-direction: column;
+	}
+
+	.sidebar {
+		width: 100%;
+		height: auto;
+		position: static;
+		padding: var(--spacing-md);
+		border-right: none;
+		border-bottom: 1px solid var(--border-color);
+	}
+
+	.content-area {
+		max-width: 100%;
+		padding: var(--spacing-md);
+	}
+
+	.module-list {
+	}
+
+	.module-list-item {
+	}
+}
+
+/* Header responsiveness */
+@media (max-width: 768px) {
+	.header {
+		position: static;
+		height: auto;
+		padding: var(--spacing-md) var(--spacing-md);
+		gap: var(--spacing-md);
+	}
+
+	.main-nav ul {
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.main-content {
+		min-height: calc(100vh - 120px);
+	}
+}
+
+/* Challenge container */
+@media (max-width: 1024px) {
+	.challenge-container {
+		flex-direction: column;
+	}
+
+	.preview-area,
+	.editor-container {
+		width: 100%;
+	}
+
+	.preview-area {
+		min-height: 200px;
+	}
+}
+
+/* Text and other element responsiveness */
+@media (max-width: 768px) {
+	.lesson-description {
+		width: 100%;
+		font-size: 1rem;
+	}
+
+	.lesson-container {
+		padding: var(--spacing-md);
+	}
+
+	#lesson-title {
+		font-size: 1.5rem;
+	}
+
+	.code-input {
+		font-size: 13px;
+	}
+
+	.controls {
+		flex-wrap: wrap;
+		gap: var(--spacing-sm);
+	}
+
+	.btn {
+		padding: var(--spacing-xs) var(--spacing-sm);
+		font-size: 0.85rem;
+	}
+}
+
+/* Small screens */
+@media (max-width: 480px) {
+	.logo {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.logo h1 {
+		font-size: 1rem;
+	}
+
+	.main-nav ul {
+		gap: var(--spacing-sm);
+	}
+
+	.toggle-label {
+		font-size: 12px;
+	}
+
+	.lesson-description pre {
+		padding: var(--spacing-md);
+		font-size: 0.8rem;
+	}
+
+	.task-instruction {
+		font-size: 0.9rem;
+	}
+
+	.modal {
+		width: 95%;
+	}
+}
+
+/* Ensure code editor has minimum height */
+.code-editor {
+	min-height: 200px;
+}
+
+/* Better spacing for lesson progress in mobile */
+@media (max-width: 1024px) {
+	.lesson-progress {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: var(--spacing-xs);
+		margin-top: var(--spacing-md);
+	}
+}
+
+/* Improve validation indicators visibility */
+@media (max-width: 768px) {
+	.validation-indicators-container {
+		justify-content: flex-end;
+		flex: 1;
+	}
+
+	.editor-header {
+		flex-wrap: wrap;
+	}
+}
+
+@media (max-width: 480px) {
+	.header {
+		padding: var(--spacing-sm);
+		gap: var(--spacing-sm);
+	}
+
+	.logo {
+		flex-direction: row;
+		gap: 0.4rem;
+	}
+
+	.logo img {
+		width: 40px;
+	}
+
+	.logo h1 {
+		font-size: 0.9rem;
+	}
+}