From fd3cc4e28b0d8eb96916a951163f0e6a5d29bde5 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Mon, 30 Sep 2024 15:15:39 +0300
Subject: [PATCH] VKT(Frontend): Take MobileNavigationMenuWithPortal into use
 [deploy]

---
 .../vkt/src/components/layouts/Header.tsx     | 41 +++++++------------
 .../packages/vkt/src/routers/AppRouter.tsx    |  3 +-
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/frontend/packages/vkt/src/components/layouts/Header.tsx b/frontend/packages/vkt/src/components/layouts/Header.tsx
index 104fc2b6b..cfaba288d 100644
--- 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
index 86598b3cb..ffe7f5ef0 100644
--- 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>