fix(menu): added createEffect to prevent accidental scroll lock on wi…

…ndow resize
Roma-JS · Oct 22, 2024 · 7f88d6a · 7f88d6a
1 parent 7641fce
commit 7f88d6a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,4 +1,11 @@
-import { createSignal, For, type JSX, Show } from 'solid-js';
+import {
+  createEffect,
+  createSignal,
+  For,
+  onCleanup,
+  Show,
+  type JSX,
+} from 'solid-js';
 import {
   LangSelector,
   type LangSelectorProps,
@@ -9,7 +16,7 @@ import styles from './navbar.module.scss';
 import { createAppBreakpoints } from 'utils/media-queries';
 import { navbarLinks, preventSelfNavigation, socialLinks } from 'utils/routing';
 import type { Lang } from '@i18n/types';
-import { openMenuBtnId, type NavbarMessages } from './helpers';
+import { menuBtnId, type NavbarMessages } from './helpers';
 import { BrandMenuArea } from './components/BrandMenuArea';
 
 export interface NavbarProps {
@@ -27,13 +34,25 @@ export function Navbar(props: NavbarProps): JSX.Element {
   const isMenuVisible = () => !matches.lg && isMenuOpen();
   const navLinksEntries = () => Object.entries(navbarLinks[props.lang] ?? {});
 
-  const handleHamburgerMenuKeydown = (e: KeyboardEvent) => {
+  createEffect(() => {
+    if (!isMenuVisible()) {
+      return;
+    }
+
+    document.body.style.setProperty('overflow', 'hidden');
+    document.getElementById(menuBtnId)?.focus();
+
+    onCleanup(() => {
+      document.body.style.removeProperty('overflow');
+      document.getElementById(menuBtnId)?.focus();
+    });
+  });
+
+  const handleMenuKeydown = (e: KeyboardEvent) => {
     if (isMenuVisible() && e.key === 'Tab' && !e.shiftKey) {
-      const hamburgerMenuBtn: HTMLElement = document.querySelector(
-        '[class*=hamburgerMenuBtn]'
-      )!;
+      const hamburgerMenuBtn = document.getElementById(menuBtnId);
 
-      hamburgerMenuBtn.focus();
+      hamburgerMenuBtn?.focus();
 
       e.preventDefault();
       e.stopPropagation();
@@ -66,7 +85,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
         </menu>
         <menu class={styles.rightSide}>
           <button
-            id={openMenuBtnId}
+            id={menuBtnId}
             aria-label={props.messages.openMenu}
             type="button"
             aria-haspopup="true"
@@ -136,7 +155,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
                 rel="noopener noreferrer"
                 target="_blank"
                 href={socialLinks.youtube.href}
-                onKeyDown={handleHamburgerMenuKeydown}
+                onKeyDown={handleMenuKeydown}
               >
                 {props.messages.ctaWatchOurVideos}
               </a>

diff --git a/src/components/Navbar/helpers.ts b/src/components/Navbar/helpers.ts
@@ -10,9 +10,7 @@ const l10nKeys = [
   'enWebsite',
 ] as const;
 
-export type NavbarMessages = Readonly<
-  Record<(typeof l10nKeys)[number], string>
->;
+export type NavbarMessages = Readonly<Record<typeof l10nKeys[number], string>>;
 
 /**
  * Do not use this function inside a component,
@@ -27,5 +25,4 @@ export function getNavbarMessages(): NavbarMessages {
   ) as NavbarMessages;
 }
 
-export const closeMenuBtnId = 'rmjs-close-menu-btn';
-export const openMenuBtnId = 'rmjs-open-menu-btn';
+export const menuBtnId = 'rmjs-menu-btn';