fix(mobile-navbar): add close button + improved drawer layout (#646)

application/frontend/src/scaffolding/Header/Header.tsx

@@ -2,7 +2,7 @@ import './header.scss';
 
 import { Menu, Search } from 'lucide-react';
 import React, { useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import { Button } from 'semantic-ui-react';
 
 import { ClearFilterButton } from '../../components/FilterButton/FilterButton';
@@ -24,6 +24,14 @@ export const Header = () => {
     setIsMobileMenuOpen(false);
   };
 
+
+
+  const location = useLocation();
+  const currentPath = location.pathname;
+  const isActive = (path: string) => currentPath === path;
+
+
+
   return (
     <>
       <nav className="navbar">
@@ -34,22 +42,42 @@ export const Header = () => {
             </Link>
 
             <div className="navbar__desktop-links">
-              <Link to="/" className="nav-link">
-                Home
-              </Link>
-              <a href="/root_cres" className="nav-link">
-                Browse
-              </a>
-              <Link to="/chatbot" className="nav-link">
-                Chat
-              </Link>
-              <a href="/map_analysis" className="nav-link">
-                Map Analysis
-              </a>
-              <a href="/explorer" className="nav-link">
-                Explorer
-              </a>
-            </div>
+  <Link 
+    to="/" 
+    className={`nav-link ${isActive('/') ? 'active' : ''}`}
+  >
+    Home
+  </Link>
+
+  <a 
+    href="/root_cres" 
+    className={`nav-link ${isActive('/root_cres') ? 'active' : ''}`}
+  >
+    Browse
+  </a>
+
+  <Link 
+    to="/chatbot" 
+    className={`nav-link ${isActive('/chatbot') ? 'active' : ''}`}
+  >
+    Chat
+  </Link>
+
+  <a 
+    href="/map_analysis" 
+    className={`nav-link ${isActive('/map_analysis') ? 'active' : ''}`}
+  >
+    Map Analysis
+  </a>
+
+  <a 
+    href="/explorer" 
+    className={`nav-link ${isActive('/explorer') ? 'active' : ''}`}
+  >
+    Explorer
+  </a>
+</div>
+
 
             <div>
               <SearchBar />
@@ -103,68 +131,56 @@ export const Header = () => {
 
       <div className={`navbar__overlay ${isMobileMenuOpen ? 'is-open' : ''}`} onClick={closeMobileMenu}></div>
 
-      <div className={`navbar__mobile-menu ${isMobileMenuOpen ? 'is-open' : ''}`}>
-        <div className="mobile-search-container">
-          <SearchBar />
-        </div>
-        {showFilter && currentUrlParams.has('showButtons') ? (
-          <div className="foo">
-            <Button
-              onClick={() => {
-                HandleDoFilter();
-              }}
-              content="Apply Filters"
-            ></Button>
-            <ClearFilterButton />
-          </div>
-        ) : (
-          ''
-        )}
-
-        <div className="mobile-nav-links">
-          <Link to="/" className="nav-link" onClick={closeMobileMenu}>
-            Home
-          </Link>
-          <a href="/root_cres" className="nav-link" onClick={closeMobileMenu}>
-            Browse
-          </a>
-          <Link to="/chatbot" className="nav-link" onClick={closeMobileMenu}>
-            Chat
-          </Link>
-          <a href="/map_analysis" className="nav-link" onClick={closeMobileMenu}>
-            Map Analysis
-          </a>
-          <a href="/explorer" className="nav-link" onClick={closeMobileMenu}>
-            Explorer
-          </a>
-        </div>
+    <div 
+  className={`navbar__mobile-menu ${isMobileMenuOpen ? 'is-open' : ''}`}
+>
+
+  {/* Top: Logo + Close */}
+  <div className="mobile-menu-header">
+    <img src="/logo.svg" alt="Logo" className="mobile-logo" />
+    <button
+      className="mobile-close-btn"
+      onClick={closeMobileMenu}
+      aria-label="Close menu"
+    >
+      ✕
+    </button>
+  </div>
+
+  {/* Search Bar */}
+  <div className="mobile-search-container">
+    <SearchBar />
+  </div>
+
+  {/* Filters */}
+  {showFilter && currentUrlParams.has('showButtons') ? (
+    <div className="mobile-filter-container">
+      <Button onClick={HandleDoFilter} content="Apply Filters" />
+      <ClearFilterButton />
+    </div>
+  ) : null}
+
+  {/* Navigation Links */}
+  <div className="mobile-nav-section">
+
+    <hr/>
+    <div className="mobile-nav-links">
+      <Link to="/" className="nav-link" onClick={closeMobileMenu}>Home</Link>
+      <a href="/root_cres" className="nav-link" onClick={closeMobileMenu}>Browse</a>
+      <Link to="/chatbot" className="nav-link" onClick={closeMobileMenu}>Chat</Link>
+      <a href="/map_analysis" className="nav-link" onClick={closeMobileMenu}>Map Analysis</a>
+      <a href="/explorer" className="nav-link" onClick={closeMobileMenu}>Explorer</a>
+    </div>
+  </div>
+
+  {/* Footer Section */}
+  <div className="mobile-menu-footer">
+    <span className="footer-text">OpenCRE © 2025</span>
+  </div>
+
+</div>
 
-        <div className="mobile-auth">
-          {/* <div className="auth-buttons">
-            <Link
-              to={{
-                pathname: '/auth',
-                state: { mode: 'login' },
-              }}
-              className="btn btn--ghost"
-              onClick={closeMobileMenu}
-            >
-              Log In
-            </Link>
 
-            <Link
-              to={{
-                pathname: '/auth',
-                state: { mode: 'signup' },
-              }}
-              className="btn btn--primary"
-              onClick={closeMobileMenu}
-            >
-              Sign Up
-            </Link>
-          </div> */}
-        </div>
-      </div>
     </>
   );
 };

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

@@ -301,3 +301,113 @@
     display: block;
   }
 }
+
+.nav-link.active {
+  color: #ffffff !important;      
+  font-weight: 600;               
+  border-bottom: 2px solid #ffffff;  
+  padding-bottom: 3px;           
+}
+
+.nav-link {
+  transition: all 0.2s ease;
+}
+
+
+
+
+/* Drawer container (AUTO HEIGHT NOW) */
+.navbar__mobile-menu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 82%;
+  max-width: 320px;
+  background: rgba(20, 20, 25, 0.85);
+  backdrop-filter: blur(12px);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 18px 18px 25px;
+  border-radius: 0 0 0 14px;   /* Rounded bottom-left corner */
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  z-index: 2001;
+
+  height: auto;       /* ONLY AS TALL AS CONTENT */
+}
+
+/* When menu is open */
+.navbar__mobile-menu.is-open {
+  transform: translateX(0);
+}
+
+/* Header area */
+.mobile-menu-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;    /* Increased spacing below header */
+}
+
+/* Smaller logo */
+.mobile-logo {
+  height: 26px;     /* reduced from 32px */
+  opacity: 0.9;
+}
+
+/* Close button */
+.mobile-close-btn {
+  background: rgba(255,255,255,0.12);
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;     /* slightly smaller */
+  padding: 4px 10px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.mobile-close-btn:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+/* Search container */
+.mobile-search-container {
+  margin-bottom: 20px;   /* Increased spacing */
+}
+
+/* Filters section */
+.mobile-filter-container {
+  margin-bottom: 18px; 
+}
+
+/* Section title */
+.section-title {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #9fb3c8;
+  font-weight: 600;
+}
+
+/* Nav links with increased spacing */
+.mobile-nav-links .nav-link {
+  display: block;
+  padding: 14px 0;       /* increased from 12px */
+  font-size: 17px;
+  color: #eaeaea;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  transition: color 0.2s, padding-left 0.2s ease;
+}
+.mobile-nav-links .nav-link:hover {
+  padding-left: 8px;
+  color: #ffffff;
+}
+
+/* Footer */
+.mobile-menu-footer {
+  margin-top: 22px;
+  text-align: center;
+}
+.footer-text {
+  font-size: 12px;
+  color: #7c8693;
+}