From f399afc1773d5d143993873fe0b1bc999759887c Mon Sep 17 00:00:00 2001
From: Sai Prasanna Kotipatruni
 <149445634+saiprasanna56@users.noreply.github.com>
Date: Wed, 9 Oct 2024 09:46:37 +0530
Subject: [PATCH 1/2] Background color change when hover on navbar

---
 frontend/src/components/Navbar.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 12fe223e..25ce4731 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -42,31 +42,31 @@ const Navbar = () => {
                 </button>
                 <div className={`${isMenuOpen ? "block" : "hidden"} w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`} id="navbar-default">
                     <div className="flex flex-col lg:flex-row lg:items-center lg:space-x-4">
-                        <Link to="/" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Home
                         </Link>
-                        <Link to="/crop" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/crop" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Crop
                         </Link>
-                        <Link to="/disease" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/disease" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Disease
                         </Link>
-                        <Link to="/fertilizer" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/fertilizer" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Fertilizer
                         </Link>
-                        <Link to="/soil" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/soil" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Soil
                         </Link>
-                        <Link to="/prices" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/prices" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Price
                         </Link>
-                        <Link to="/forecast" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/forecast" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Forecast
                         </Link>
-                        <Link to="/crop_recommendation" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/crop_recommendation" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Rotation
                         </Link>
-                        <Link to="/Irrigation" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
+                        <Link to="/Irrigation" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
                             Irrigation
                         </Link>
                         <GoogleTranslate/>

From 566d9ff0d2871a44ccc0f19edbf24f9f6bcd867d Mon Sep 17 00:00:00 2001
From: manikumarreddyu <133508962+manikumarreddyu@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:18:29 +0530
Subject: [PATCH 2/2] hover effect changed

---
 frontend/src/components/Navbar.jsx | 106 ++++++++++++++++++++---------
 1 file changed, 74 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 25ce4731..ca1f9ef2 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,14 +1,10 @@
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
-// import { FaSun, FaMoon } from 'react-icons/fa'; // Import icons from react-icons
+import { NavLink } from 'react-router-dom';
 import icon from '../assets/favicon2.png';
 import GoogleTranslate from './GoogleTranslate';
 
-// import useTheme from '../hooks/useTheme'; // Import useTheme hook
-
 const Navbar = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
-    // const { theme, toggleTheme } = useTheme(); // Use useTheme hook
 
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
@@ -17,10 +13,9 @@ const Navbar = () => {
     const closeMenu = () => {
         setIsMenuOpen(false);
     };
-    //via-[#3ff132] -->from-[#11cb46] via-[#3ff132] to-[#04ba10] 
 
     return (
-        <nav className={`bg-gradient-to-r from-[#11cb46] via-green-600 to-[#04ba10] w-full  z-20 top-0 start-0 fixed`}>
+        <nav className="bg-gradient-to-r from-[#11cb46] via-green-600 to-[#04ba10] w-full z-20 top-0 start-0 fixed">
             <div className="max-w-screen-2xl flex flex-wrap items-center font-semibold justify-between mx-auto p-3">
                 <div className="text-white font-bold flex items-center">
                     <img className="float-left" src={icon} alt="icon" style={{ height: '30px', width: '30px' }} />
@@ -42,46 +37,93 @@ const Navbar = () => {
                 </button>
                 <div className={`${isMenuOpen ? "block" : "hidden"} w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`} id="navbar-default">
                     <div className="flex flex-col lg:flex-row lg:items-center lg:space-x-4">
-                        <Link to="/" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        <NavLink 
+                            exact to="/" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Home
-                        </Link>
-                        <Link to="/crop" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/crop" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Crop
-                        </Link>
-                        <Link to="/disease" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/disease" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Disease
-                        </Link>
-                        <Link to="/fertilizer" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/fertilizer" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Fertilizer
-                        </Link>
-                        <Link to="/soil" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/soil" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Soil
-                        </Link>
-                        <Link to="/prices" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/prices" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Price
-                        </Link>
-                        <Link to="/forecast" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/forecast" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Forecast
-                        </Link>
-                        <Link to="/crop_recommendation" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/crop_recommendation" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Rotation
-                        </Link>
-                        <Link to="/Irrigation" className="block py-2 px-3 text-white hover:text-gray-200 hover:bg-yellow-500 text-center" onClick={closeMenu}>
+                        </NavLink>
+                        <NavLink 
+                            to="/Irrigation" 
+                            className={({ isActive }) => 
+                                `block py-2 px-3 text-white rounded-lg transition-all duration-300 ${isActive ? "bg-green-700" : "hover:bg-green-500"}`
+                            }
+                            onClick={closeMenu}
+                        >
                             Irrigation
-                        </Link>
+                        </NavLink>
                         <GoogleTranslate/>
                     </div>
                 </div>
-                {/* <button
-                    className="inline-flex   items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-green-400 focus:outline-none focus:ring-1 focus:ring-gray-200"
-                    onClick={toggleTheme}
-                >
-                    {theme === 'light' ? <FaMoon className="text-2xl p-1" /> : <FaSun className="text-2xl p-1" />}
-                </button> */}
             </div>
         </nav>
     );
 };
 
 export default Navbar;
-