VKT(Frontend): Take MobileNavigationMenuWithPortal into use [deploy]

Opetushallitus · Sep 30, 2024 · fd3cc4e · fd3cc4e
1 parent e341bd0
commit fd3cc4e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 27 deletions.
diff --git a/frontend/packages/vkt/src/components/layouts/Header.tsx b/frontend/packages/vkt/src/components/layouts/Header.tsx
@@ -1,12 +1,10 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { TFunction } from 'i18next';
-import { useState } from 'react';
 import { Link, matchPath, useLocation } from 'react-router-dom';
 import {
   CookieBanner,
   LangSelector,
-  MobileNavigationMenuContents,
-  MobileNavigationMenuToggle,
+  MobileNavigationMenuWithPortal,
   NavigationLinks,
   OPHClerkLogo,
   OPHLogoViewer,
@@ -102,11 +100,7 @@ const PublicNavigationLinks = () => {
   );
 };
 
-const PublicMobileNavigationMenu = ({
-  closeMenu,
-}: {
-  closeMenu: () => void;
-}) => {
+const PublicMobileNavigationMenu = () => {
   const translateCommon = useCommonTranslation();
   const { pathname } = useLocation();
   const { goodAndSatisfactoryLevel } = useAppSelector(featureFlagsSelector);
@@ -117,13 +111,23 @@ const PublicMobileNavigationMenu = ({
     translateCommon,
   );
 
+  const portalContainer = document.getElementById('mobile-menu-placeholder');
+
+  if (!portalContainer) {
+    return null;
+  }
+
   return (
-    <MobileNavigationMenuContents
+    <MobileNavigationMenuWithPortal
       navigationAriaLabel={translateCommon(
         'header.accessibility.mainNavigation',
       )}
+      openStateLabel="Sulje"
+      openStateAriaLabel="Sulje valikko"
+      closedStateLabel="Valikko"
+      closedStateAriaLabel="Avaa valikko"
       links={navigationLinks}
-      closeMenu={closeMenu}
+      portalContainer={portalContainer}
     />
   );
 };
@@ -159,7 +163,6 @@ export const Header = (): JSX.Element => {
       }
     }
   };
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   useInterval(heartBeat, 5000); // Every 5 seconds
 
@@ -218,16 +221,7 @@ export const Header = (): JSX.Element => {
           <div className="header__navigation">
             {isAuthenticated && <ClerkNavTabs />}
             {isPublicUrl && !isPhone && <PublicNavigationLinks />}
-            {isPublicUrl && isPhone && (
-              <MobileNavigationMenuToggle
-                openStateLabel="Sulje"
-                openStateAriaLabel="Sulje valikko"
-                closedStateLabel="Valikko"
-                closedStateAriaLabel="Avaa valikko"
-                isOpen={isMobileMenuOpen}
-                setIsOpen={setIsMobileMenuOpen}
-              />
-            )}
+            {isPublicUrl && isPhone && <PublicMobileNavigationMenu />}
           </div>
           <div className="header__language-select">
             {isAuthenticated && <ClerkHeaderButtons />}
@@ -243,11 +237,6 @@ export const Header = (): JSX.Element => {
             )}
           </div>
         </Toolbar>
-        {isPhone && isMobileMenuOpen && (
-          <PublicMobileNavigationMenu
-            closeMenu={() => setIsMobileMenuOpen(false)}
-          />
-        )}
       </AppBar>
       {!isClerkUI && (
         <CookieBanner

diff --git a/frontend/packages/vkt/src/routers/AppRouter.tsx b/frontend/packages/vkt/src/routers/AppRouter.tsx
@@ -67,7 +67,8 @@ export const AppRouter: FC = () => {
         <Notifier />
         <ScrollToTop />
         <PersistGate persistor={persistor} />
-        <main className="content" id="main-content">
+        <main className="content rows" id="main-content">
+          <div id="mobile-menu-placeholder" className="rows" />
           <div className="content__container">
             <Outlet />
           </div>