Refactor Navbar component for improved mobile menu functionality and styling

Author: TheCoderAdi

src/Navbar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import "./Navbar.css";
-import {Link} from "react-router-dom";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -10,32 +10,21 @@ const Navbar = () => {
       <div className="nav-container">
         <Link to="/" className="logo">TechPulse</Link>
 
-        <div className="nav-links">
-          <Link to="/">Home</Link>
-          <Link to="#">World</Link>
-          <Link to="#">Politics</Link>
-          <Link to="#">Sports</Link>
-          <Link to="#">Technology</Link>
-          <Link to="/bookmarks" className="bookmark-link">Bookmarks</Link> 
+        <div className={`nav-links ${isOpen ? "open" : ""}`}>
+          <Link to="/" onClick={() => setIsOpen(false)}>Home</Link>
+          <Link to="#" onClick={() => setIsOpen(false)}>World</Link>
+          <Link to="#" onClick={() => setIsOpen(false)}>Politics</Link>
+          <Link to="#" onClick={() => setIsOpen(false)}>Sports</Link>
+          <Link to="#" onClick={() => setIsOpen(false)}>Technology</Link>
+          <Link to="/bookmarks" className="bookmark-link" onClick={() => setIsOpen(false)}>Bookmarks</Link> 
         </div>
 
         <button className="menu-button" onClick={() => setIsOpen(!isOpen)}>
-          ☰
+          {isOpen ? "✖" : "☰"}
         </button>
       </div>
-
-      {isOpen && (
-        <div className="mobile-menu">
-          <Link to="#">Home</Link>
-          <Link to="#">World</Link>
-          <Link to="#">Politics</Link>
-          <Link to="#">Sports</Link>
-          <Link to="#">Technology</Link>
-          <Link to="/bookmarks" className="bookmark-link">Bookmarks</Link> 
-        </div>
-      )}
     </nav>
   );
 };
 
-export default Navbar;
+export default Navbar;