Remove conditional header component

app/components/navigation/ConditionalHeader/ConditionalHeader.container.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import { ConditionalHeaderView } from "./ConditionalHeader.view";
-import type { ConditionalHeaderProps } from "./ConditionalHeader.types";
-
-const ConditionalHeaderContainer = memo<ConditionalHeaderProps>(() => {
-  const pathname = usePathname();
-  const isHomePage = pathname === "/";
-
-  return <ConditionalHeaderView isHomePage={isHomePage} />;
-});
-
-ConditionalHeaderContainer.displayName = "ConditionalHeader";
-
-export default ConditionalHeaderContainer;

app/components/navigation/ConditionalHeader/ConditionalHeader.types.ts

@@ -1,7 +0,0 @@
-export interface ConditionalHeaderProps {
-  // Currently no props, but keeping interface for future extensibility
-}
-
-export interface ConditionalHeaderViewProps {
-  isHomePage: boolean;
-}

app/components/navigation/ConditionalHeader/ConditionalHeader.view.tsx

@@ -1,8 +0,0 @@
-import TopNav from "../TopNav";
-import type { ConditionalHeaderViewProps } from "./ConditionalHeader.types";
-
-export function ConditionalHeaderView({
-  isHomePage,
-}: ConditionalHeaderViewProps) {
-  return <TopNav folderTop={isHomePage} />;
-}

app/components/navigation/ConditionalHeader/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./ConditionalHeader.container";
-export type { ConditionalHeaderProps } from "./ConditionalHeader.types";

app/components/navigation/TopNav/TopNavWithPathname.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import TopNav from "./TopNav.container";
+import type { TopNavProps } from "./TopNav.types";
+
+/**
+ * TopNav wrapper that automatically determines folderTop based on current pathname.
+ * Use this in layout.tsx instead of ConditionalHeader.
+ */
+const TopNavWithPathname = memo<Omit<TopNavProps, "folderTop">>((props) => {
+  const pathname = usePathname();
+  const isHomePage = pathname === "/";
+
+  return <TopNav {...props} folderTop={isHomePage} />;
+});
+
+TopNavWithPathname.displayName = "TopNavWithPathname";
+
+export default TopNavWithPathname;

app/layout.tsx

@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
 import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import "./globals.css";
-import ConditionalHeader from "./components/navigation/ConditionalHeader";
+import TopNavWithPathname from "./components/navigation/TopNav/TopNavWithPathname";
 
 // Code split Footer - below the fold, can be lazy loaded
 const Footer = dynamic(() => import("./components/navigation/Footer"), {
@@ -107,7 +107,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       >
         <MessagesProvider messages={messages}>
           <div className="min-h-screen flex flex-col">
-            <ConditionalHeader />
+            <TopNavWithPathname />
             <main className="flex-1">{children}</main>
             <Footer />
           </div>

stories/navigation/ConditionalHeader.stories.js

@@ -1,38 +0,0 @@
-import ConditionalHeader from "../../app/components/navigation/ConditionalHeader";
-
-export default {
-  title: "Components/Navigation/ConditionalHeader",
-  component: ConditionalHeader,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The ConditionalHeader component conditionally renders either HomeHeader (for home page) or Header (for other pages) based on the current pathname. HomeHeader is not sticky, while Header has sticky positioning.",
-      },
-    },
-  },
-  argTypes: {
-    pathname: {
-      control: "text",
-      description: "Current pathname to determine which header to render",
-    },
-  },
-};
-
-export const HomePage = {
-  args: {
-    pathname: "/",
-  },
-};
-
-export const BlogPage = {
-  args: {
-    pathname: "/blog/sample-article",
-  },
-};
-
-export const OtherPage = {
-  args: {
-    pathname: "/about",
-  },
-};