Merge pull request #253 from clarkeverdel/fix/mobile-nav

fix: make mobile nav clickable by forcing pointer-events
iodigital-com · Aug 8, 2024 · 8a15d73 · 8a15d73
2 parents 2f91463 + ec05ac6
commit 8a15d73
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
@@ -17,6 +17,7 @@ const LayoutWrapper = ({ children }) => {
     const headerHeight = headerRef.current.scrollHeight
     const handleScroll = () => {
       const hasScrolledPasHeader = window.scrollY >= headerHeight
+
       setScrolledPassedHeader(hasScrolledPasHeader)
 
       if (!hasScrolledPasHeader) {
@@ -39,7 +40,7 @@ const LayoutWrapper = ({ children }) => {
         ref={headerRef}
         className={`sticky top-0 z-50 duration-150 ease-out ${
           scrolledPassedHeader ? 'pointer-events-none' : `bg-io_${themeBg}-500`
-        } py-4 px-4 xl:bg-io_${themeBg}-500`}
+        } px-4 py-4 xl:bg-io_${themeBg}-500`}
       >
         <div className="container mx-auto flex items-center justify-between p-0">
           <div>
@@ -66,7 +67,10 @@ const LayoutWrapper = ({ children }) => {
               </div>
             </Link>
           </div>
-          <div className="relative flex items-center text-base leading-5" ref={navigationItemsRef}>
+          <div
+            className={`relative flex items-center text-base leading-5`}
+            ref={navigationItemsRef}
+          >
             <div
               className={`hidden items-center rounded-full pl-2 sm:flex sm:pr-12 ${
                 navigationIsOpen ? 'pointer-events-auto border-white' : 'border-gray-200'
@@ -120,7 +124,7 @@ const LayoutWrapper = ({ children }) => {
                 </svg>
               </button>
               <span
-                className={`absolute top-0 right-0 bottom-0 -z-10 h-16 w-full rounded-full border border-gray-200 bg-white transition-all duration-300 ease-out ${
+                className={`absolute bottom-0 right-0 top-0 -z-10 h-16 w-full rounded-full border border-gray-200 bg-white transition-all duration-300 ease-out ${
                   navigationIsOpen ? `max-w-2xl` : 'max-w-[calc(72px)]'
                 }
                 ${scrolledPassedHeader ? 'sm:opacity-100' : 'opacity-0'}`}

diff --git a/components/MobileNav.js b/components/MobileNav.js
@@ -18,10 +18,10 @@ const MobileNav = () => {
   }
 
   return (
-    <div className="sm:hidden">
+    <div className="pointer-events-auto sm:hidden">
       <button
         type="button"
-        className="pointer-events-auto h-16 w-16 rounded-full border border-gray-100 bg-white p-5"
+        className="h-16 w-16 rounded-full border border-gray-100 bg-white p-5"
         aria-label="Toggle Menu"
         onClick={onToggleNav}
       >
@@ -37,7 +37,7 @@ const MobileNav = () => {
         </svg>
       </button>
       <div
-        className={`fixed top-0 right-0 z-10 flex h-full w-full transform flex-col items-end bg-white pt-10 duration-300 ease-in-out ${
+        className={`fixed right-0 top-0 z-10 flex h-full w-full transform flex-col items-end bg-white pt-10 duration-300 ease-in-out ${
           navShow ? 'translate-x-0' : '-translate-x-full'
         }`}
       >