Use hamburger menu for mobile devices

mhmmdshirazi · mhmmdshirazi · commit d95277481d02 · 2025-04-17T21:52:32.000+02:00
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -15,13 +15,43 @@ const { title = "Immortals Robotics Team" } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title} | Immortals SSL</title>
 		<meta name="description" content="Immortals Small Size League robotics team, founded in 2008 and participating in RoboCup competitions worldwide." />
+		<script>
+			// Toggle menu functionality
+			document.addEventListener('DOMContentLoaded', () => {
+				const hamburger = document.querySelector('.hamburger-menu');
+				const navLinks = document.querySelector('.nav-links');
+
+				if (hamburger && navLinks) {
+					hamburger.addEventListener('click', () => {
+						hamburger.classList.toggle('active');
+						navLinks.classList.toggle('active');
+						document.body.classList.toggle('menu-open');
+					});
+
+					// Close menu when a link is clicked
+					const links = navLinks.querySelectorAll('a');
+					links.forEach(link => {
+						link.addEventListener('click', () => {
+							hamburger.classList.remove('active');
+							navLinks.classList.remove('active');
+							document.body.classList.remove('menu-open');
+						});
+					});
+				}
+			});
+		</script>
 	</head>
 	<body>
 		<header>
 			<nav>
 				<div class="logo">
 					<a href="/"><img src="/assets/logo.png" alt="Immortals Logo" height="60" /></a>
 				</div>
+				<button class="hamburger-menu" aria-label="Toggle navigation menu">
+					<span></span>
+					<span></span>
+					<span></span>
+				</button>
 				<ul class="nav-links">
 					<li><a href="/">Home</a></li>
 					<li><a href="/about">About</a></li>
@@ -161,16 +191,83 @@ const { title = "Immortals Robotics Team" } = Astro.props;
 		text-decoration: none;
 	}
 	
+	/* Hamburger menu styles */
+	.hamburger-menu {
+		display: none;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		z-index: 10;
+	}
+	
+	.hamburger-menu span {
+		display: block;
+		width: 25px;
+		height: 3px;
+		background-color: var(--light);
+		margin: 5px 0;
+		transition: all 0.3s ease;
+		border-radius: 3px;
+	}
+	
 	@media (max-width: 768px) {
 		nav {
-			flex-direction: column;
-			gap: 1rem;
+			justify-content: space-between;
+			position: relative;
+		}
+		
+		.hamburger-menu {
+			display: block;
 		}
 		
 		.nav-links {
+			position: fixed;
+			top: 0;
+			right: -100%;
+			width: 70%;
+			max-width: 300px;
+			height: 100vh;
+			background-color: var(--primary);
 			flex-direction: column;
-			align-items: center;
-			gap: 0.5rem;
+			padding: 80px 30px 30px;
+			transition: right 0.3s ease;
+			box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+			z-index: 5;
+			justify-content: flex-start;
+			align-items: flex-start;
+		}
+		
+		.nav-links.active {
+			right: 0;
+		}
+		
+		.nav-links li {
+			width: 100%;
+			margin-bottom: 1.5rem;
+		}
+		
+		.nav-links a {
+			display: block;
+			font-size: 1.1rem;
+		}
+		
+		/* Hamburger menu animation */
+		.hamburger-menu.active span:nth-child(1) {
+			transform: rotate(45deg) translate(5px, 5px);
+		}
+		
+		.hamburger-menu.active span:nth-child(2) {
+			opacity: 0;
+		}
+		
+		.hamburger-menu.active span:nth-child(3) {
+			transform: rotate(-45deg) translate(7px, -7px);
+		}
+		
+		/* Prevent scrolling when menu is open */
+		body.menu-open {
+			overflow: hidden;
 		}
 	}
 </style>
