diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 663801fd..23860a16 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -2,7 +2,14 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/
-import {useState, useRef, useEffect, Suspense} from 'react';
+import {
+ useState,
+ useRef,
+ useCallback,
+ useEffect,
+ startTransition,
+ Suspense,
+} from 'react';
import * as React from 'react';
import cn from 'classnames';
import NextLink from 'next/link';
@@ -11,6 +18,7 @@ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
import {IconClose} from 'components/Icon/IconClose';
import {IconHamburger} from 'components/Icon/IconHamburger';
+import {IconSearch} from 'components/Icon/IconSearch';
import {Search} from 'components/Search';
import {Logo} from '../../Logo';
import {Feedback} from '../Feedback';
@@ -112,6 +120,18 @@ function NavItem({url, isActive, children}: any) {
);
}
+function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
+ const {wide, ...rest} = props;
+ const width = wide ? 'w-10' : 'w-5';
+
+ return (
+
+ );
+}
+
export default function TopNav({
routeTree,
breadcrumbs,
@@ -183,8 +203,23 @@ export default function TopNav({
return () => observer.disconnect();
}, []);
+ const [showSearch, setShowSearch] = useState(false);
+ const onOpenSearch = useCallback(() => {
+ startTransition(() => {
+ setShowSearch(true);
+ });
+ }, []);
+ const onCloseSearch = useCallback(() => {
+ setShowSearch(false);
+ }, []);
+
return (
<>
+
-
+
@@ -248,7 +298,13 @@ export default function TopNav({
-
+