Exportable nav

app/scripts/components/common/google-form.tsx

@@ -42,7 +42,8 @@ const ButtonAsNavLink = styled(Button)`
   `}
 `;
 
-function GoogleForm() {
+const GoogleForm: React.FC<{ title: string, src: string }> = (props) => {
+  const { title, src } = props;
   const { isRevealed, show, hide } = useFeedbackModal();
 
   return (
@@ -53,7 +54,7 @@ function GoogleForm() {
         onClick={show}
         style={{ color: 'white' }}
       >
-        Contact Us
+        {title}
       </ButtonAsNavLink>
       <Modal
         id='modal'
@@ -65,7 +66,7 @@ function GoogleForm() {
         closeButton
         content={
           <StyledGoogleForm
-            src={process.env.GOOGLE_FORM}
+            src={src}
             height={504}
             frameBorder={0}
             marginHeight={0}
@@ -77,6 +78,6 @@ function GoogleForm() {
       />
     </>
   );
-}
+};
 
 export default GoogleForm;

app/scripts/components/common/layout-root/index.tsx

@@ -3,7 +3,6 @@ import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
-
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import Banner from '../banner';
@@ -12,10 +11,14 @@ import { LayoutRootContext } from './context';
 import { useGoogleTagManager } from '$utils/use-google-tag-manager';
 
 import NavWrapper from '$components/common/nav-wrapper';
+import Logo from '$components/common/page-header/logo';
+import { mainNavItems, subNavItems} from '$components/common/page-header/default-config';
 
 const appTitle = process.env.APP_TITLE;
 const appDescription = process.env.APP_DESCRIPTION;
+
 export const PAGE_BODY_ID = 'pagebody';
+
 const Page = styled.div`
   display: flex;
   flex-direction: column;
@@ -51,7 +54,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
         thumbnail={thumbnail}
       />
       {banner && <Banner appTitle={title} {...banner} />}
-      <NavWrapper />
+      <NavWrapper mainNavItems={mainNavItems} subNavItems={subNavItems} logo={<Logo />} />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />
         {children}

app/scripts/components/common/nav-wrapper.js

@@ -27,16 +27,15 @@ const NavWrapper = styled.div`
     `}
 `;
 
-function PageNavWrapper() {
+function PageNavWrapper(props) {
   const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();
-
   return (
     <NavWrapper
       id={HEADER_WRAPPER_ID}
       shouldSlideHeader={isHeaderHidden}
       headerHeight={headerHeight}
     >
-      <PageHeader />
+      <PageHeader {...props} />
     </NavWrapper>
   );
 }