Start ensuring that mobile-menu is available wherever we have a site-…

…header #3325

src/read-side/html-pages/shared-components/standard-page-layout/standard-page-layout.ts

@@ -1,25 +1,32 @@
+import * as O from 'fp-ts/Option';
 import { pipe } from 'fp-ts/function';
+import { UserDetails } from '../../../../types/user-details';
 import { toContentWrappedInLayout } from '../../content-wrapped-in-layout';
 import { mobileMenu } from '../../mobile-menu/mobile-menu';
 import { PageLayout } from '../../page-layout';
 import { siteFooter } from '../site-footer';
 import { siteHeader } from '../site-header';
 
+const wrapWithHeaderAndFooter = (pageContainerClass: string, user: O.Option<UserDetails>) => (main: string) => `
+  <div class="${pageContainerClass}">
+    ${siteHeader(user)}
+
+    ${main}
+    ${siteFooter}
+  </div>
+  ${mobileMenu(user)}
+`;
+
 export const standardPageLayout: PageLayout = (user) => (page) => pipe(
   `
-    <div class="standard-page-container">
-      ${siteHeader(user)}
-
-      <main id="mainContent">
-        <div class="page-content">
-          <div class="sciety-grid-two-columns">
-            ${page.content}
-          </div>
-        </div>
-      </main>
-      ${siteFooter}
+  <main id="mainContent">
+    <div class="page-content">
+      <div class="sciety-grid-two-columns">
+        ${page.content}
+      </div>
     </div>
-    ${mobileMenu(user)}
+  </main>
   `,
+  wrapWithHeaderAndFooter('standard-page-container', user),
   toContentWrappedInLayout,
 );