@@ -365,7 +215,8 @@ export default function TopNav({
window.__setPreferredTheme('light');
}}
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
- {lightIcon}
+ {/* {lightIcon} */}
+
@@ -373,7 +224,7 @@ export default function TopNav({
href="/community/translations"
aria-label="Translations"
className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
- {languageIcon}
+
@@ -383,7 +234,8 @@ export default function TopNav({
rel="noreferrer noopener"
aria-label="Open on GitHub"
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
- {githubIcon}
+ {/* {githubIcon} */}
+
diff --git a/src/components/NavItem/index.tsx b/src/components/NavItem/index.tsx
new file mode 100644
index 00000000000..b1a6256cf55
--- /dev/null
+++ 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 (
+
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 00000000000..4af4df3a5df
--- /dev/null
+++ 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
index e81678c8e2e..f0b477e9fdc 100644
--- 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() {
...
+
+
+ );
+}
```
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
new file mode 100644
index 00000000000..c8aa82ccfbc
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..6210af930c1
--- /dev/null
+++ 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(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;