fix: enhance mobile hamburger

Signed-off-by: Abhijeet Saharan <abhijeetsaharan2236@gmail.com>

Author: Abhijeet2409

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';
@@ -135,6 +135,9 @@ export const Header = ({ capabilities }: HeaderProps) => {
       <div className={`navbar__overlay ${isMobileMenuOpen ? 'is-open' : ''}`} onClick={closeMobileMenu}></div>
 
       <div className={`navbar__mobile-menu ${isMobileMenuOpen ? 'is-open' : ''}`}>
+        <button className="mobile-menu-close" onClick={closeMobileMenu}>
+          <X size={24} />
+        </button>
         <div className="mobile-search-container">
           <SearchBar />
         </div>

application/frontend/src/scaffolding/Header/header.scss

@@ -173,12 +173,23 @@
   }
 }
 
+.mobile-menu-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: white;
+  z-index:100;
+}
+
 .navbar__mobile-menu {
   position: fixed;
   top: 0;
   right: 0;
   width: 300px;
-  height: 100%;
+  height: fit-content;
   background-color: var(--background);
   border-left: 1px solid var(--border);
   padding: 1rem;