@eeacms/volto-eea-design-system 0.4.5 → 0.5.0

package/CHANGELOG.md

@@ -4,8 +4,81 @@ 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.5.0](https://github.com/eea/volto-eea-design-system/compare/0.4.5...0.5.0)
+
+- fix(header-dropdown): mobile text is now visible [`#111`](https://github.com/eea/volto-eea-design-system/pull/111)
+- fix(header): Internal links in mega menu [`d8ca135`](https://github.com/eea/volto-eea-design-system/commit/d8ca13558c3e8c336800791f2fea8a8d33a2b602)
+- Update package.json [`9dc3816`](https://github.com/eea/volto-eea-design-system/commit/9dc38165a95deca1faf2dfccdc03fd6cab3d8c54)
+- refactor(header): and mega menu to latest spec #114 [`44fcf68`](https://github.com/eea/volto-eea-design-system/commit/44fcf68be242f97ced852b28ac3ab820dc0e1045)
+- fix(header): show active menu when clicking on children [`a54fa67`](https://github.com/eea/volto-eea-design-system/commit/a54fa67a1a92e2ab4216e6d149f66e1ee53aab89)
+- change(header): use Link instead of a tag for menu items [`9812b3f`](https://github.com/eea/volto-eea-design-system/commit/9812b3fba7b8305399d6972daf135b8a2d88e876)
+- change(header): hide first link(home) from header menu on site [`ae7f3b9`](https://github.com/eea/volto-eea-design-system/commit/ae7f3b9385620eb3d840dd90f512e37cd8556a6d)
+- change(header): renamed mega menu items href attribute to url [`3ed8144`](https://github.com/eea/volto-eea-design-system/commit/3ed8144589f87a9ad219c97193863c999a72cb6d)
+- change(header): disable sticky setting until feature is more stable [`1d7af95`](https://github.com/eea/volto-eea-design-system/commit/1d7af954c85cb6a8a657c1625e4ae863e562346a)
+- refactor(header): add link for menu title inside desktop mega menu [`24355d0`](https://github.com/eea/volto-eea-design-system/commit/24355d000b2bd808b2031cd2b78e60cafb9ad5b1)
+- change(megamenu): typo correction and key setting on list.items [`96d2c4f`](https://github.com/eea/volto-eea-design-system/commit/96d2c4fbfa722d22a215e8d27f1400e65fe9476e)
+- Autobuild of docusaurus docs [`e75be30`](https://github.com/eea/volto-eea-design-system/commit/e75be303421cd7ea70b0a15998636c6416459869)
+- feat(hero): added storybook implementation of hero component #172 [`17b9d16`](https://github.com/eea/volto-eea-design-system/commit/17b9d1693e31bf7b3b41ca84be7bd21f07065674)
+- Autobuild of docusaurus docs [`fe9d209`](https://github.com/eea/volto-eea-design-system/commit/fe9d209da5e493a6ce5c7fee63a47ba3d9788530)
+- feature(item): added themes to item icons #190 [`a6a2907`](https://github.com/eea/volto-eea-design-system/commit/a6a2907df09575a18fb6e81dc52e8d6651eff118)
+- Override tile image in .block parrent [`005655d`](https://github.com/eea/volto-eea-design-system/commit/005655ddff6f45e211f1ff8156b0b7efa1e47a2e)
+- Move item icon themes to item.overrides [`31e8921`](https://github.com/eea/volto-eea-design-system/commit/31e8921f4ee4d92ba3a9c58275b41dd3101cffd2)
+- Override only the width [`8d49270`](https://github.com/eea/volto-eea-design-system/commit/8d4927084e5daedcb69e6f3a57cab73a9016a55f)
+- Add end of line [`51639d8`](https://github.com/eea/volto-eea-design-system/commit/51639d804a2b84f66373fb77c569bcc43b22e303)
+- Add item themes; override .block .ui.image width based on size [`06010db`](https://github.com/eea/volto-eea-design-system/commit/06010db21398638d46d2e007317d72a7aff7e7d9)
+- refactor(hero): add full-heigh control to adjust height [`a45cb7c`](https://github.com/eea/volto-eea-design-system/commit/a45cb7c599cdc11426207001e67d8f7d727233fe)
+- refactor(utilities): update hex with color token [`8dc65ef`](https://github.com/eea/volto-eea-design-system/commit/8dc65ef55a62dcb32b6eb8a684524a8dc1fa6ba6)
+- refactor(headings): update heading sizes for mobile [`19f3cca`](https://github.com/eea/volto-eea-design-system/commit/19f3ccacaf2c744b5f5c2ec8635773de7ef0016b)
+- refactor(header): minor updates on colors and widths [`a70129f`](https://github.com/eea/volto-eea-design-system/commit/a70129fd929fedb344a47e049cca94274e84a3b1)
+- refactor(hero):make button variant and inverted different button controls [`7e182ca`](https://github.com/eea/volto-eea-design-system/commit/7e182ca9ecdb76507205d84f83cad6a79dd74a03)
+- fix(header): fix accessibility issue by David [`783dcec`](https://github.com/eea/volto-eea-design-system/commit/783dcec0d140e6e6e568d0f82833dcbf8a5c7d3d)
+- fix(header): accessibility and dropdown possition fixes [`505ac36`](https://github.com/eea/volto-eea-design-system/commit/505ac36a27d86e620fb5af515a0b8b5979610f0a)
+- refactor(header):main bar sticky on scroll up [`9c9e7c6`](https://github.com/eea/volto-eea-design-system/commit/9c9e7c6f9651c0663a1eab1856d7324a73afb2de)
+- refactor(megaMenu): update mega menu in header component [`2d1ce45`](https://github.com/eea/volto-eea-design-system/commit/2d1ce454553d116efa96288079b8b77649e10abb)
+- refactor(header): add control for inverted logo [`023ca45`](https://github.com/eea/volto-eea-design-system/commit/023ca45e6f263166211cbea0d63b1938d11221da)
+- refactor(hero): move quoted utility to h2 tag [`7376676`](https://github.com/eea/volto-eea-design-system/commit/7376676b4875494f16c49945f6b5dac19c6b8009)
+- refactor(header): update main section and and add color variations [`f2f0fd1`](https://github.com/eea/volto-eea-design-system/commit/f2f0fd1de7c04eff4b2a9b62d03dd13a1b0d69bc)
+- refactor(header): update structure and variables of top bar [`af70909`](https://github.com/eea/volto-eea-design-system/commit/af709094f94f0cc2e2309b1aedb376e45dc7f136)
+- refactor(hero):prettier & style changes [`d846884`](https://github.com/eea/volto-eea-design-system/commit/d84688440417a430afd9fd24f4c8cfeef0121203)
+- refactor(hero): align hero's text and meta seperately [`4fa958f`](https://github.com/eea/volto-eea-design-system/commit/4fa958f7c7cc6d331a8eb7aaf25dc44d6cd3632a)
+- refactor(hero):add button variant controls [`f362a7b`](https://github.com/eea/volto-eea-design-system/commit/f362a7b2ec273131fa0876f23b74c740c7217b3a)
+- refactor(hero): update variables with new design tokens [`1d97922`](https://github.com/eea/volto-eea-design-system/commit/1d9792231c50f12fd68364e201054f6ab0926665)
+- feat(hero): add hero block component and stories [`6019fc8`](https://github.com/eea/volto-eea-design-system/commit/6019fc843ec14a8afc7558e92c2d4b4bb14ee199)
+- refactor(header): add control for main section stickiness [`2f07572`](https://github.com/eea/volto-eea-design-system/commit/2f07572f78074137e7e6a49585273210ed5cedcb)
+- change(header): disabled active menu when clicking on globalnav links [`3f7b5ee`](https://github.com/eea/volto-eea-design-system/commit/3f7b5eedb038b51fbae8a14a683dc6adc919549b)
+- fix(header): transparency class should apply on the current bg color or image [`f9a0033`](https://github.com/eea/volto-eea-design-system/commit/f9a0033c5538cb19f08f26cf28d47954cc52607d)
+- refactor(header) add position sticky & transparent for main section [`29df772`](https://github.com/eea/volto-eea-design-system/commit/29df772edfe23b1752aa3d184659eea90c3c9221)
+- refactor(header): add control that toggles transparency class on main section [`b8d4bdb`](https://github.com/eea/volto-eea-design-system/commit/b8d4bdb9c527f102ffd3718f32bf1a43309a9bb4)
+- refactor(Language List): add less variables [`7ccc1cc`](https://github.com/eea/volto-eea-design-system/commit/7ccc1ccf57419b6eecbf71d479db72b84428d43a)
+- refactor(Language List): render language dropdown as ul and li elements [`3617442`](https://github.com/eea/volto-eea-design-system/commit/3617442da78af07d3f473d0c43c47dd48c9b2ac3)
+- change(header): mark top level active menu item [`665c449`](https://github.com/eea/volto-eea-design-system/commit/665c449bc2667cc1471a4b97923c897ad3506792)
+- change(header): target link instead of span directly [`9e865fb`](https://github.com/eea/volto-eea-design-system/commit/9e865fbb5b256196756c3d84de397296ac0b447a)
+- change(header): introduced item class to the mega menu link content [`00ca376`](https://github.com/eea/volto-eea-design-system/commit/00ca376ea4cf1de4851e84567b97c374ee7f66e3)
+- fix(header): dropdown disappears after window resize #116 [`fc7dd8b`](https://github.com/eea/volto-eea-design-system/commit/fc7dd8bd7911421fb734a696a2dd5d3ad3b652b0)
+- change(header): use viewport width for changing mobile text in header dropdowns [`b50fa58`](https://github.com/eea/volto-eea-design-system/commit/b50fa585c0abeedc04a46395f08e50a9e112c430)
+- update storybook header.topdropdown [`e58ac08`](https://github.com/eea/volto-eea-design-system/commit/e58ac0821af56c06272e3373383647cbbff20978)
+- rename to viewportWidth [`32162e7`](https://github.com/eea/volto-eea-design-system/commit/32162e7c695774bbb68ac63a0008e8b148f1e9f5)
+- don't connect component to store [`470b8ba`](https://github.com/eea/volto-eea-design-system/commit/470b8bade5e8f2eaabb20a7bb02c8e82ca42f8a0)
+- use volto-screen-helper width [`ea156aa`](https://github.com/eea/volto-eea-design-system/commit/ea156aad1100166ba78635163cfacdcfb913c1d4)
+- fix(header): dropdowns disappear on resize [`52338fd`](https://github.com/eea/volto-eea-design-system/commit/52338fd3e711f4918612e052dc2034a8d9bd40bd)
+- fix(header-topdropdown): dedupe html dropdown elements for topdropdowns #115 [`f10a7a8`](https://github.com/eea/volto-eea-design-system/commit/f10a7a8743a5fb2cecd0c3374ec9d894e914143f)
+- behave as mobile under 480 only [`11b99e1`](https://github.com/eea/volto-eea-design-system/commit/11b99e15cb83245a32bb04f3937f5b95a60b1e95)
+- make it account for all mobile-s,m,l [`69e23ae`](https://github.com/eea/volto-eea-design-system/commit/69e23ae8d12042f241dc53c9e296c340d5b17089)
+- fix(header-topdropdown): dedupe html elements for topdropdowns [`cd8a2a7`](https://github.com/eea/volto-eea-design-system/commit/cd8a2a7ea091e81b736438f7c2a87c254af1b092)
+- refactor(header): restore union dropdown after implementation [`7e98bab`](https://github.com/eea/volto-eea-design-system/commit/7e98bab497ee10ad89d2dfed76c7117b633206fe)
+- fix(header): mobile dropdown now visible [`34371b4`](https://github.com/eea/volto-eea-design-system/commit/34371b436f2ec100f3920f78de49983ba16679b0)
+- Add divider content for metadata field in Banner [`327ad1c`](https://github.com/eea/volto-eea-design-system/commit/327ad1c5fdca0d376d04fd36084b940e5dd016ab)
+- refactor(header): update search input [`368962e`](https://github.com/eea/volto-eea-design-system/commit/368962eabb668e2ec1bdcd18ae81658e7b1d911b)
+- refactor(header): remove unused imports [`7e232db`](https://github.com/eea/volto-eea-design-system/commit/7e232db6ce0b2553be79d98d8497fa06f548b772)
+- refactor(header): update search input and file endings [`afab36f`](https://github.com/eea/volto-eea-design-system/commit/afab36f96f245e197eff528cb1d9e6fea45bc7ba)
+- refactor(header): add fluid font sizes [`5f2743e`](https://github.com/eea/volto-eea-design-system/commit/5f2743e39107fd1bd00a54e03bf92963eb9853f2)
+- refactor(header): minor responsive fixes [`16a0006`](https://github.com/eea/volto-eea-design-system/commit/16a000634505c9e8f8b310860a30b62798a0fb87)
+
 #### [0.4.5](https://github.com/eea/volto-eea-design-system/compare/0.4.4...0.4.5)
 
+> 8 June 2022
+
+- change(tabs,footer): tabs styling and react warning fixes [`#188`](https://github.com/eea/volto-eea-design-system/pull/188)
 - Autobuild of docusaurus docs [`728c62b`](https://github.com/eea/volto-eea-design-system/commit/728c62b1ddc9ea5e7f551230b657897c6eafbc57)
 - change(tabs): Add style for tabs accordion template #187 [`fb8adbf`](https://github.com/eea/volto-eea-design-system/commit/fb8adbf84ac564a14d45bb6e8f4e1661811672d5)
 - Autobuild of docusaurus docs [`06fbae7`](https://github.com/eea/volto-eea-design-system/commit/06fbae751c4f14ace793d4aa51f1ba0b52fec735)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/semantic.less

@@ -272,3 +272,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/languageLabeledIcon';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/hero';
+}

package/src/ui/Header/Header.jsx

@@ -13,6 +13,12 @@ import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/asse
 
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
+import PropTypes from 'prop-types';
+
+Header.propTypes = {
+  transparency: PropTypes.bool,
+  inverted: PropTypes.bool,
+};
 
 function Header({ children }) {
   return <div className="eea header">{children}</div>;
@@ -39,7 +45,7 @@ const TopDropdownMenu = ({
   text,
   viewportWidth,
 }) => {
-  const isMobile = viewportWidth < 480;
+  const isMobile = viewportWidth < 767;
 
   const Component = ({ mobileText }) => (
     <Dropdown
@@ -57,14 +63,39 @@ const TopDropdownMenu = ({
   );
 };
 
+// disable sticky until it's more stable
+// const useScrollingUp = () => {
+//   let prevScroll;
+//
+//   if (process.browser) {
+//     prevScroll = window.pageYOffset;
+//   }
+//   const [scrollingUp, setScrollingUp] = React.useState(false);
+//   const handleScroll = () => {
+//     const currScroll = window.pageYOffset;
+//     const isScrolled = prevScroll > currScroll;
+//     setScrollingUp(isScrolled);
+//     prevScroll = currScroll;
+//   };
+//   React.useEffect(() => {
+//     window.addEventListener('scroll', handleScroll, { passive: true });
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll, { passive: true });
+//     };
+//   });
+//   return scrollingUp;
+// };
+
 const Main = ({
   logo,
   menuItems,
   renderMenuItem,
   renderGlobalMenuItem,
   pathname,
+  transparency,
+  inverted,
 }) => {
-  const [activeItem, setActiveItem] = React.useState('');
+  const [activeItem, setActiveItem] = React.useState(pathname);
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
@@ -73,15 +104,19 @@ const Main = ({
     setMenuIsActive(false);
     setSearchIsActive(false);
     setBurger('');
+    // remove active menu when we have no pathname which means we hit logo to go home
+    if (!pathname) {
+      setActiveItem('');
+    }
   }, [pathname]);
 
   const searchOnClick = (e, x) => {
     if (menuIsActive === true) {
       setBurger('');
       setMenuIsActive(false);
+      setActiveItem('');
     }
     setSearchIsActive(!searchIsActive);
-    setActiveItem('');
   };
 
   const mobileBurgerOnClick = () => {
@@ -95,49 +130,57 @@ const Main = ({
     } else {
       setBurger('');
       setMenuIsActive(false);
+      setActiveItem('');
     }
   };
 
-  const desktopBurgerOnClick = () => {
-    setMenuIsActive(false);
-    setActiveItem('');
-  };
-
   const menuOnClick = (e, item) => {
     if (searchIsActive) setSearchIsActive(false);
     setActiveItem(item['@id'] || item.url);
     setMenuIsActive(true);
   };
 
-  React.useEffect(() => {
-    if (searchIsActive || burger === 'open' || menuIsActive) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-  }, [searchIsActive, burger, menuIsActive]);
+  // React.useEffect(() => {
+  //   if (searchIsActive || burger === 'open' || menuIsActive) {
+  //     document.body.style.overflow = 'hidden';
+  //   } else {
+  //     document.body.style.overflow = 'unset';
+  //   }
+  // }, [searchIsActive, burger, menuIsActive]);
 
   const node = React.useRef();
   const searchButtonRef = React.useRef();
-  const desktopMenuBurgerRef = React.useRef();
   const mobileMenuBurgerRef = React.useRef();
 
+  // disable sticky setting until feature is more stable
+  // const isScrollingUp = useScrollingUp();
+  // <div
+  // className={`main bar ${transparency ? 'transparency' : ''} ${
+  //     isScrollingUp ? 'sticky' : ''
+  // }`}
+  // >
   return (
-    <div className="main bar" ref={node}>
+    <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="main-menu">
-              {!menuIsActive && menuItems && (
+            <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+              {menuItems && (
                 <Menu className="eea-main-menu tablet or lower hidden" text>
                   {menuItems.map((item) => (
                     <Menu.Item
                       name={item['@id'] || item.url}
-                      active={activeItem === item.key}
                       key={item['@id'] || item.url}
+                      active={
+                        activeItem.indexOf(item['@id']) !== -1 ||
+                        activeItem.indexOf(item.url) !== -1
+                      }
                     >
                       {renderGlobalMenuItem(item, {
                         onClick: menuOnClick,
@@ -146,16 +189,6 @@ const Main = ({
                   ))}
                 </Menu>
               )}
-              {menuIsActive && (
-                <Header.BurgerAction
-                  className="desktop"
-                  onClick={desktopBurgerOnClick}
-                  ref={desktopMenuBurgerRef}
-                >
-                  {/* <Icon name="close" /> */}
-                  <Image src={closeIcon} alt="menu close icon" />
-                </Header.BurgerAction>
-              )}
               <div
                 className="search-action"
                 onClick={searchOnClick}
@@ -173,9 +206,6 @@ const Main = ({
                 onClick={mobileBurgerOnClick}
                 ref={mobileMenuBurgerRef}
               >
-                {/* <Icon
-                  name={this.state.burger === 'open' ? 'close' : 'bars'}
-                ></Icon> */}
                 <Image
                   src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
                   alt="menu icon open/close"
@@ -197,7 +227,7 @@ const Main = ({
           activeItem={activeItem}
           menuItems={menuItems}
           onClose={mobileBurgerOnClick}
-          triggerRefs={[mobileMenuBurgerRef, desktopMenuBurgerRef]}
+          triggerRefs={[mobileMenuBurgerRef]}
         />
       )}
     </div>

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,76 +1,237 @@
 import React from 'react';
-import { Container } from 'semantic-ui-react';
-import cx from 'classnames';
+import {
+  Container,
+  Divider,
+  Grid,
+  List,
+  Icon,
+  Accordion,
+} from 'semantic-ui-react';
 
+import { Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-const levels = ['first', 'second', 'third'];
+const createColumns = (item, length) => {
+  let subArrays = [];
+  let size = length;
+  for (let i = 0; i < item.items.length; i += size) {
+    subArrays.push(item.items.slice(i, i + size));
+  }
 
-const Item = ({ item, renderMenuItem }) => (
+  const column = subArrays.map((subArray, index) => (
+    <Grid.Column key={index}>
+      <List>
+        {subArray.map((arrayItem, idx) => (
+          <Link role="listitem" className="item" to={arrayItem.url} key={idx}>
+            {arrayItem.title}
+          </Link>
+        ))}
+      </List>
+    </Grid.Column>
+  ));
+
+  return column;
+};
+
+const ItemGrid = ({ item, columns, length }) => (
+  <>
+    <Link className="sub-title" to={item.url}>
+      {item.title}
+    </Link>
+    <Grid columns={columns}>{createColumns(item, length)}</Grid>
+  </>
+);
+
+const Item = ({ item, icon = false, iconName }) => (
   <>
-    {item.items.length > 0 && (
-      <label htmlFor={`drop-${item['@id'] || item.url}`} className="toggle">
-        {item.title}
-      </label>
-    )}
-    {renderMenuItem(item)}
-    {item.items.length > 0 && (
-      <input type="checkbox" id={`drop-${item['@id'] || item.url}`} />
-    )}
+    <Link className="sub-title" to={item.url}>
+      {item.title}
+    </Link>
+    <List className="menu-list">
+      {item.items.map((listItem, index) => (
+        <Link role="listitem" className="item" to={listItem.url} key={index}>
+          {icon && <Icon className={iconName} />}
+          {listItem.title}
+        </Link>
+      ))}
+    </List>
   </>
 );
 
-const ItemsList = ({ items, renderMenuItem, level = 0, activeItem }) => (
-  <ul
-    className={cx(
-      level === 0 ? 'menu' : 'sub',
-      levels[level],
-      `level-${level}`,
-    )}
-  >
-    {items.map((item) => (
-      <li
-        key={item['@id'] || item.url}
-        className={cx({
-          hasSubMenu: item.items?.length > 0,
-          active: (item['@id'] || item.url) === activeItem,
-        })}
-      >
-        <Item item={item} renderMenuItem={renderMenuItem} />
-
-        {item.items.length > 0 && (
-          <ItemsList
-            items={item.items}
-            level={level + 1}
-            renderMenuItem={renderMenuItem}
-            activeItem={activeItem}
-          />
+const Topics = ({ menuItem }) => (
+  <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} icon={true} iconName="ri-leaf-line" />
+          </Grid.Column>
+        ) : (
+          <Grid.Column width={9} key={index}>
+            <ItemGrid item={section} columns={4} length={10} />
+          </Grid.Column>
         )}
-      </li>
+      </React.Fragment>
+    ))}
+  </Grid>
+);
+
+const Countries = ({ menuItem }) => (
+  <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} />
+          )}
+        </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} />
+              </Grid.Column>
+            )}
+          </React.Fragment>
+        ))}
+      </Grid>
+    </Grid.Column>
+  </Grid>
+);
+
+const StandardMegaMenuGrid = ({ menuItem }) => (
+  <Grid columns={4}>
+    {menuItem.items.map((section, index) => (
+      <Grid.Column key={index}>
+        <Item item={section} />
+      </Grid.Column>
     ))}
-  </ul>
+  </Grid>
 );
 
-function HeaderMenuPopUp({
-  menuItems,
-  onClose,
-  triggerRefs,
-  renderMenuItem,
-  activeItem,
-}) {
+const FirstLevelContent = ({ element }) => {
+  const topics = element.title === 'Topics' ? true : false;
+
+  const firstLevelPanels = [];
+  let content;
+  if (!topics) {
+    element.items.forEach((item, index) => {
+      let x = {};
+      x.key = item['@id'];
+      x.title = (
+        <Accordion.Title key={`title=${index}`}>
+          {item.title}
+          <Icon className="ri-arrow-down-s-line" size="small" />
+        </Accordion.Title>
+      );
+      x.content = (
+        <Accordion.Content key={index}>
+          <SecondLevelContent element={item} />
+        </Accordion.Content>
+      );
+      firstLevelPanels.push(x);
+    });
+    content = <Accordion.Accordion panels={firstLevelPanels} />;
+  } else {
+    content = <SecondLevelContent element={element} topics={true} />;
+  }
+  return <>{content}</>;
+};
+
+const SecondLevelContent = ({ element, topics = false }) => {
+  let content;
+  if (topics) {
+    const atAGlance = element.items.find(
+      (element) => element.title === 'At a glance',
+    );
+    content = (
+      <List>
+        {atAGlance.items.map((item, index) => (
+          <Link role="listitem" className="item" to={item.url} key={index}>
+            {item.title}
+          </Link>
+        ))}
+        <Link
+          role="listitem"
+          className="item"
+          to={element.url}
+          key={element['@id']}
+        >
+          A-Z Topics
+        </Link>
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        {element.items.map((item, index) => (
+          <Link role="listitem" className="item" to={item.url} key={index}>
+            {item.title}
+          </Link>
+        ))}
+      </List>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const NestedAccordion = ({ menuItems }) => {
+  const rootPanels = [];
+  menuItems.forEach((element, index) => {
+    let x = {};
+    x.key = index;
+    x.title = (
+      <Accordion.Title key={`title-${index}`}>
+        {element.title}
+        <Icon className="ri-arrow-down-s-line" size="small" />
+      </Accordion.Title>
+    );
+    x.content = (
+      <Accordion.Content key={index}>
+        <FirstLevelContent element={element} />
+      </Accordion.Content>
+    );
+    rootPanels.push(x);
+  });
+
+  return <Accordion panels={rootPanels} />;
+};
+
+function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
   const nodeRef = React.useRef();
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
+  const menuItem = menuItems.find(
+    (current) => current.url === activeItem || current['@id'] === activeItem,
+  );
+
   return (
     <div id="mega-menu" ref={nodeRef}>
       <Container>
-        <nav>
-          <ItemsList
-            items={menuItems}
-            renderMenuItem={renderMenuItem}
-            activeItem={activeItem}
-          />
-        </nav>
+        {menuItem && (
+          <div className="menu-content tablet hidden mobile hidden">
+            <h3 className="title">
+              <Link to={menuItem.url}>{menuItem.title}</Link>
+            </h3>
+            <Divider fitted />
+            {menuItem.title === 'Topics' ? (
+              <Topics menuItem={menuItem} />
+            ) : menuItem.title === 'Countries' ? (
+              <Countries menuItem={menuItem} />
+            ) : (
+              <StandardMegaMenuGrid menuItem={menuItem} />
+            )}
+          </div>
+        )}
+
+        <div className="tablet only mobile only">
+          <NestedAccordion menuItems={menuItems} />
+        </div>
       </Container>
     </div>
   );

package/src/ui/Header/HeaderSearchPopUp.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Input, Button, Icon } from 'semantic-ui-react';
+import { Container, Input } from 'semantic-ui-react';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
@@ -14,16 +14,16 @@ function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
         <div className="wrapper">
           <Input
             className="search"
-            icon="search"
+            icon={{ className: 'ri-search-line', link: true }}
             placeholder="Search..."
             fluid
           />
-          <div className="action">
+          {/* <div className="action">
             <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>
-          </div>
+          </div> */}
         </div>
       </Container>
     </div>