components/Navbar/NavbarSubMenu.module.css

@@ -10,11 +10,9 @@
   opacity: 1;
   overflow: hidden;
   pointer-events: none;
-  transform: translateY(-4px);
   transition:
     max-height 250ms ease,
-    opacity 180ms ease,
-    transform 180ms ease;
+    opacity 180ms ease;
   background-color: var(--nav-bg);
 }
 
@@ -22,7 +20,6 @@
   max-height: var(--submenu-h);
   opacity: 1;
   pointer-events: auto;
-  transform: translateY(0);
 }
 
 .nav-submenu-inner {
@@ -95,10 +92,10 @@
     margin: 0 auto;
     display: grid;
     grid-auto-flow: column;
-    grid-template-rows: repeat(5, auto);
+    grid-template-rows: repeat(3, auto);
     grid-auto-columns: minmax(180px, max-content);
     column-gap: 48px;
-    row-gap: 4px;
+    row-gap: 16px;
     justify-content: start;
     align-items: start;
     padding: 24px 24px 48px 24px;

hooks/useToggleBodyOverflow.ts

@@ -11,15 +11,19 @@ export function useToggleBodyOverflow(locked: boolean, options: Options = {}) {
 
   useEffect(() => {
     const root = document.documentElement;
+    const body = document.body;
 
-    root.classList.toggle(className, locked);
-
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = locked ? "hidden" : "";
+    if (locked) {
+      root.classList.add(className);
+      body.style.overflow = "hidden";
+    } else {
+      root.classList.remove(className);
+      body.style.overflow = "";
+    }
 
     return () => {
       root.classList.remove(className);
-      document.body.style.overflow = prevOverflow;
+      body.style.overflow = "";
     };
   }, [locked, className]);
 }