docs,api-ref: added search filters (#4830)

* initial implementation of search modal

* added hit and search suggestions

* added support for multiple indices

* updated sample env

* added close when click outside dropdown

* test for mobile

* added mobile design

* added shortcut

* dark mode fixes

* added search to docs

* added plugins filter

* added React import

* moved filters to configurations

* handled error on page load

* change suggestion text

* removed hits limit

* handle select all

* open link in current tab

* change highlight colors

* added support for shortcuts + auto focus

* change header and footer

* redesigned search ui

www/api-reference/components/Navbar/FeedbackModal/index.tsx

@@ -1,13 +1,18 @@
 "use client"
 
 import { useModal } from "../../../providers/modal"
+import { usePageLoading } from "../../../providers/page-loading"
 import Button from "../../Button"
 import DetailedFeedback from "../../DetailedFeedback"
 
 const FeedbackModal = () => {
   const { setModalProps } = useModal()
+  const { isLoading } = usePageLoading()
 
   const openModal = () => {
+    if (isLoading) {
+      return
+    }
     setModalProps({
       title: "Send your Feedback",
       children: <DetailedFeedback />,

www/api-reference/components/Navbar/MenuButton/index.tsx

@@ -5,20 +5,22 @@ import { useSidebar } from "@/providers/sidebar"
 import IconSidebar from "../../Icons/Sidebar"
 import clsx from "clsx"
 import IconXMark from "../../Icons/XMark"
+import { usePageLoading } from "../../../providers/page-loading"
 
 type NavbarMenuButtonProps = {
   buttonProps?: NavbarIconButtonProps
 }
 
 const NavbarMenuButton = ({ buttonProps }: NavbarMenuButtonProps) => {
-  const { items, setMobileSidebarOpen, mobileSidebarOpen } = useSidebar()
+  const { setMobileSidebarOpen, mobileSidebarOpen } = useSidebar()
+  const { isLoading } = usePageLoading()
 
   return (
     <NavbarIconButton
       {...buttonProps}
       className={clsx("mr-1 lg:!hidden", buttonProps?.className)}
       onClick={() => {
-        if (items.top.length !== 0 && items.bottom.length !== 0) {
+        if (!isLoading) {
           setMobileSidebarOpen((prevValue) => !prevValue)
         }
       }}

www/api-reference/components/Navbar/MobileMenu/index.tsx

@@ -1,33 +1,13 @@
 "use client"
 
-import { useCallback, useEffect, useState } from "react"
 import NavbarMenuButton from "../MenuButton"
 import NavbarMobileLogo from "../MobileLogo"
-import SearchBar from "../../SearchBar"
 import NavbarColorModeToggle from "../ColorModeToggle"
+import SearchModalOpener from "../../Search/ModalOpener"
+import { useMobile } from "../../../providers/mobile"
 
 const MobileMenu = () => {
-  const [isMobile, setIsMobile] = useState(false)
-
-  const handleResize = useCallback(() => {
-    if (window.innerWidth < 1025 && !isMobile) {
-      setIsMobile(true)
-    } else if (window.innerWidth >= 1025 && isMobile) {
-      setIsMobile(false)
-    }
-  }, [isMobile])
-
-  useEffect(() => {
-    window.addEventListener("resize", handleResize)
-
-    return () => {
-      window.removeEventListener("resize", handleResize)
-    }
-  }, [handleResize])
-
-  useEffect(() => {
-    handleResize()
-  }, [])
+  const { isMobile } = useMobile()
 
   return (
     <div className="flex w-full items-center justify-between lg:hidden">
@@ -41,7 +21,7 @@ const MobileMenu = () => {
           />
           <NavbarMobileLogo />
           <div className="flex">
-            <SearchBar />
+            <SearchModalOpener />
             <NavbarColorModeToggle
               buttonProps={{
                 className:

www/api-reference/components/Navbar/index.tsx

@@ -2,12 +2,10 @@ import clsx from "clsx"
 import NavbarLink from "./Link"
 import NavbarColorModeToggle from "./ColorModeToggle"
 import NavbarLogo from "./Logo"
-import SearchBar from "../SearchBar"
-import NavbarMenuButton from "./MenuButton"
 import getLinkWithBasePath from "../../utils/get-link-with-base-path"
 import FeedbackModal from "./FeedbackModal"
-import NavbarMobileLogo from "./MobileLogo"
 import MobileMenu from "./MobileMenu"
+import SearchModalOpener from "../Search/ModalOpener"
 
 const Navbar = () => {
   return (
@@ -44,8 +42,8 @@ const Navbar = () => {
           </div>
         </div>
         <div className="hidden min-w-0 flex-1 items-center justify-end gap-0.5 lg:flex">
-          <div className="w-[240px] [&>*]:flex-1">
-            <SearchBar />
+          <div>
+            <SearchModalOpener />
           </div>
           <NavbarColorModeToggle />
           <FeedbackModal />