Avoid rendering empty search container if site has no search plugin

Author: slorber

packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx

@@ -15,5 +15,5 @@ export default function NavbarSearch({
   children,
   className,
 }: Props): JSX.Element {
-  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
+  return <div className={clsx(className, styles.navbarSearch)}>{children}</div>;
 }

packages/docusaurus-theme-classic/src/theme/Navbar/Search/styles.module.css

@@ -5,15 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/7990
+*/
+.navbarSearch:not(:has(> *)) {
+  display: none;
+}
+
 @media (max-width: 996px) {
-  .searchBox {
+  .navbarSearch {
     position: absolute;
     right: var(--ifm-navbar-padding-horizontal);
   }
 }
 
 @media (min-width: 997px) {
-  .searchBox {
+  .navbarSearch {
     padding: var(--ifm-navbar-item-padding-vertical)
       var(--ifm-navbar-item-padding-horizontal);
   }