fix: scroll-to-top button

asyncapi · May 11, 2023 · 08384e9 · 08384e9
1 parent d805c45
commit 08384e9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/components/buttons/ScrollButton.js b/components/buttons/ScrollButton.js
@@ -23,7 +23,7 @@ function ScrollButton(){
 
         })
     }
-    return <div className="fixed bottom-14 right-4  h-16 w-12 z-50">
+    return <div className="fixed bottom-14 right-4 h-16 w-12 z-40">
         {backToTopButton &&(
             <button className="rounded-full shadow-md bg-white " onClick={scrollUp}> <img src={scrollImage}/></button>
         )}

diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
@@ -9,7 +9,7 @@ import Link from 'next/link';
 
 export default function MobileNavMenu({ onClickClose = () => {} }) {
   return (
-    <div className="fixed top-0 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
+    <div className="fixed top-0 z-60 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
       <div className="rounded-lg shadow-lg">
         <div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
           <div className="pt-5 pb-6 px-5 space-y-6">
@@ -104,3 +104,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
     </div>
   );
 }
+
+MobileNavMenu.propTypes = {
+  onClickClose: () => {},
+};
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -9,7 +9,7 @@ import LearningPanel from './LearningPanel'
 import CommunityPanel from "./CommunityPanel"
 import MobileNavMenu from './MobileNavMenu'
 import otherItems from './otherItems'
-import Button from '../buttons/Button'
+// import Button from '../buttons/Button'
 import GithubButton from "../buttons/GithubButton"
 import { SearchButton } from '../AlgoliaSearch';
 import IconLoupe from '../icons/Loupe';
@@ -50,6 +50,12 @@ export default function NavBar({
     setOpen(null);
   }, [asPath])
 
+  useEffect(() => {
+    mobileMenuOpen ? 
+    document.body.style.overflow = 'hidden' :
+    document.body.style.overflow = 'auto';
+  }, [mobileMenuOpen])
+
   return (
     <div className={`bg-white ${className} z-50`}>
       <a href="#main-content" className="block md:inline-block absolute transform -translate-y-20 focus:translate-y-0 bg-gray-100 text-gray-700 p-5 text-md font-semibold" alt="Skip to main content">Skip to main content</a>
@@ -138,3 +144,8 @@ export default function NavBar({
     </div>
   )
 }
+
+NavBar.propTypes = {
+  className: '',
+  hideLogo: false,
+}