From 017acad8301828860c68ee47bff06954f33594c4 Mon Sep 17 00:00:00 2001
From: Chilaka Eswari <chilakaeswari123@gmail.com>
Date: Sun, 28 Sep 2025 22:22:37 +0530
Subject: [PATCH] fix the stylinng of navbar

---
 Frontend/package-lock.json             |  14 ++--
 Frontend/src/Component/Headers/Nav.tsx | 107 +++++++++++++------------
 2 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 2a9d27e..85be274 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -1980,13 +1980,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -4156,9 +4156,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
diff --git a/Frontend/src/Component/Headers/Nav.tsx b/Frontend/src/Component/Headers/Nav.tsx
index 1d6daca..9ad2e02 100644
--- a/Frontend/src/Component/Headers/Nav.tsx
+++ b/Frontend/src/Component/Headers/Nav.tsx
@@ -2,55 +2,65 @@ import { Link, NavLink, useNavigate } from "react-router";
 import logo from "../../Assets/logo.png";
 import { useState } from "react";
 
-
-
 function Nav() {
   const [isOpen, setIsOpen] = useState(false);
-
   const navigate = useNavigate();
 
   return (
-    <nav className="bg-white bg-gradient-to-b from-amber-100 via-amber-50 to-white transition-all shadow sticky w-full z-20 top-0 start-0 border-b border-amber-200">
-      <div className="max-w-screen-xl flex items-center justify-between mx-auto p-4">
+    <nav className="bg-white bg-gradient-to-b from-amber-100 via-amber-50 to-white shadow sticky top-0 z-20 border-b border-amber-200">
+      <div className="max-w-screen-xl flex items-center justify-between mx-auto px-4 py-2">
         {/* Logo and Title */}
         <div className="flex items-center">
           <Link to="/" className="flex items-center space-x-3">
-            <img src={logo} className="h-20 w-auto" alt="Logo" />
-            <span className="text-4xl font-semibold text-amber-900 hover:text-amber-600">Ayurleaf</span>
+            <img src={logo} className="h-14 w-auto" alt="Logo" />
+            <span className="text-3xl font-semibold text-amber-900 hover:text-amber-600 transition-colors">
+              Ayurleaf
+            </span>
           </Link>
         </div>
 
         {/* Desktop Nav Links */}
-        <div className="hidden md:flex md:space-x-8 absolute left-1/2 transform -translate-x-1/2">
-          <NavLink
-            to="/fitness"
-            className={({ isActive }) =>
-              `text-2xl font-medium ${isActive ? "text-amber-900" : "text-amber-800 underline hover:text-amber-600"}`
-            }
-          >
-            AyuFit
-          </NavLink>
-          <NavLink to="/products" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
-            AyuMed
-          </NavLink>
-          <NavLink to="/doctors" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
-            AyuDoctor
-          </NavLink>
-          <NavLink to="/hospitals" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
-            AyuHospitals
-          </NavLink>
+        <div className="hidden md:flex md:space-x-12 absolute left-1/2 transform -translate-x-1/2">
+          {[
+            { to: "/fitness", label: "AyuFit" },
+            { to: "/products", label: "AyuMed" },
+            { to: "/doctors", label: "AyuDoctor" },
+            { to: "/hospitals", label: "AyuHospitals" },
+          ].map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className={({ isActive }) =>
+                `relative text-lg font-medium tracking-wide px-4 py-1 rounded-md
+                 transition-all duration-200 ease-out
+                 ${isActive ? "text-amber-900 bg-amber-200" : "text-amber-800"}
+                 hover:text-white hover:bg-amber-600 hover:scale-110`
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
         </div>
 
-        
-       
-
         {/* Hamburger Button */}
         <button
           className="md:hidden text-amber-900 p-2 rounded-md focus:outline-none"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
+          <svg
+            className="w-7 h-7"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path
+              d={
+                isOpen
+                  ? "M6 18L18 6M6 6l12 12"
+                  : "M4 6h16M4 12h16M4 18h16"
+              }
+            />
           </svg>
         </button>
       </div>
@@ -58,25 +68,26 @@ function Nav() {
       {/* Mobile Menu */}
       {isOpen && (
         <div className="md:hidden bg-amber-50 border-t border-amber-200 p-4">
-          <NavLink to="/fitness" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuFit
-          </NavLink>
-          <NavLink to="/products" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuMed
-          </NavLink>
-          <NavLink to="/doctors" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuDoctor
-          </NavLink>
-          <NavLink to="/hospitals" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
-            AyuHospitals
-          </NavLink>
+          {[
+            { to: "/fitness", label: "AyuFit" },
+            { to: "/products", label: "AyuMed" },
+            { to: "/doctors", label: "AyuDoctor" },
+            { to: "/hospitals", label: "AyuHospitals" },
+          ].map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className="block py-2 text-xl text-amber-900 hover:text-white hover:bg-amber-600 hover:scale-105 rounded-md transition-all"
+            >
+              {link.label}
+            </NavLink>
+          ))}
           <button
-            onClick={() => navigate('/BMI')}
-            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-3xl px-6 py-3"
+            onClick={() => navigate("/BMI")}
+            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-2xl px-5 py-2 transition-colors"
           >
             Get Instant Help
           </button>
-        
         </div>
       )}
     </nav>
@@ -84,9 +95,3 @@ function Nav() {
 }
 
 export default Nav;
-
-
-
-
-
-