@eeacms/volto-cca-policy 0.1.15 → 0.1.16

package/CHANGELOG.md

@@ -4,11 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.15](https://github.com/eea/volto-cca-policy/compare/0.1.14...0.1.15) - 27 March 2023
+### [0.1.16](https://github.com/eea/volto-cca-policy/compare/0.1.15...0.1.16) - 29 March 2023
 
 #### :hammer_and_wrench: Others
 
-- Retry build [Ghiță Bizău - [`d878ed0`](https://github.com/eea/volto-cca-policy/commit/d878ed0c91c7441f0f65a1caf6336de5272c9907)]
+- Add whitelist for volto-nextcloud-video-block. [GhitaB - [`bb4e972`](https://github.com/eea/volto-cca-policy/commit/bb4e972fa4cdabc28f85bd902defce3906234a51)]
+- Add whitelist for volto-nextcloud-video-block. [GhitaB - [`577f659`](https://github.com/eea/volto-cca-policy/commit/577f65936809f6fcb9fa6a6bacc14f7b335f9707)]
+- Use UniversalLink for footer links [kreafox - [`efd34a4`](https://github.com/eea/volto-cca-policy/commit/efd34a4451b205ff5f3da022c781f425bd2f9572)]
+- Make it footer contact link to work with mailto [kreafox - [`e8938dc`](https://github.com/eea/volto-cca-policy/commit/e8938dc94aa5d47998ecf505084c3ae170ed59c3)]
+- Remove context navigation for RAST [kreafox - [`f85c972`](https://github.com/eea/volto-cca-policy/commit/f85c97259af58ff10b49b882eaec089cb8464f65)]
+- Make footer description bold [kreafox - [`2e4184e`](https://github.com/eea/volto-cca-policy/commit/2e4184e3f8d811cdc6cd7d7732d6f8115463183f)]
+- Add header override for search [kreafox - [`280489e`](https://github.com/eea/volto-cca-policy/commit/280489e6075ea31a2db4a595f681c68c0fa82b7d)]
+- Set number of columns for grid block [kreafox - [`b0ef1d0`](https://github.com/eea/volto-cca-policy/commit/b0ef1d0f19e293f0a9805f913b4040c8fddb1a9c)]
+- Refs #160116 - C3SIndicatorView: add disclaimer info. [GhitaB - [`765ed01`](https://github.com/eea/volto-cca-policy/commit/765ed013d38b56091c5e384ea1facaf31e3aa531)]
+- Undo initialBlocks [kreafox - [`2c17118`](https://github.com/eea/volto-cca-policy/commit/2c17118e07e784bb57ce2564f1108d8183ec5b78)]
+- CSS fix [kreafox - [`f77f74e`](https://github.com/eea/volto-cca-policy/commit/f77f74e01ba2458311411537e1477636bffc140f)]
+- Add headerSearchBox to Header [kreafox - [`b873129`](https://github.com/eea/volto-cca-policy/commit/b873129483f32ff9ab8d1ae0f2406be75e3f7afd)]
+- Add organisationName and websiteTitle to config [kreafox - [`ff41a58`](https://github.com/eea/volto-cca-policy/commit/ff41a588b4a8b0a8ff0d1f67310becbd7cbb6c1c)]
+- Set initialBlocks [kreafox - [`d1741f6`](https://github.com/eea/volto-cca-policy/commit/d1741f6a0c3e68c6172a19c51c53c221b351bb5d)]
+- Refs #160116 - C3SIndicatorView: iframe no border. [GhitaB - [`055d287`](https://github.com/eea/volto-cca-policy/commit/055d2872b0e33def79a6d5446d229b9febad813e)]
+- Refs #160116 - C3SIndicatorView: right buttons (.btn-right). [GhitaB - [`dcf7359`](https://github.com/eea/volto-cca-policy/commit/dcf73596a53e5e0621bd2a3809598afd6233718f)]
+- Refs #160116 - C3SIndicatorView: custom align for titles vs buttons. [GhitaB - [`02bdbca`](https://github.com/eea/volto-cca-policy/commit/02bdbcab131c3fa5b359d4de3749c70e26dd8285)]
+- Refs #160116 - C3SIndicatorView: update url params when showDetails changes. [GhitaB - [`c7ad9d1`](https://github.com/eea/volto-cca-policy/commit/c7ad9d140f265aff75c5963d126ef4eff92b57f7)]
+- Refs #160116 - C3SIndicatorView: add title for details/overview. [GhitaB - [`53fd12d`](https://github.com/eea/volto-cca-policy/commit/53fd12d42a77c9792bd677fb2d53dcd74d9c87a6)]
+- Refs #160116 - C3SIndicatorView: set Details mode if #details in url. [GhitaB - [`017b9cd`](https://github.com/eea/volto-cca-policy/commit/017b9cd433aedbf0166c259126be8d4ae59b835a)]
+- Refs #160116 - C3SIndicatorView: toggle Details vs Overview mode. [GhitaB - [`1c3f7af`](https://github.com/eea/volto-cca-policy/commit/1c3f7afd7f45e61c849e053337af69448b51363a)]
+- Refs #160116 - C3SIndicatorView: add overview iframe. [GhitaB - [`4ed4ed6`](https://github.com/eea/volto-cca-policy/commit/4ed4ed66bc8bf71a019c89070361f257fa81afc2)]
+- Refs #160116 - C3SIndicatorView: details iframe - use real data. [GhitaB - [`8fa2a7d`](https://github.com/eea/volto-cca-policy/commit/8fa2a7d3b6fa991959136e457299c16ad7d64a14)]
+- Refs #160116 - C3SIndicatorView: clean code. [GhitaB - [`a5b165e`](https://github.com/eea/volto-cca-policy/commit/a5b165e8386f519dbba23c18a555d8a7bcc6cd5d)]
+- WIP [Tiberiu Ichim - [`892c285`](https://github.com/eea/volto-cca-policy/commit/892c285a618b1daf92a7c0e8878a09671377ef65)]
+- Refs #160116 - C3SIndicatorView: WIP iframe. [GhitaB - [`97a42aa`](https://github.com/eea/volto-cca-policy/commit/97a42aa9eaa565a4b8c08427b4d0a62f28bf5a87)]
+### [0.1.15](https://github.com/eea/volto-cca-policy/compare/0.1.14...0.1.15) - 27 March 2023
+
 ### [0.1.14](https://github.com/eea/volto-cca-policy/compare/0.1.13...0.1.14) - 24 March 2023
 
 #### :hammer_and_wrench: Others
@@ -319,7 +346,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/Views/C3SIndicatorView.jsx

@@ -1,30 +1,125 @@
-import React from 'react';
-import {
-  HTMLField,
-  // ContentMetadata,
-  // LinksList,
-  // PublishedModifiedInfo,
-  // ShareInfo,
-} from '@eeacms/volto-cca-policy/helpers';
+import React, { useState, useEffect } from 'react';
+import spinner from '@eeacms/volto-cca-policy/../theme//assets/images/spinner.svg';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { Grid } from 'semantic-ui-react';
-// import { Fragment } from 'react';
 
-const Details = (props) => {
-  const showDetails = () => {
-    // console.log("WIP details");
+if (!__SERVER__) {
+  window.cds_toolbox = {
+    cds_public_path: 'https://cds.climate.copernicus.eu/toolbox/',
   };
+}
+
+const createIframe = (div_id, details_url, details_params, spinner_url) => {
+  return `
+  <iframe width="100%" height="800px" srcdoc="<html><head>
+    <title>CDS integration test</title>
+    <meta charset='utf-8' />
+    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
+    <script>
+        window.cds_toolbox = { cds_public_path: 'https://cds.climate.copernicus.eu/toolbox/' };
+    </script>
+    <script type='text/javascript' src='https://cds.climate.copernicus.eu/toolbox/toolbox-latest.js'></script>
+    </head>
+    <body>
+      <div class='t-ct'>
+        <div id='${div_id}'>
+          <div class='pre-app-loading'>
+            <img src='${spinner_url}' alt='Loading'>
+            <div>
+              ...loading configuration...
+            </div>
+          </div>
+        </div>
+      </div>
+      <script type='text/javascript'>
+      document.addEventListener('DOMContentLoaded',
+        function () {
+          window.cds_toolbox.runApp(
+            '${div_id}',
+            '${details_url}',
+            ${details_params}
+          );
+        }, false);
+      </script>
+    </body></html>"
+  />`;
+};
+
+const Details = (props) => {
+  const { content } = props;
+  const c3s_details_url = content.details_app_toolbox_url;
+  const c3s_details_params = JSON.stringify(
+    content.details_app_parameters,
+  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const [spinnerUrl, setSpinnerUrl] = useState(null);
+
+  React.useEffect(() => {
+    setSpinnerUrl(spinner);
+  }, []);
 
   return (
-    <a href="#details">
-      <button className="ui button primary" onClick={showDetails}>
-        Explore in detail
-      </button>
-    </a>
+    <div
+      className="iframe-container"
+      dangerouslySetInnerHTML={{
+        __html: createIframe(
+          'toolbox-app-details',
+          c3s_details_url,
+          c3s_details_params,
+          spinnerUrl,
+        ),
+      }}
+    />
+  );
+};
+
+const Overview = (props) => {
+  const { content } = props;
+  const c3s_overview_url = content.overview_app_toolbox_url;
+  const c3s_overview_params = JSON.stringify(
+    content.overview_app_parameters,
+  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const [spinnerUrl, setSpinnerUrl] = useState(null);
+
+  React.useEffect(() => {
+    setSpinnerUrl(spinner);
+  }, []);
+
+  return (
+    <div
+      className="iframe-container"
+      dangerouslySetInnerHTML={{
+        __html: createIframe(
+          'toolbox-app-overview',
+          c3s_overview_url,
+          c3s_overview_params,
+          spinnerUrl,
+        ),
+      }}
+    />
   );
 };
 
 function C3SIndicatorView(props) {
   const { content } = props;
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleIframe = () => {
+    setShowDetails(!showDetails);
+  };
+
+  useEffect(() => {
+    if (window.location.hash === '#details') {
+      setShowDetails(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (showDetails) {
+      window.history.pushState({}, '', '#details');
+    } else {
+      window.history.pushState({}, '', window.location.pathname);
+    }
+  }, [showDetails]);
 
   return (
     <div className="c3sindicator-view">
@@ -37,15 +132,39 @@ function C3SIndicatorView(props) {
               computer={12}
               className="col-full"
             >
-              <h1>{content.title}</h1>
-              <a href="/knowledge/european-climate-data-explorer/">
+              <a
+                href="/knowledge/european-climate-data-explorer/"
+                className="btn-right"
+              >
                 <button className="ui button primary">ECDE homepage</button>
               </a>
+              <h1>{content.title}</h1>
               <HTMLField
                 value={content.long_description}
                 className="long_description"
               />
-              <Details {...props} />
+              <a href="#details" className="btn-right">
+                <button className="ui button primary" onClick={toggleIframe}>
+                  {showDetails ? 'Go back' : 'Explore in detail'}
+                </button>
+              </a>
+              <h2>
+                {content.indicator_title} {showDetails && ' - Explore index'}
+              </h2>
+              {!__SERVER__ && !showDetails && <Overview {...props} />}
+              {!__SERVER__ && showDetails && <Details {...props} />}
+
+              <p>
+                Content in the European Climate Data Explorer pages is delivered
+                by the{' '}
+                <a href="https://climate.copernicus.eu/">
+                  Copernicus Climate Change Service (C3S)
+                </a>{' '}
+                implemented by ECMWF.{' '}
+                <a href="/knowledge/european-climate-data-explorer/disclaimer">
+                  Disclaimer
+                </a>
+              </p>
             </Grid.Column>
           </div>
         </Grid>

package/src/customizations/@eeacms/volto-eea-design-system/ui/Footer/Contact.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
+
+const Contact = ({ children, contacts }) =>
+  children?.length ? (
+    children
+  ) : (
+    <div className="contact-block">
+      {contacts?.map((contact, index) => {
+        return (
+          <div className="contact" key={index}>
+            <UniversalLink href={contact.link} className="bold">
+              {contact.text}
+            </UniversalLink>
+            {contact.children && (
+              <div className="subcontact">
+                {contact.children.map((child, index) => (
+                  <UniversalLink href={child.link} key={index}>
+                    {child.text}
+                  </UniversalLink>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+Contact.propTypes = {
+  contacts: PropTypes.array,
+  header: PropTypes.string,
+};
+
+export default Contact;

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -4,9 +4,8 @@
  */
 
 import React from 'react';
-import { Dropdown, Image } from 'semantic-ui-react';
+import { Dropdown, Image } from 'semantic-ui-react'; // Container, Menu, Grid
 import { connect, useDispatch, useSelector } from 'react-redux';
-
 import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import {
@@ -24,9 +23,10 @@ import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
-
 import cx from 'classnames';
 
+import HeaderMain from './HeaderMain';
+
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
 }
@@ -59,6 +59,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
 
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
+  // const headerSearchBox = eea.headerSearchBox || [];
   const { logo, logoWhite } = headerOpts || {};
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
@@ -198,8 +199,9 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           </Header.TopDropdownMenu>
         )}
       </Header.TopHeader>
-      <Header.Main
+      {/* <Header.Main
         pathname={pathname}
+        headerSearchBox={headerSearchBox}
         inverted={isHomePageInverse ? true : false}
         transparency={isHomePageInverse ? true : false}
         logo={
@@ -262,7 +264,73 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
             {props?.iconPosition === 'right' && props?.children}
           </UniversalLink>
         )}
-      ></Header.Main>
+      ></Header.Main> */}
+
+      <HeaderMain
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
+        pathname={pathname}
+        logo={
+          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
+            {!!subsite && subsite.title ? (
+              <>
+                {subsite.subsite_logo ? (
+                  <Logo
+                    src={subsite.subsite_logo?.scales.preview.download}
+                    title={subsite.title}
+                    alt={subsite.title}
+                    url={flattenToAppURL(subsite['@id'])}
+                  />
+                ) : (
+                  subsite.title
+                )}
+                <div className="subsite-logo">
+                  <Logo
+                    src={isHomePageInverse ? logoWhite : logo}
+                    title={eea.websiteTitle}
+                    alt={eea.organisationName}
+                    url={eea.logoTargetUrl}
+                  />
+                </div>
+              </>
+            ) : (
+              <Logo
+                src={isHomePageInverse ? logoWhite : logo}
+                title={eea.websiteTitle}
+                alt={eea.organisationName}
+                url={eea.logoTargetUrl}
+              />
+            )}
+          </div>
+        }
+        menuItems={items}
+        renderGlobalMenuItem={(item, { onClick }) => (
+          <a
+            href={item.url || '/'}
+            title={item.title}
+            onClick={(e) => {
+              e.preventDefault();
+              onClick(e, item);
+            }}
+          >
+            {item.title}
+          </a>
+        )}
+        renderMenuItem={(item, options, props) => (
+          <UniversalLink
+            href={item.url || '/'}
+            title={item.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.iconPosition !== 'right' && props?.children}
+            <span>{item.title}</span>
+            {props?.iconPosition === 'right' && props?.children}
+          </UniversalLink>
+        )}
+      />
     </Header>
   );
 };

package/src/customizations/volto/components/theme/Header/HeaderMain.jsx

@@ -0,0 +1,190 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react'; // , { Component }
+import { useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import { Container, Image, Menu, Grid } from 'semantic-ui-react';
+
+import closeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/close-line.svg';
+import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/menu-line.svg';
+
+import HeaderMenuPopUp from './HeaderMenuPopUp';
+
+const HeaderMain = ({
+  logo,
+  menuItems,
+  renderMenuItem,
+  renderGlobalMenuItem,
+  pathname,
+  transparency,
+  inverted,
+}) => {
+  const history = useHistory();
+  const [activeItem, setActiveItem] = React.useState(pathname);
+  const [menuIsActive, setMenuIsActive] = React.useState(false);
+  const [burger, setBurger] = React.useState('');
+
+  React.useEffect(() => {
+    setMenuIsActive(false);
+
+    setBurger('');
+    // remove active menu when we have no pathname which means we hit logo to go home
+    if (!pathname) {
+      setActiveItem('');
+    }
+  }, [pathname]);
+
+  const mobileBurgerOnClick = () => {
+    if (burger === '') {
+      setBurger('open');
+      setMenuIsActive(true);
+    } else {
+      setBurger('');
+      setMenuIsActive(false);
+      setActiveItem('');
+    }
+  };
+
+  const menuOnClickOutside = () => {
+    // restore active element if nothing was selected from the menu dropdown
+    if (pathname !== activeItem) {
+      setActiveItem(pathname);
+    }
+    // close mobile navigation when clicking outside if we have value for nav
+    if (burger) {
+      setBurger('');
+    }
+    // always close the  menu
+    setMenuIsActive(false);
+  };
+
+  const menuOnClick = (e, item) => {
+    setActiveItem(item['@id'] || item.url);
+    if (item.items.length) {
+      setMenuIsActive(true);
+    } else {
+      history.push(item.url);
+    }
+  };
+
+  // Listens for escape keydown event
+  React.useEffect(() => {
+    const escKeyPressed = (e) => {
+      if (e.key === 'Escape') {
+        // menuOnClickOutside();
+        // restore active element if nothing was selected from the menu dropdown
+        if (pathname !== activeItem) {
+          setActiveItem(pathname);
+        }
+        // close mobile navigation when clicking outside if we have value for nav
+        if (burger) {
+          setBurger('');
+        }
+        // always close the  menu & search
+        setMenuIsActive(false);
+      }
+    };
+
+    document.addEventListener('keydown', escKeyPressed);
+
+    return () => {
+      document.removeEventListener('keydown', escKeyPressed);
+    };
+  }, [activeItem, burger, pathname]);
+
+  const node = React.useRef();
+  const mobileMenuBurgerRef = React.useRef();
+  const desktopMenuRef = React.useRef();
+
+  return (
+    <div
+      className={`main bar ${transparency ? 'transparency' : ''}`}
+      ref={node}
+    >
+      <Container>
+        <Grid>
+          <Grid.Column mobile={8} tablet={8} computer={4}>
+            {logo}
+          </Grid.Column>
+          <Grid.Column mobile={4} tablet={4} computer={8}>
+            <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+              {menuItems && (
+                <div
+                  className="ui text eea-main-menu tablet or lower hidden menu"
+                  ref={desktopMenuRef}
+                  id={'navigation'}
+                >
+                  {menuItems.map((item) => (
+                    <Menu.Item
+                      name={item['@id'] || item.url}
+                      key={item['@id'] || item.url}
+                      active={
+                        activeItem.indexOf(item['@id']) !== -1 ||
+                        activeItem.indexOf(item.url) !== -1
+                      }
+                    >
+                      {renderGlobalMenuItem(item, {
+                        onClick: menuOnClick,
+                      })}
+                    </Menu.Item>
+                  ))}
+                </div>
+              )}
+
+              <Link to="/en/mission/knowledge-and-data/search-the-database">
+                <button
+                  className="search-action"
+                  tabIndex="0"
+                  aria-pressed="false"
+                  aria-haspopup="true"
+                >
+                  <Image src={searchIcon} alt="search button open/close" />
+                </button>
+              </Link>
+
+              <BurgerAction
+                className={`mobile ${burger}`}
+                onClick={mobileBurgerOnClick}
+                ref={mobileMenuBurgerRef}
+              >
+                <Image
+                  src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
+                  alt="menu icon open/close"
+                />
+              </BurgerAction>
+            </div>
+          </Grid.Column>
+        </Grid>
+      </Container>
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        pathName={pathname}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
+    </div>
+  );
+};
+
+const BurgerAction = React.forwardRef((props, ref) => (
+  <button
+    ref={ref}
+    className={`burger-action ${props.className}`}
+    tabIndex="0"
+    aria-pressed="false"
+    aria-haspopup="true"
+    onClick={props.onClick}
+  >
+    {props.children}
+  </button>
+));
+
+export default HeaderMain;

package/src/customizations/volto/components/theme/Header/HeaderMenuPopUp.js

@@ -0,0 +1,373 @@
+import React from 'react';
+import { Transition } from 'semantic-ui-react';
+import { Container, Grid, List, Icon, Accordion } from 'semantic-ui-react';
+
+import { cloneDeep } from 'lodash';
+
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+const createColumns = (item, length, renderMenuItem) => {
+  let subArrays = [];
+  let size = length;
+  for (let i = 0; i < item.items.length; i += size) {
+    subArrays.push(item.items.slice(i, i + size));
+  }
+
+  const column = subArrays.map((subArray, index) => (
+    <Grid.Column key={index}>
+      <List>
+        {subArray.map((arrayItem, idx) => (
+          <React.Fragment key={idx}>
+            {renderMenuItem(arrayItem, {
+              className: 'item',
+              role: 'listitem',
+              key: idx,
+            })}
+          </React.Fragment>
+        ))}
+      </List>
+    </Grid.Column>
+  ));
+
+  return column;
+};
+
+const ItemGrid = ({ item, columns, length, renderMenuItem }) => (
+  <>
+    {renderMenuItem(item, { className: 'sub-title' })}
+    {item.items.length ? (
+      <Grid columns={columns}>
+        {createColumns(item, length, renderMenuItem)}
+      </Grid>
+    ) : null}
+  </>
+);
+
+const Item = ({ item, icon = false, iconName, renderMenuItem }) => (
+  <>
+    {renderMenuItem(item, { className: 'sub-title' })}
+    <List className="menu-list">
+      {item.items.map((listItem, index) => (
+        <React.Fragment key={index}>
+          {renderMenuItem(
+            listItem,
+            {
+              className: 'item',
+              key: index,
+              role: 'listitem',
+            },
+            { children: icon && <Icon className={iconName} /> },
+          )}
+        </React.Fragment>
+      ))}
+    </List>
+  </>
+);
+
+const Topics = ({ menuItem, renderMenuItem }) => (
+  <Grid>
+    {menuItem.items.map((section, index) => (
+      <React.Fragment key={index}>
+        {section.title === 'At a glance' ? (
+          <Grid.Column width={3} id="at-a-glance">
+            <Item item={section} key={index} renderMenuItem={renderMenuItem} />
+          </Grid.Column>
+        ) : (
+          <Grid.Column width={9} key={index} id="topics-right-column">
+            <ItemGrid
+              item={section}
+              columns={4}
+              length={10}
+              key={index}
+              renderMenuItem={renderMenuItem}
+            />
+          </Grid.Column>
+        )}
+      </React.Fragment>
+    ))}
+  </Grid>
+);
+
+const Countries = ({ menuItem, renderMenuItem }) => (
+  <Grid>
+    <Grid.Column width={8}>
+      {menuItem.items.map((section, index) => (
+        <React.Fragment key={index}>
+          {section.title === 'EEA member countries' && (
+            <ItemGrid
+              item={section}
+              columns={5}
+              length={7}
+              renderMenuItem={renderMenuItem}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </Grid.Column>
+    <Grid.Column width={4}>
+      <Grid columns={1} className="nested-grid">
+        {menuItem.items.map((section, index) => (
+          <React.Fragment key={index}>
+            {section.title !== 'EEA member countries' && (
+              <Grid.Column>
+                <ItemGrid
+                  item={section}
+                  columns={2}
+                  length={3}
+                  renderMenuItem={renderMenuItem}
+                />
+              </Grid.Column>
+            )}
+          </React.Fragment>
+        ))}
+      </Grid>
+    </Grid.Column>
+  </Grid>
+);
+
+const StandardMegaMenuGrid = ({ menuItem, renderMenuItem }) => (
+  <Grid columns={4}>
+    {menuItem.items.map((section, index) => (
+      <Grid.Column key={index}>
+        <Item item={section} renderMenuItem={renderMenuItem} />
+      </Grid.Column>
+    ))}
+  </Grid>
+);
+
+const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
+  const topics = element.title === 'Topics' ? true : false;
+  let defaultIndex = -1;
+
+  return (
+    <>
+      {!topics ? (
+        <React.Fragment>
+          {element.items.map((item, index) => {
+            let firstLevelPanels = [];
+            if (!item.items.length) {
+              return (
+                <React.Fragment key={index}>
+                  {renderMenuItem(item, { className: 'item sub-title' })}
+                </React.Fragment>
+              );
+            }
+            let x = {};
+            x.key = item['@id'] || item['url'];
+            if (pathName.indexOf(item.url) !== -1) {
+              defaultIndex = index;
+            }
+            x.title = (
+              <Accordion.Title key={`title=${index}`} as="button">
+                {item.title}
+                <Icon className="ri-arrow-down-s-line" size="small" />
+              </Accordion.Title>
+            );
+            let overflow_item = cloneDeep(item);
+            overflow_item.title = 'See all';
+            x.content = (
+              <Accordion.Content>
+                {renderMenuItem(overflow_item, {
+                  className: 'item title-item',
+                })}
+                <SecondLevelContent
+                  element={item}
+                  renderMenuItem={renderMenuItem}
+                />
+              </Accordion.Content>
+            );
+            firstLevelPanels.push(x);
+            return (
+              <Accordion.Accordion
+                panels={firstLevelPanels}
+                key={index}
+                defaultActiveIndex={defaultIndex === index ? 0 : -1}
+              />
+            );
+          })}
+        </React.Fragment>
+      ) : (
+        <SecondLevelContent
+          element={element}
+          topics={true}
+          renderMenuItem={renderMenuItem}
+        />
+      )}
+    </>
+  );
+};
+
+const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
+  let content;
+  if (topics) {
+    const atAGlance = element.items.find(
+      (element) => element.title === 'At a glance',
+    );
+    const inDepth = element.items.find(
+      (element) => element.url.indexOf('in-depth') !== -1,
+    );
+    content = (
+      <List>
+        {atAGlance &&
+          atAGlance.items.map((item, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(item, {
+                key: index,
+                role: 'listitem',
+                className: 'item',
+              })}
+            </React.Fragment>
+          ))}
+        {inDepth && (
+          <React.Fragment key={inDepth.url}>
+            {renderMenuItem(inDepth, {
+              key: inDepth.url,
+              role: 'listitem',
+              className: 'item',
+            })}
+          </React.Fragment>
+        )}
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        {element.items.map((item, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(item, {
+              key: index,
+              role: 'listitem',
+              className: 'item',
+            })}
+          </React.Fragment>
+        ))}
+      </List>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
+  let defaultIndex = -1;
+  const rootPanels = [];
+  menuItems.forEach((element, index) => {
+    let x = {};
+    x.key = index;
+
+    if (pathName.indexOf(element.url) !== -1) {
+      defaultIndex = index;
+    }
+    x.title = (
+      <Accordion.Title key={`title-${index}`} index={index} as="button">
+        {element.title}
+        <Icon className="ri-arrow-down-s-line" size="small" />
+      </Accordion.Title>
+    );
+    let overview = cloneDeep(element);
+    x.content = (
+      <Accordion.Content key={index}>
+        <div className="mega-menu-title">
+          {/* Inverted right labeled button as a category title - Mobile */}
+          {renderMenuItem(
+            overview,
+            { className: 'ui button inverted icon right labeled' },
+            {
+              iconPosition: 'right',
+              children: (
+                <>
+                  {/* Add word overview to titles */}
+                  <span> overview</span>
+                  <Icon className={'arrow right icon'} alt={'Title icon'} />
+                </>
+              ),
+            },
+          )}
+        </div>
+        <FirstLevelContent
+          element={element}
+          renderMenuItem={renderMenuItem}
+          pathName={pathName}
+        />
+      </Accordion.Content>
+    );
+    rootPanels.push(x);
+  });
+
+  return <Accordion defaultActiveIndex={defaultIndex} panels={rootPanels} />;
+};
+
+function HeaderMenuPopUp({
+  menuItems,
+  renderMenuItem,
+  pathName,
+  onClose,
+  triggerRefs,
+  activeItem,
+  visible,
+}) {
+  const nodeRef = React.useRef();
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  const menuItem = menuItems.find(
+    (current) => current.url === activeItem || current['@id'] === activeItem,
+  );
+
+  return (
+    <Transition visible={visible} animation="slide down" duration={300}>
+      <div id="mega-menu" ref={nodeRef}>
+        <Container>
+          {menuItem && (
+            <div className="menu-content tablet hidden mobile hidden">
+              {/* Inverted right labeled button as a category title,
+                  for topics the button goes inside the grid */}
+              {menuItem.title && (
+                <div className="mega-menu-title">
+                  {renderMenuItem(
+                    menuItem,
+                    { className: 'ui button inverted icon right labeled' },
+                    {
+                      iconPosition: 'right',
+                      children: (
+                        <>
+                          {/* Add word overview to titles */}
+                          <span> overview</span>
+                          <Icon
+                            className={'arrow right icon'}
+                            alt={'Title icon'}
+                          />
+                        </>
+                      ),
+                    },
+                  )}
+                </div>
+              )}
+              {menuItem.title === 'Topics' ? (
+                <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />
+              ) : menuItem.title === 'Countries' ? (
+                <Countries
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              ) : (
+                <StandardMegaMenuGrid
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              )}
+            </div>
+          )}
+          <div className="tablet only mobile only">
+            <NestedAccordion
+              menuItems={menuItems}
+              renderMenuItem={renderMenuItem}
+              pathName={pathName}
+            />
+          </div>
+        </Container>
+      </div>
+    </Transition>
+  );
+}
+
+export default HeaderMenuPopUp;

package/src/index.js

@@ -96,13 +96,8 @@ const applyConfig = (config) => {
         {
           icon: 'comment outline',
           text: 'Contact',
-          link: '/en/mission/the-mission/contact-us',
+          link: 'climate.adapt@eea.europa.eu',
         },
-        // {
-        //   icon: 'envelope outline',
-        //   text: 'Sign up to our newsletter',
-        //   link: '/newsletter',
-        // },
       ],
     },
     headerSearchBox: [
@@ -114,8 +109,16 @@ const applyConfig = (config) => {
         //   'Looking for more information? Try searching the full EEA website content',
         // buttonTitle: 'Go to full site search',
       },
+      // {
+      //   path: '/en/mission',
+      //   placeholder: 'Search...',
+      //   description: 'Looking for more information?',
+      //   buttonTitle: 'Go to advanced search',
+      // },
     ],
     logoTargetUrl: '/en',
+    organisationName: 'Climate-ADAPT',
+    websiteTitle: 'Climate-ADAPT',
   };
 
   // Enable volto-embed
@@ -128,6 +131,19 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.video.restricted = false;
   }
 
+  config.blocks.blocksConfig.__grid = {
+    ...config.blocks.blocksConfig.__grid,
+    maxNumberOfColumns: 5,
+  };
+
+  config.blocks.blocksConfig.nextCloudVideo = {
+    ...config.blocks.blocksConfig.nextCloudVideo,
+    whiteList: [
+      'https://cmshare.eea.europa.eu',
+      'https://shareit.eea.europa.eu',
+    ],
+  };
+
   //console.log(config);
   config.views.contentTypesViews = {
     ...config.views.contentTypesViews,
@@ -145,13 +161,13 @@ const applyConfig = (config) => {
   };
 
   config.settings.contextNavigationLocations = [
-    {
-      title: 'Regional Adaptation Support Tool',
-      columns: 4,
-      topLevel: 2,
-      bottomLevel: 0,
-      rootPath: '/mission/knowledge-and-data/regional-adaptation-support-tool',
-    },
+    // {
+    //   title: 'Regional Adaptation Support Tool',
+    //   columns: 4,
+    //   topLevel: 2,
+    //   bottomLevel: 0,
+    //   rootPath: '/mission/knowledge-and-data/regional-adaptation-support-tool',
+    // },
     {
       title: 'UrbanAST',
       topLevel: 3,

package/theme/globals/site.overrides

@@ -46,7 +46,19 @@ div.video-view {
   }
 }
 
+// C3S Indicator view styles
+div.c3sindicator-view {
+  iframe {
+    border: none;
+  }
+}
+
 // General styles
+.btn-right {
+  margin: calc(2rem - 0.1em) 0em 1rem;
+  float: right;
+}
+
 div.share-info {
   margin-top: 1em;
   text-align: right;
@@ -76,6 +88,10 @@ div.content-metadata {
 
 // Mission subsites
 body.subsite-mkh {
+  .top.bar .ui.container {
+    z-index: 3;
+  }
+
   &.subsite-root {
     .segment.content-area {
       padding-top: 0;
@@ -99,6 +115,7 @@ body.subsite-mkh {
 
     p {
       font-size: 1.125rem;
+      font-weight: 600;
     }
   }
 
@@ -134,7 +151,7 @@ body.subsite-mkh {
   }
 
   .eea.header .subsite-logo {
-    z-index: unset;
+    z-index: 1;
     height: 100%;
 
     .logo {