set header title

apps/web/app/(main)/contacts/page.tsx

@@ -1,10 +1,12 @@
 import { ContactsList } from '@/components/contacts/contacts-list';
 import { ContactsFilter } from '@/components/contacts/dropdown-filter';
+import { NavigationMeta } from '@/components/navigation';
 import { ContactsFilterProvider } from '@/context/contacts-filter';
 
 export default function ContactsPage() {
   return (
     <ContactsFilterProvider>
+      <NavigationMeta title="Контакты" />
       <div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-4">
         <div />
         <ContactsFilter />

apps/web/app/(main)/layout.tsx

@@ -1,14 +1,15 @@
 import { BottomNav, PageHeader } from '@/components/navigation';
+import { NavigationProvider } from '@/context/navigation';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
   return (
-    <>
+    <NavigationProvider>
       <PageHeader />
       <div className="mx-auto flex h-screen flex-col justify-between">
         <main>{children}</main>
         <BottomNav />
       </div>
-    </>
+    </NavigationProvider>
   );
 }

apps/web/app/(main)/profile/page.tsx

@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { NavigationMeta } from '@/components/navigation/meta';
 import { ProfileCard } from '@/components/profile/profile-card';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
@@ -12,6 +13,7 @@ export default async function ProfilePage() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
+      <NavigationMeta title="Профиль" />
       <ProfileCard />
     </HydrationBoundary>
   );

apps/web/components/navigation/header.tsx

@@ -1,14 +0,0 @@
-import { BackButton } from './back-button';
-
-type Props = {
-  title: string;
-};
-
-export function PageHeader(props: Readonly<Props>) {
-  return (
-    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
-      <BackButton />
-      <span className="h-8 text-lg font-bold tracking-wide">{props.title || 'Page name'}</span>
-    </div>
-  );
-}

apps/web/components/navigation/header/index.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { BackButton } from './back-button';
+import { PageTitle } from './page-title';
+
+export function PageHeader() {
+  return (
+    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
+      <BackButton />
+      <PageTitle />
+    </div>
+  );
+}

apps/web/components/navigation/header/page-title.tsx

@@ -0,0 +1,8 @@
+import { NavigationContext } from '@/context/navigation';
+import { use } from 'react';
+
+export function PageTitle() {
+  const context = use(NavigationContext);
+
+  return <span className="h-8 text-lg font-bold tracking-wide">{context?.title}</span>;
+}

apps/web/components/navigation/index.tsx

@@ -1,2 +1,3 @@
 export * from './header';
+export * from './meta';
 export * from './navbar';

apps/web/components/navigation/meta.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { NavigationContext } from '@/context/navigation';
+import { use, useEffect } from 'react';
+
+export function NavigationMeta(props: Readonly<{ title: string }>) {
+  const navigation = use(NavigationContext);
+
+  useEffect(() => {
+    navigation?.setTitle(props.title);
+  }, [navigation, props.title]);
+
+  return false;
+}

apps/web/context/navigation.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { createContext, type PropsWithChildren, useMemo, useState } from 'react';
+
+type ContextType = {
+  setTitle: (title: null | string) => void;
+  title: null | string;
+};
+
+export const NavigationContext = createContext<ContextType | null>(null);
+
+export function NavigationProvider({ children }: Readonly<PropsWithChildren>) {
+  const [title, setTitle] = useState<null | string>(null);
+
+  const value = useMemo(() => ({ setTitle, title }), [setTitle, title]);
+
+  return <NavigationContext value={value}>{children}</NavigationContext>;
+}