fix: refactor Topnav

Google · Google · commit 35522701423e · 2025-05-09T21:10:12.000+07:00
diff --git a/src/components/HeaderComponent/index.tsx b/src/components/HeaderComponent/index.tsx
@@ -0,0 +1,35 @@
+import {Seo} from 'components/Seo';
+import SocialBanner from '../SocialBanner';
+
+interface HeaderProps {
+  title: string;
+  titleForTitleTag: string;
+  section: string;
+  routeTree: any;
+  breadcrumbs: any;
+  isHomePage: boolean;
+  searchOrder: number | undefined;
+}
+
+const HeaderComponent = ({
+  title,
+  titleForTitleTag,
+  section,
+  isHomePage,
+  searchOrder,
+}: HeaderProps) => {
+  return (
+    <>
+      <Seo
+        title={title}
+        titleForTitleTag={titleForTitleTag}
+        isHomePage={isHomePage}
+        image={`/images/og-` + section + '.png'}
+        searchOrder={searchOrder}
+      />
+      <SocialBanner />
+      {/* <TopNav section={section} routeTree={routeTree} breadcrumbs={breadcrumbs} /> */}
+    </>
+  );
+};
+export default HeaderComponent;
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
@@ -2,30 +2,23 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {
-  useState,
-  useRef,
-  useCallback,
-  useEffect,
-  startTransition,
-  Suspense,
-} from 'react';
-import Image from 'next/image';
-import * as React from 'react';
 import cn from 'classnames';
+import Image from 'next/image';
 import NextLink from 'next/link';
-import {useRouter} from 'next/router';
-import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
+import * as React from 'react';
+import {Suspense} from 'react';
 
 import {IconClose} from 'components/Icon/IconClose';
 import {IconHamburger} from 'components/Icon/IconHamburger';
 import {IconSearch} from 'components/Icon/IconSearch';
+import NavItem from 'components/NavItem';
 import {Search} from 'components/Search';
