mukeshs/cmc_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes on 19-11-2025

Browse Source
This commit is contained in:
mukeshs
2025-11-19 15:01:00 +05:30
parent f55a506ea5
commit 4db6f5d132
8 changed files with 579 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/Layouts/Header.tsx
View File

@ -7,18 +7,24 @@ import { usePathname } from "next/navigation";
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isServicesOpen, setIsServicesOpen] = useState(false);
const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false);
const pathname = usePathname();
const closeAllMenus = () => {
setIsMenuOpen(false);
setIsServicesOpen(false);
setIsMobileServicesOpen(false);
};
const menuItems = [
{ href: "/", label: "Home" },
{ href: "/about", label: "About" },
{ href: "/teamMember", label: "Our Team" },
{ href: "/education-training", label: "Academics & Research" },
{ href: "/services", label: "Services" },
{ href: "/services", label: "Services", hasDropdown: true },
{ href: "/events", label: "Events" },
{ href: "/blogs", label: "Blogs" },
{ href: "/career", label: "Career" },
@ -77,6 +83,50 @@ const Header = () => {
{menuItems.map((item, idx) => {
const isActive = pathname === item.href ||
(item.href !== "/" && pathname.startsWith(item.href));
if (item.hasDropdown) {
return (
<div
key={idx}
className="relative flex-1"
onMouseEnter={() => setIsServicesOpen(true)}
onMouseLeave={() => setIsServicesOpen(false)}
>
<Link
href="/services"
className={`font-medium text-sm xl:text-[15px] whitespace-nowrap px-4 xl:px-5 py-3.5 transition-colors w-full ${
isActive
? "text-white bg-red-600"
: "text-white hover:bg-red-600"
} flex items-center justify-center gap-1`}
>
{item.label}
<svg
className={`w-4 h-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</Link>
{/* Services Dropdown */}
{isServicesOpen && (
<div className="absolute top-full left-0 mt-0 w-64 bg-white shadow-lg border border-gray-200 rounded-b-md z-50">
<Link
href="/services/acute-care-surgery"
className="block px-4 py-3 text-sm font-medium text-blue-900 hover:bg-gray-100 hover:text-red-600 transition-colors"
onClick={closeAllMenus}
>
Acute Care Surgery Services
</Link>
</div>
)}
</div>
);
}
return (
<Link
key={idx}
@ -95,7 +145,7 @@ const Header = () => {
</div>
</nav>
{/* Mobile menu button - More visible */}
{/* Mobile menu button */}
<button
className="lg:hidden p-3 text-white hover:bg-red-600 transition-colors w-full flex items-center justify-between"
onClick={() => setIsMenuOpen(!isMenuOpen)}
@ -136,6 +186,47 @@ const Header = () => {
{menuItems.map((item, idx) => {
const isActive = pathname === item.href ||
(item.href !== "/" && pathname.startsWith(item.href));
if (item.hasDropdown) {
return (
<li key={idx}>
<button
className={`w-full text-left font-medium py-3 px-4 transition-colors rounded text-sm sm:text-base flex items-center justify-between ${
isActive
? "bg-red-600 text-white"
: "text-blue-900 hover:bg-gray-100 hover:text-red-600"
}`}
onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
>
{item.label}
<svg
className={`w-4 h-4 transition-transform ${isMobileServicesOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{/* Mobile Services Submenu */}
{isMobileServicesOpen && (
<ul className="ml-4 mt-1 space-y-1">
<li>
<Link
href="/services/acute-care-surgery"
className="block py-2.5 px-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-red-600 rounded transition-colors"
onClick={closeAllMenus}
>
Acute Care Surgery Services
</Link>
</li>
</ul>
)}
</li>
);
}
return (
<li key={idx}>
<Link