Skip to content

fix the styling of navbar #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chilaka-eswari wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix the styling of navbar #58

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
017acad
fix the stylinng of navbar
Sep 28, 2025
dd2d923
Merge branch 'main' into fix/navbar
chilaka-eswari Oct 8, 2025
a7e51b8
Merge branch 'main' into fix/navbar
chilaka-eswari Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 74 additions & 29 deletions Frontend/src/Component/Headers/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,66 @@ 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 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 */}

<nav className="bg-white bg-gradient-to-b from-amber-100 via-amber-50 to-white transition-all shadow sticky w-full top-0 start-0 border-b border-amber-200 z-100">
<div className="max-w-screen-xl flex items-center justify-between mx-auto p-4">

<div className="flex items-center">
<Link to="/" className="flex items-center space-x-3">
<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>

<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 p-6">
{/* Logo and Title */}
<div className="flex items-center">
<Link to="/" className="flex items-center space-x-5">
<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>

</Link>
</div>

{/* Desktop Nav Links */}

<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 className="hidden md:flex md:space-x-8 absolute left-1/2 transform -translate-x-1/2">
<NavLink to="/" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
Home
</NavLink>
<div className="hidden md:flex md:space-x-32 absolute left-1/2 transform -translate-x-1/2">

<NavLink
to="/fitness"
className={({ isActive }) =>
Expand All @@ -39,54 +79,59 @@ function Nav() {
<NavLink to="/hospitals" className="text-2xl font-medium text-amber-800 hover:text-amber-600">
AyuHospitals
</NavLink>
</div>



</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>

{/* 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>
);
}

export default Nav;