Avoid the flash of menu drawer sliding in during mobile page load

components/menu/index.js

@@ -1,25 +1,34 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import cn from "classnames";
 import style from "./style";
 import Hamburger from "components/hamburger";
 
 const Menu = ({ topMenu }) => {
   const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef();
 
   useEffect(() => {
     if (typeof document !== "undefined" && document.body?.style) {
       document.body.style.overflow = showMenu ? "hidden" : ""; // prevent scrolling when menu is expanded on mobile
     }
   }, [showMenu]);
 
+  useEffect(() => {
+    if (menuRef.current?.style) {
+      menuRef.current.style.visibility = "visible";
+    }
+  }, []);
+
   const toggleMenu = (e) => setShowMenu((prevShowMenu) => !prevShowMenu);
 
   const hideMenu = (e) => setShowMenu(false);
 
   return (
     <>
       <nav
+        ref={menuRef}
+        style={{ visibility: "hidden" }} // To avoid the flash of menu drawer sliding in during mobile page load
         className={cn({
           [style.menu]: true,
           [style.showMenu]: showMenu,