SHARED:VKT(Frontend): MobileNavigationMenu improvements, add opaque o…

…verlay on main contents if menu is open [deploy]

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.11.8] - 2024-12-17
+
+### Changed
+
+- TitlePage to accept optional className in props
+- Make MobileNavigationMenuWithPortal a controlled component
+
 ## [1.11.7] - 2024-12-17
 
 ### Changed

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.11.7",
+  "version": "1.11.8",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/MobileNavigationMenu/MobileNavigationMenu.tsx

@@ -142,15 +142,17 @@ export const MobileNavigationMenuWithPortal = ({
   closedStateAriaLabel,
   links,
   portalContainer,
+  isMenuOpen,
+  setIsMenuOpen,
 }: {
   openStateLabel: string;
   openStateAriaLabel: string;
   closedStateLabel: string;
   closedStateAriaLabel: string;
   portalContainer: HTMLElement;
+  isMenuOpen: boolean;
+  setIsMenuOpen: (open: boolean) => void;
 } & NavigationLinksProps) => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
   const toggleRef = useRef<HTMLDivElement>(null);
   const [containerElements, setContainerElements] = useState<
     Array<HTMLElement>

frontend/packages/shared/src/utils/common/titlepage.tsx

@@ -2,13 +2,14 @@ import { ReactNode } from 'react';
 
 import { useTitle } from '../..//hooks';
 
-interface TitleProps {
+export interface TitlePageProps {
   title: string;
   children: ReactNode;
+  className?: string;
 }
 
-export const TitlePage = ({ title, children }: TitleProps) => {
+export const TitlePage = ({ title, children, className }: TitlePageProps) => {
   useTitle(title);
 
-  return <>{children}</>;
+  return <div className={className}>{children}</div>;
 };

frontend/packages/shared/src/utils/index.ts

@@ -1,5 +1,5 @@
 import { CommonUtils } from './common/common';
-import { TitlePage } from './common/titlepage';
+import { TitlePage, TitlePageProps } from './common/titlepage';
 import { DateUtils } from './date/date';
 import type { FieldErrors } from './inputField/inputField';
 import { getErrors, hasErrors, InputFieldUtils } from './inputField/inputField';
@@ -14,4 +14,4 @@ export {
   getErrors,
   hasErrors,
 };
-export type { FieldErrors };
+export type { FieldErrors, TitlePageProps };

frontend/packages/vkt/package.json

@@ -25,6 +25,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].7"
+    "shared": "npm:@opetushallitus/[email protected].8"
   }
 }

frontend/packages/vkt/src/components/layouts/Header.tsx

@@ -34,8 +34,10 @@ import { AppRoutes, PublicNavigationLink } from 'enums/app';
 import { useAuthentication } from 'hooks/useAuthentication';
 import { useInterval } from 'hooks/useInterval';
 import { loadClerkUser } from 'redux/reducers/clerkUser';
+import { setMobileNavigationMenuState } from 'redux/reducers/mobileNavigationMenu';
 import { loadPublicUser } from 'redux/reducers/publicUser';
 import { featureFlagsSelector } from 'redux/selectors/featureFlags';
+import { mobileNavigationMenuSelector } from 'redux/selectors/mobileNavigationMenu';
 
 const isPathActive = (currentPath: string, route: AppRoutes) =>
   !!matchPath({ path: route, end: false }, currentPath);
@@ -111,6 +113,12 @@ const PublicMobileNavigationMenu = () => {
     translateCommon,
   );
 
+  const { open } = useAppSelector(mobileNavigationMenuSelector);
+  const dispatch = useAppDispatch();
+  const setIsMenuOpen = (open: boolean) => {
+    dispatch(setMobileNavigationMenuState(open));
+  };
+
   const portalContainer = document.getElementById('mobile-menu-placeholder');
 
   if (!portalContainer) {
@@ -128,6 +136,8 @@ const PublicMobileNavigationMenu = () => {
       closedStateAriaLabel="Avaa valikko"
       links={navigationLinks}
       portalContainer={portalContainer}
+      isMenuOpen={open}
+      setIsMenuOpen={setIsMenuOpen}
     />
   );
 };

frontend/packages/vkt/src/redux/reducers/mobileNavigationMenu.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface MobileNavigationMenuState {
+  open: boolean;
+}
+
+const initialState: MobileNavigationMenuState = {
+  open: false,
+};
+
+const mobileNavigationMenuSlice = createSlice({
+  name: 'mobileNavigationMenu',
+  initialState,
+  reducers: {
+    setMobileNavigationMenuState(state, action: PayloadAction<boolean>) {
+      state.open = action.payload;
+    },
+  },
+});
+
+export const mobileNavigationMenuReducer = mobileNavigationMenuSlice.reducer;
+export const { setMobileNavigationMenuState } =
+  mobileNavigationMenuSlice.actions;

frontend/packages/vkt/src/redux/selectors/mobileNavigationMenu.ts

@@ -0,0 +1,7 @@
+import { RootState } from 'configs/redux';
+import { MobileNavigationMenuState } from 'redux/reducers/mobileNavigationMenu';
+
+export const mobileNavigationMenuSelector: (
+  state: RootState,
+) => MobileNavigationMenuState = (state: RootState) =>
+  state.mobileNavigationMenu;

frontend/packages/vkt/src/redux/store/index.ts

@@ -20,6 +20,7 @@ import { examinerDetailsUpsertReducer } from 'redux/reducers/examinerDetailsUpse
 import { examinerExamEventOverviewReducer } from 'redux/reducers/examinerExamEventOverview';
 import { examinerExamEventUpsertReducer } from 'redux/reducers/examinerExamEventUpsert';
 import { featureFlagsReducer } from 'redux/reducers/featureFlags';
+import { mobileNavigationMenuReducer } from 'redux/reducers/mobileNavigationMenu';
 import { publicEducationReducer } from 'redux/reducers/publicEducation';
 import { publicEnrollmentReducer } from 'redux/reducers/publicEnrollment';
 import { publicEnrollmentAppointmentReducer } from 'redux/reducers/publicEnrollmentAppointment';
@@ -61,6 +62,7 @@ const reducer = combineReducers({
   examinerExamEventOverview: examinerExamEventOverviewReducer,
   examinerExamEventUpsert: examinerExamEventUpsertReducer,
   clerkListExaminer: clerkListExaminerReducer,
+  mobileNavigationMenu: mobileNavigationMenuReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, reducer);