From a63a45e3b735b21d904cf403a26d8d251ee83d9d Mon Sep 17 00:00:00 2001
From: Aman Singh <151001715+Amansingh0807@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:05:13 +0530
Subject: [PATCH] Update Navbar.jsx

Created a reusable NavLink component for mobile menu items to reduce redundancy.
Removed unnecessary md:border class in the mobile menu.
Simplified the logic for toggling the mobile menu, reducing repetitive code.
I did all the changes that were mentioned in the issue number #21.
Have a look at the changes if anything is require to be changed, please let me know for the same.
---
 StoreHUB-fronted/src/components/Navbar.jsx | 65 +++++++---------------
 1 file changed, 20 insertions(+), 45 deletions(-)

diff --git a/StoreHUB-fronted/src/components/Navbar.jsx b/StoreHUB-fronted/src/components/Navbar.jsx
index 925a739..b4c3edf 100644
--- a/StoreHUB-fronted/src/components/Navbar.jsx
+++ b/StoreHUB-fronted/src/components/Navbar.jsx
@@ -19,7 +19,7 @@ const Navbar = () => {
     user && (
       <nav className="fixed top-0 left-0 right-0 bg-white border-b border-black/10 z-50">
         <div className="container mx-auto flex justify-between items-center p-4">
-          {/* Logo and Mobile Menu Button */}
+         
           <div className="flex items-center justify-between w-full lg:w-auto">
             <Link to="/">
               <h1 className="text-2xl font-bold text-black">StoreHUB</h1>
@@ -50,7 +50,7 @@ const Navbar = () => {
 
           {/* Desktop User and Create Button */}
           <div className="hidden lg:flex items-center space-x-4">
-            <Link to={"/create"}>
+            <Link to="/create">
               <button className="text-black border-black/70 border px-4 py-2 rounded-lg flex items-center">
                 Create
               </button>
@@ -69,49 +69,12 @@ const Navbar = () => {
         {/* Mobile Navigation Menu */}
         {isMenuOpen && (
           <div className="lg:hidden flex flex-col bg-white border-t border-black/10">
-            <Link
-              to="/"
-              className="p-4 text-black hover:bg-gray-100"
-              onClick={() => setIsMenuOpen(false)}
-            >
-              <NavItem icon={<Home />} label="Explore" />
-            </Link>
-            <Link
-              to="/trending"
-              className="p-4 text-black hover:bg-gray-100"
-              onClick={() => setIsMenuOpen(false)}
-            >
-              <NavItem icon={<Flame />} label="Trending" />
-            </Link>
-            <Link
-              to="/sandbox"
-              className="p-4 text-black hover:bg-gray-100"
-              onClick={() => setIsMenuOpen(false)}
-            >
-              <NavItem icon={<Book />} label="Sandbox" />
-            </Link>
-            <Link
-              to="/discussion"
-              className="p-4 text-black hover:bg-gray-100"
-              onClick={() => setIsMenuOpen(false)}
-            >
-              <NavItem icon={<Users />} label="Discussion" />
-            </Link>
-            <Link
-              to="/create"
-              className="p-4 text-black hover:bg-gray-100 md:border md:border-1 md:border-black/10" 
-              onClick={() => setIsMenuOpen(false)}
-            >
-              Create
-            </Link>
-            <Link
-              to="/profile"
-              className="p-4 text-black hover:bg-gray-100 flex items-center space-x-2"
-              onClick={() => setIsMenuOpen(false)}
-            >
-              <UserCircle2 className="text-black/70" size={30} />
-              <span>{user.user?.username || "John"}</span>
-            </Link>
+            <NavLink to="/" label="Explore" icon={<Home />} onClose={setIsMenuOpen} />
+            <NavLink to="/trending" label="Trending" icon={<Flame />} onClose={setIsMenuOpen} />
+            <NavLink to="/sandbox" label="Sandbox" icon={<Book />} onClose={setIsMenuOpen} />
+            <NavLink to="/discussion" label="Discussion" icon={<Users />} onClose={setIsMenuOpen} />
+            <NavLink to="/create" label="Create" onClose={setIsMenuOpen} />
+            <NavLink to="/profile" label={user.user?.username || "John"} icon={<UserCircle2 size={30} />} onClose={setIsMenuOpen} />
           </div>
         )}
       </nav>
@@ -126,4 +89,16 @@ const NavItem = ({ icon, label }) => (
   </div>
 );
 
+// New reusable component for mobile links
+const NavLink = ({ to, label, icon, onClose }) => (
+  <Link
+    to={to}
+    className="p-4 text-black hover:bg-gray-100 flex items-center space-x-2"
+    onClick={() => onClose(false)}
+  >
+    {icon}
+    <span>{label}</span>
+  </Link>
+);
+
 export default Navbar;