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

Service tab update

Browse Source
This commit is contained in:
mukeshs
2025-11-20 16:26:01 +05:30
parent 624504535a
commit 1c30abd558
6 changed files with 244 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,14 @@
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isServicesOpen, setIsServicesOpen] = useState(false);
const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false);
const pathname = usePathname();
const router = useRouter();
const closeAllMenus = () => {
setIsMenuOpen(false);
@ -17,7 +18,27 @@ const Header = () => {
setIsMobileServicesOpen(false);
};
const scrollToSection = (sectionId: string) => {
closeAllMenus();
// If not on services page, navigate to it first
if (pathname !== '/services') {
router.push('/services');
// Wait for navigation to complete, then scroll
setTimeout(() => {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 100);
} else {
// Already on services page, just scroll
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
};
const menuItems = [
{ href: "/", label: "Home" },
@ -99,6 +120,7 @@ const Header = () => {
? "text-white bg-red-600"
: "text-white hover:bg-red-600"
} flex items-center justify-center gap-1`}
onClick={closeAllMenus}
>
{item.label}
<svg
@ -114,13 +136,18 @@ const Header = () => {
{/* 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=""
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}
<button
onClick={() => scrollToSection('trauma-care')}
className="w-full text-left block px-4 py-3 text-sm font-medium text-blue-900 hover:bg-gray-100 hover:text-red-600 transition-colors border-b border-gray-100"
>
Trauma Care Services
</button>
<button
onClick={() => scrollToSection('acute-care-surgery')}
className="w-full text-left block px-4 py-3 text-sm font-medium text-blue-900 hover:bg-gray-100 hover:text-red-600 transition-colors"
>
Acute Care Surgery Services
</Link>
</button>
</div>
)}
</div>
@ -213,13 +240,20 @@ const Header = () => {
{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}
<button
onClick={() => scrollToSection('trauma-care')}
className="w-full text-left block py-2.5 px-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-red-600 rounded transition-colors"
>
Trauma Care Services
</button>
</li>
<li>
<button
onClick={() => scrollToSection('acute-care-surgery')}
className="w-full text-left block py-2.5 px-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-red-600 rounded transition-colors"
>
Acute Care Surgery Services
</Link>
</button>
</li>
</ul>
)}