+import {useMenuAndScroll} from 'hooks';
+import {siteConfig} from 'siteConfig';
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
-import {siteConfig} from 'siteConfig';
 import BrandMenu from './BrandMenu';
 
 declare global {
@@ -120,23 +113,6 @@ function Link({
   );
 }
 
-function NavItem({url, isActive, children}: any) {
-  return (
-    <div className="flex flex-auto sm:flex-1">
-      <Link
-        href={url}
-        className={cn(
-          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
-          !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
-          isActive &&
-            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
-        )}>
-        {children}
-      </Link>
-    </div>
-  );
-}
-
 function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
   const {wide, ...rest} = props;
   const width = wide ? 'w-10' : 'w-5';
@@ -158,77 +134,16 @@ export default function TopNav({
   breadcrumbs: RouteItem[];
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
-  const [isScrolled, setIsScrolled] = useState(false);
-  const scrollParentRef = useRef<HTMLDivElement>(null);
-  const {asPath} = useRouter();
-
-  // HACK. Fix up the data structures instead.
-  if ((routeTree as any).routes.length === 1) {
-    routeTree = (routeTree as any).routes[0];
-  }
-
-  // While the overlay is open, disable body scroll.
-  useEffect(() => {
-    if (isMenuOpen) {
-      const preferredScrollParent = scrollParentRef.current!;
-      disableBodyScroll(preferredScrollParent);
-      return () => enableBodyScroll(preferredScrollParent);
-    } else {
-      return undefined;
-    }
-  }, [isMenuOpen]);
-
-  // Close the overlay on any navigation.
-  useEffect(() => {
-    setIsMenuOpen(false);
-  }, [asPath]);
-
-  // Also close the overlay if the window gets resized past mobile layout.
-  // (This is also important because we don't want to keep the body locked!)
-  useEffect(() => {
-    const media = window.matchMedia(`(max-width: 1023px)`);
-
-    function closeIfNeeded() {
-      if (!media.matches) {
-        setIsMenuOpen(false);
-      }
-    }
-
-    closeIfNeeded();
-    media.addEventListener('change', closeIfNeeded);
-    return () => {
-      media.removeEventListener('change', closeIfNeeded);
-    };
-  }, []);
-
-  const scrollDetectorRef = useRef(null);
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          setIsScrolled(!entry.isIntersecting);
-        });
-      },
-      {
-        root: null,
-        rootMargin: `0px 0px`,
-        threshold: 0,
-      }
-    );
-    observer.observe(scrollDetectorRef.current!);
-    return () => observer.disconnect();
-  }, []);
-
-  const onOpenSearch = useCallback(() => {
-    startTransition(() => {
-      setShowSearch(true);
-    });
-  }, []);
-  const onCloseSearch = useCallback(() => {
-    setShowSearch(false);
-  }, []);
+  const {
+    isMenuOpen,
+    setIsMenuOpen,
+    showSearch,
+    isScrolled,
+    scrollParentRef,
+    scrollDetectorRef,
+    onOpenSearch,
+    onCloseSearch,
+  } = useMenuAndScroll(routeTree);
 
   return (
     <>
diff --git a/src/components/NavItem/index.tsx b/src/components/NavItem/index.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import cn from 'classnames';
+
+const NavItem = ({url, isActive, children}: any) => {
+  return (
+    <div className="flex flex-auto sm:flex-1">
+      <Link
+        href={url}
+        className={cn(
+          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
+          !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
+          isActive &&
+            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
+        )}>
+        {children}
+      </Link>
+    </div>
+  );
+};
+export default NavItem;
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
@@ -27,7 +27,6 @@ function PageHeading({
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
-  console.log('version', version);
   return (
     <div className="px-5 sm:px-12 pt-3.5">
       <div className="max-w-4xl ms-0 2xl:mx-auto">
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -0,0 +1,2 @@
+export {default as HeaderComponent} from './HeaderComponent';
+export {default as NavItem} from './NavItem';
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
@@ -583,6 +583,14 @@ export default function Page() {
         ...
         <Section level={3}>
           ...
+          <Section level={4}>
+            ...
+          </Section>
+        </Section>
+      </Section>
+    </Section>
+  );
+}
 ```
 
 Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it:
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
@@ -0,0 +1 @@
+export {default as useMenuAndScroll} from './useMenuAndScroll';
diff --git a/src/hooks/useMenuAndScroll.ts b/src/hooks/useMenuAndScroll.ts
@@ -0,0 +1,87 @@
+import {useState, useEffect, useRef, useCallback, startTransition} from 'react';
+import {useRouter} from 'next/router';
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
+import {RouteItem} from 'components/Layout/getRouteMeta';
+
+const useMenuAndScroll = (routeTree: RouteItem) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const {asPath} = useRouter();
+  const scrollDetectorRef = useRef(null);
+
+  if ((routeTree as any).routes.length === 1) {
+    routeTree = (routeTree as any).routes[0];
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      const preferredScrollParent = scrollParentRef.current!;
+      disableBodyScroll(preferredScrollParent);
+      return () => enableBodyScroll(preferredScrollParent);
+    } else {
+      return undefined;
+    }
+  }, [isMenuOpen]);
+
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [asPath]);
+
+  useEffect(() => {
+    const media = window.matchMedia(`(max-width: 1023px)`);
+
+    function closeIfNeeded() {
+      if (!media.matches) {
+        setIsMenuOpen(false);
+      }
+    }
+
+    closeIfNeeded();
+    media.addEventListener('change', closeIfNeeded);
+    return () => {
+      media.removeEventListener('change', closeIfNeeded);
+    };
+  }, []);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setIsScrolled(!entry.isIntersecting);
+        });
+      },
+      {
+        root: null,
+        rootMargin: `0px 0px`,
+        threshold: 0,
+      }
+    );
+    observer.observe(scrollDetectorRef.current!);
+    return () => observer.disconnect();
+  }, []);
+
+  const onOpenSearch = useCallback(() => {
+    startTransition(() => {
+      setShowSearch(true);
+    });
+  }, []);
+
+  const onCloseSearch = useCallback(() => {
+    setShowSearch(false);
+  }, []);
+
+  return {
+    isMenuOpen,
+    setIsMenuOpen,
+    showSearch,
+    setShowSearch,
+    isScrolled,
+    scrollParentRef,
+    scrollDetectorRef,
+    onOpenSearch,
+    onCloseSearch,
+  };
+};
+export default useMenuAndScroll;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export {default as HeaderComponent} from './HeaderComponent';`
	`2`	`+export {default as NavItem} from './NavItem';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export {default as useMenuAndScroll} from './useMenuAndScroll';`