fix(client): mobile nav lock body scroll

LABIOQUIM · Apr 21, 2023 · 3b4ed6f · 3b4ed6f
1 parent 7a97449
commit 3b4ed6f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/apps/client/src/components/Layout/Header.tsx b/apps/client/src/components/Layout/Header.tsx
@@ -13,6 +13,8 @@ import { useTheme } from "@app/contexts/theme";
 import { Auth } from "../Auth";
 import { TextButton } from "../Button/Text";
 
+import { MobileNav } from "./MobileNav";
+
 export function Header() {
   const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
   const { pathname } = useRouter();
@@ -175,12 +177,7 @@ export function Header() {
         {renderedItems}
       </div>
 
-      {showMobileMenu ? (
-        <div className="md:hidden absolute inset-0 z-10 top-14 bg-zinc-200/80 backdrop-blur-md p-2 flex flex-col gap-y-4">
-          <Auth />
-          {renderedItems}
-        </div>
-      ) : null}
+      {showMobileMenu ? <MobileNav renderedItems={renderedItems} /> : null}
     </nav>
   );
 }
diff --git a/apps/client/src/components/Layout/MobileNav.tsx b/apps/client/src/components/Layout/MobileNav.tsx
@@ -0,0 +1,18 @@
+import { useLockBody } from "@app/hooks/use-lock-body";
+
+import { Auth } from "../Auth";
+
+interface MobileNavProps {
+  renderedItems: JSX.Element[];
+}
+
+export function MobileNav({ renderedItems }: MobileNavProps) {
+  useLockBody();
+
+  return (
+    <div className="md:hidden absolute inset-0 z-10 top-14 bg-zinc-200/80 backdrop-blur-md p-2 flex flex-col gap-y-4">
+      <Auth />
+      {renderedItems}
+    </div>
+  );
+}
diff --git a/apps/client/src/pages/_document.tsx b/apps/client/src/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html className="bg-zinc-50 overflow-hidden heropattern-diagonallines-black/10">
+    <Html className="bg-zinc-50 md:overflow-hidden heropattern-diagonallines-black/10">
       <Head>
         <link
           rel="icon"