feat: Conditionally render the header layout based on whether the current path is the user dashboard.

This commit is contained in:
pradeepkumar
2026-01-19 10:30:28 +05:30
parent 79f5fadb05
commit 484f01d74d

View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation'; import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Footer } from '@/components/layout/Footer'; import { Footer } from '@/components/layout/Footer';
import { CommonHeader } from '@/components/layout/CommonHeader'; import { CommonHeader } from '@/components/layout/CommonHeader';
@@ -13,6 +13,9 @@ export default function UserLayout({
}) { }) {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const isDashboard = pathname === '/user/dashboard';
useEffect(() => { useEffect(() => {
if (status === 'loading') return; if (status === 'loading') return;
@@ -39,16 +42,34 @@ export default function UserLayout({
return ( return (
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
{/* Main Content with Header inside */} {isDashboard ? (
<main className="flex-1 relative"> <>
{/* Header overlaying the content */} {/* Main Content with Header Overlay for Dashboard */}
<div className="absolute top-0 left-0 right-0 z-50 px-4 py-3"> <main className="flex-1 relative">
<div className="max-w-7xl mx-auto"> {/* Header overlaying the content */}
<CommonHeader /> <div className="absolute top-0 left-0 right-0 z-50 px-4 py-3">
<div className="max-w-7xl mx-auto">
<CommonHeader />
</div>
</div>
{children}
</main>
</>
) : (
<>
{/* Regular Header for other pages */}
<div className="px-4 py-3 bg-white">
<div className="max-w-7xl mx-auto">
<CommonHeader />
</div>
</div> </div>
</div>
{children} {/* Main Content */}
</main> <main className="flex-1">
{children}
</main>
</>
)}
{/* Footer */} {/* Footer */}
<Footer /> <Footer />