From 0894c2c4d0b4b68357f332d85b4b6bafc6d69c13 Mon Sep 17 00:00:00 2001
From: Zenowing <zenowing@Dhruvs-MacBook-Pro.local>
Date: Sun, 22 Feb 2026 11:08:28 +0530
Subject: [PATCH] feat: add close button to mobile navbar #657

---
 .../src/scaffolding/Header/Header.tsx         |  9 ++++++++-
 .../src/scaffolding/Header/header.scss        | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/application/frontend/src/scaffolding/Header/Header.tsx b/application/frontend/src/scaffolding/Header/Header.tsx
index 1b36dd721..89e34336f 100644
--- a/application/frontend/src/scaffolding/Header/Header.tsx
+++ b/application/frontend/src/scaffolding/Header/Header.tsx
@@ -1,6 +1,6 @@
 import './header.scss';
 
-import { Menu, Search } from 'lucide-react';
+import { Menu, Search, X } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
@@ -128,6 +128,13 @@ export const Header = () => {
       <div className={`navbar__overlay ${isMobileMenuOpen ? 'is-open' : ''}`} onClick={closeMobileMenu}></div>
 
       <div className={`navbar__mobile-menu ${isMobileMenuOpen ? 'is-open' : ''}`}>
+        <button 
+     className="navbar__mobile-menu-close" 
+     onClick={closeMobileMenu}
+     aria-label="Close mobile menu"
+    >
+     <X className="mobile-close-icon" />
+   </button>
         <div className="mobile-search-container">
           <SearchBar />
         </div>
diff --git a/application/frontend/src/scaffolding/Header/header.scss b/application/frontend/src/scaffolding/Header/header.scss
index 4e3ef7316..6794680cb 100644
--- a/application/frontend/src/scaffolding/Header/header.scss
+++ b/application/frontend/src/scaffolding/Header/header.scss
@@ -335,3 +335,22 @@
   white-space: nowrap;
   border: 0;
 }
+.navbar__mobile-menu-close {
+  display: flex;
+  margin-left: auto; /* Pushes it to the right */
+  margin-bottom: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  
+  .mobile-close-icon {
+    color: #ffffff;
+    width: 28px;
+    height: 28px;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
\ No newline at end of file