Merge pull request #2319 from dfinity/akos/fix-mobile-nav-on-ai-popup

fix: nav vs ai popup z-index; add blur to transparent bg nav

src/components/Common/MarketingNav/index.tsx

@@ -293,7 +293,7 @@ const MarketingNav = () => {
   return (
     <>
       <nav
-        className="marketing-navbar z-[1000] !px-0 pt-6 pb-4 md:px-12 md:pt-11 md:pb-5 text-black  bg-page dark-hero:bg-transparent sticky top-0 transition-transform"
+        className="marketing-navbar z-[1000] !px-0 pt-6 pb-4 md:px-12 md:pt-11 md:pb-5 text-black  bg-page dark-hero:bg-transparent dark-hero:backdrop-blur-sm sticky top-0 transition-transform"
         ref={navbarRef}
       >
         <div className="container-12 w-full flex items-center justify-between">

src/components/Common/Search/Search.tsx

@@ -6,6 +6,7 @@ import { PageSearchResult } from "@site/search/src/declarations/search/search.di
 import { createFocusTrap } from "focus-trap";
 import Link from "@docusaurus/Link";
 import { trackEvent } from "@site/src/utils/matomo";
+import useLockBodyScroll from "../../../utils/use-lock-body-scroll";
 
 let initialTerm = "";
 let initialResults: PageSearchResult[] | null = null;
@@ -26,6 +27,8 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
   >({});
   const [loading, setLoading] = useState(false);
 
+  useLockBodyScroll(dialogRef);
+
   useEffect(() => {
     actorRefPromise.current = import("./actor").then(({ createActor }) => {
       console.log("search module loaded");
@@ -52,9 +55,7 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
 
     window.addEventListener("keydown", onKeydown);
 
-    document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = "unset";
       window.removeEventListener("keydown", onKeydown);
       trap.deactivate();
     };
@@ -104,7 +105,15 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
   return (
     <>
       <motion.div
-        className="fixed inset-0 backdrop-blur-lg z-[3001] overflow-auto"
+        className="fixed h-screen inset-0 backdrop-blur-lg z-[3001] touch-none"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        aria-modal="true"
+      ></motion.div>
+      <motion.div
+        className="fixed max-h-screen top-0 left-0 right-0 z-[3002] overflow-auto"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -113,7 +122,7 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
         aria-modal="true"
       >
         <div
-          className="md:container-10 backdrop-blur-0"
+          className="md:container-10 backdrop-blur-0 touch-auto"
           aria-label="Search the website"
         >
           <div

src/css/custom.scss

@@ -59,6 +59,7 @@ abbr[title] {
 @import "./subnav.scss";
 @import "./map.scss";
 @import "./spinner.scss";
+@import "./kapa.scss";
 
 // specifically target the dev docs namespace;
 // we don't want to apply these styles to the marketing pages

src/css/kapa.scss

@@ -0,0 +1,4 @@
+.mantine-Modal-root {
+  z-index: 1001;
+  position: relative;
+}

src/theme/Layout/index.js

@@ -56,7 +56,6 @@ export default function Layout(props) {
         </ErrorBoundary>
       </div>
       {!noFooter && <Footer editPath={editPath} />}
-      <div id="search-overlay-portal"></div>
     </LayoutProvider>
   );
 }

src/theme/Logo/index.js

@@ -32,11 +32,7 @@ export default function Logo(props) {
     >
       {logo && (
         <div className={imageClassName}>
-          <img
-            src={logo.src}
-            alt={alt}
-            className="!h-[21px] !w-[183px] md:!h-[31px] md:!w-[268px]"
-          />
+          <img src={logo.src} alt={alt} className="!h-8 md:!h-10" />
         </div>
       )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}

src/theme/SearchBar/index.js

@@ -1,5 +1,6 @@
 import SearchOverlay from "@site/src/components/Common/Search/Search";
 import React, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { AskAIWidget } from "@site/src/components/DocsHome/AskAIWidget";
 
 const Search = () => {
@@ -106,9 +107,11 @@ const Search = () => {
         id="ios-tmp-input"
         ref={focusHelperInputRef}
       />
-      {isOverlayOpen && (
-        <SearchOverlay onClose={() => setIsOverlayOpen(false)} />
-      )}
+      {isOverlayOpen &&
+        createPortal(
+          <SearchOverlay onClose={() => setIsOverlayOpen(false)} />,
+          document.body
+        )}
     </>
   );
 };

src/utils/use-lock-body-scroll.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+const useLockBodyScroll = (modalRef: React.RefObject<HTMLDivElement>) => {
+  useEffect(() => {
+    // Get original body overflow
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const originalTouchAction = window.getComputedStyle(
+      document.body
+    ).touchAction;
+
+    // Prevent scrolling on mount
+    document.body.style.overflow = "hidden";
+    document.body.style.touchAction = "none";
+
+    // Re-enable scrolling when component unmounts
+    return () => {
+      document.body.style.overflow = originalStyle;
+      document.body.style.touchAction = originalTouchAction;
+    };
+  }, [modalRef]); // Empty array ensures effect is only run on mount and unmount
+};
+
+export default useLockBodyScroll;