@eeacms/volto-eea-design-system 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -4,8 +4,98 @@ 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.7.0](https://github.com/eea/volto-eea-design-system/compare/0.6.5...0.7.0)
+
+- Autobuild of docusaurus docs [`dd56a87`](https://github.com/eea/volto-eea-design-system/commit/dd56a87ca49282b8660b2fc1edc73f31441cceb2)
+- change(mega menu): use non variable to fix build of volto-kitkat-frontend [`3ecd652`](https://github.com/eea/volto-eea-design-system/commit/3ecd652405ba616c9defc86fd793f8c066c0af1e)
+- Autobuild of docusaurus docs [`a67aeb8`](https://github.com/eea/volto-eea-design-system/commit/a67aeb89dd7590605af9fd1fc4d99812061e166b)
+- change(header): prefix mega-menu active class for adding border [`32898cb`](https://github.com/eea/volto-eea-design-system/commit/32898cb19c20ee7696c51b99cd9df25a333ae6e9)
+- bump release version to 0.7.0 [`fa82cbd`](https://github.com/eea/volto-eea-design-system/commit/fa82cbd7d50765c322bc5c7c58abb5675e0aadad)
+- Theme fixes, mega menu selected element both in desktop and mobile #211 [`b482729`](https://github.com/eea/volto-eea-design-system/commit/b4827292a9badb02f178b7431cc63e11070784ea)
+- change(tests): try to modify tests to use slate instead of draft [`a2e2485`](https://github.com/eea/volto-eea-design-system/commit/a2e248593433a7a8bf612008c12a3a20a0049d86)
+- change(tests): use data-slate-editor instead of contents that was found in draft js instead of slate [`1e0413c`](https://github.com/eea/volto-eea-design-system/commit/1e0413cf117c098b188e00249c323f2f718b9299)
+- fix(container): add padding also for block editors when we are on the add page not just edit [`b857aad`](https://github.com/eea/volto-eea-design-system/commit/b857aad7855c30c5059b0f0f7c0f720826a71aa7)
+- fix eslint warnings [`3b30282`](https://github.com/eea/volto-eea-design-system/commit/3b30282ea4df59f2d05644cae5c1d703b4dc48b3)
+- feature(megamenu): open default accordions on mobile navigation based on pathname [`cc299c1`](https://github.com/eea/volto-eea-design-system/commit/cc299c1047f96aa5f85cdc4bb8bb9b3b4fb9ca5e)
+- fix(megamenu): key warning errors [`4ecd279`](https://github.com/eea/volto-eea-design-system/commit/4ecd27921546204dfa4aa23d25188876e52cda7a)
+- change(megamenu): set active class on storybook list items [`112bff1`](https://github.com/eea/volto-eea-design-system/commit/112bff195cd07e789b352ae239a148a168b4d877)
+- change(megamenu): add border for active element of menu [`5e7dfa5`](https://github.com/eea/volto-eea-design-system/commit/5e7dfa539dc0d126dfb057ac2d293c94b31561bb)
+- change(megamenu): use renderMenuItem in order to render menu items [`9ed5cbd`](https://github.com/eea/volto-eea-design-system/commit/9ed5cbdf120ee2c92e5f14c09e5289a5abe3f8b0)
+- change(megamenu): WIP bringing back rendering of item with callback and path modification [`6e43d43`](https://github.com/eea/volto-eea-design-system/commit/6e43d4340ea82afde950e5fee44a76119060fc28)
+- Autobuild of docusaurus docs [`4772d30`](https://github.com/eea/volto-eea-design-system/commit/4772d30900d7689d8d3e64fab989f5d7e845074a)
+- change(footer): replaced eionet logo with an svg variant and tweaked size of eionet to match size of eea logo [`32ce462`](https://github.com/eea/volto-eea-design-system/commit/32ce4623ad454edec864ad6c8b45cbf99465bede)
+- Autobuild of docusaurus docs [`4b6cc9b`](https://github.com/eea/volto-eea-design-system/commit/4b6cc9b997f3ce4821843f7c36d163aa571e6e43)
+- fix(header): bump opacity of gradient class to get rid of green hue of header text [`2011b40`](https://github.com/eea/volto-eea-design-system/commit/2011b40d384ae5b54a0525e6d9afc88c02f6ca90)
+- Autobuild of docusaurus docs [`1453ad3`](https://github.com/eea/volto-eea-design-system/commit/1453ad3dec7ba4b020215cd34e3105e8442cb363)
+- feat(accordion,buttons):  primary, secondary and tertiary variations #209 [`c34617f`](https://github.com/eea/volto-eea-design-system/commit/c34617f7a7d7b6b7568c3127f4ae0f52bd57cf8a)
+- change(stories): hide variant control from button link story [`43f8c41`](https://github.com/eea/volto-eea-design-system/commit/43f8c412f6762edbed9c60e613736d5b60677cd1)
+- change(stories): hide variant control from button link story [`aea7126`](https://github.com/eea/volto-eea-design-system/commit/aea712668331f5681028d961b42a05655f1113d3)
+- Autobuild of docusaurus docs [`b517dc8`](https://github.com/eea/volto-eea-design-system/commit/b517dc88b193f9c99580a9950f0bfe51cca13843)
+- feature(mega-menu): added menu slide down animation #208 [`4360d0e`](https://github.com/eea/volto-eea-design-system/commit/4360d0ef570fbfcc9989170219f7826e5ed780cf)
+- change(accordion): style default accordion using the grey from semantic ui [`e24907d`](https://github.com/eea/volto-eea-design-system/commit/e24907df397457bd9704905aa29ea5d7e1d396cd)
+- Autobuild of docusaurus docs [`03e8086`](https://github.com/eea/volto-eea-design-system/commit/03e8086444f33224a21563ff01a51541232c8a0f)
+- change(package): condition modification of navDepth settings [`dd21dad`](https://github.com/eea/volto-eea-design-system/commit/dd21dadf34f87f08223be3b98c06e7a2f0714326)
+- Autobuild of docusaurus docs [`8efc75b`](https://github.com/eea/volto-eea-design-system/commit/8efc75b7446283129d3ee68dbab1f7dbd2e4c5ba)
+- feature(theme): added context navigation component story and default style [`5a6955f`](https://github.com/eea/volto-eea-design-system/commit/5a6955fe935cf6a07f6593164014ed4c9e77d88f)
+- refactor(callToAction): update tertiary state colors [`159668a`](https://github.com/eea/volto-eea-design-system/commit/159668ac526a98032392bcbd2c115dc448193152)
+- refactor(accordion): add variations and create a default export [`4a9c68f`](https://github.com/eea/volto-eea-design-system/commit/4a9c68ffe933c9d700e46db3e0cbbd9e3820c7c7)
+- refactor(accordion): add color variations [`3504c15`](https://github.com/eea/volto-eea-design-system/commit/3504c15cc861803dc263fb2ad3b6a478043ced33)
+- refactor(callToAction): add tertiary variant and restructure exports [`ac6695a`](https://github.com/eea/volto-eea-design-system/commit/ac6695ab3066c41739ec4852f0ec3c3bb6cea346)
+- refactor(colors): add tertiary shades for element states [`1e24a7e`](https://github.com/eea/volto-eea-design-system/commit/1e24a7e13b50f1ee7bd9bd44f3b2eb8e4460c691)
+- fix(header): remove console log [`3a20023`](https://github.com/eea/volto-eea-design-system/commit/3a200233609bbcea39d8e519dc292a132a98aaa3)
+- refactor(megaMenu): add slide down transition and update targetRefs on close [`9667157`](https://github.com/eea/volto-eea-design-system/commit/96671574f5f7dd992269c42e509598f62bba516d)
+
+#### [0.6.5](https://github.com/eea/volto-eea-design-system/compare/0.6.1...0.6.5)
+
+> 6 July 2022
+
+- change(design-systems): header section fixes [`#207`](https://github.com/eea/volto-eea-design-system/pull/207)
+- change(package): bump package version to 0.6.5 denoting bug fixes release [`0585aeb`](https://github.com/eea/volto-eea-design-system/commit/0585aebaeb9e3483ba230110d99a1a875590ad66)
+- Autobuild of docusaurus docs [`590c55f`](https://github.com/eea/volto-eea-design-system/commit/590c55f1099d926959c2cca929ca8fab32fe41b4)
+- fix(menu): removed minHeight that enlarged the global menu [`133be1e`](https://github.com/eea/volto-eea-design-system/commit/133be1e43d9b7778fd94388629400c5f2b707ff4)
+- Autobuild of docusaurus docs [`91f0f33`](https://github.com/eea/volto-eea-design-system/commit/91f0f33cfeaf4d9aaecc870ca04a72318e8294ad)
+- fix(contentBox): removed negative z-index that hid fullwidth bg color [`bd60faf`](https://github.com/eea/volto-eea-design-system/commit/bd60faff53205da95d94930517f2ac830ec523d1)
+- Autobuild of docusaurus docs [`d337cf3`](https://github.com/eea/volto-eea-design-system/commit/d337cf3364624309727afbe25b88a5cca80ef290)
+- change(typography): updated letterspacing values and clarified values used for certain type tokens [`8a13bf8`](https://github.com/eea/volto-eea-design-system/commit/8a13bf8b3691d288209532842fb2c80962d652c0)
+- Autobuild of docusaurus docs [`416345a`](https://github.com/eea/volto-eea-design-system/commit/416345ab9f2a3dcc7a5c3cfff3847e7d71e24ae5)
+- fix(header): double click to close dropdown is no longer required [`b8a2ed0`](https://github.com/eea/volto-eea-design-system/commit/b8a2ed0d1e671d12239ecaf250e68b3187c12a53)
+- Autobuild of docusaurus docs [`596487f`](https://github.com/eea/volto-eea-design-system/commit/596487fb393bcf34a1f8258e18edae27a6e51bba)
+- change(item): enable theming for icon and text color and added tertiary option [`6d4444f`](https://github.com/eea/volto-eea-design-system/commit/6d4444feedd1cd7e6e8f8da630b4b53a19050d1b)
+- Autobuild of docusaurus docs [`886d6ac`](https://github.com/eea/volto-eea-design-system/commit/886d6acca4b91a9234eb544e96fb889d0df36956)
+- change(header): top section chevron sizes and margin as requested in enhancements document [`b307c74`](https://github.com/eea/volto-eea-design-system/commit/b307c74a671c10a5a6703dcb2126c3c36679c6f5)
+- fix(hero): image dimensions when full width and height isn't enabled [`4114f73`](https://github.com/eea/volto-eea-design-system/commit/4114f731cce63dc520bfd00cd487943181cec2ee)
+- change(item): tweak size and padding of icon when used inside item [`dbdef19`](https://github.com/eea/volto-eea-design-system/commit/dbdef191e70bf59dcfddf63c8f9f9a1343266a59)
+- Autobuild of docusaurus docs [`3551ada`](https://github.com/eea/volto-eea-design-system/commit/3551adad680c2c8da0cb345b6dd4d9f3c01e9f38)
+- change(utilities): wrap in quotes h2 and h3 of quoted-wrapper [`8aa4716`](https://github.com/eea/volto-eea-design-system/commit/8aa471604fb127cfa535373bb90a44b4204dd0f4)
+- Autobuild of docusaurus docs [`a92c31a`](https://github.com/eea/volto-eea-design-system/commit/a92c31a4e8e4473086554a1f4ab8c8d6cd2e5c85)
+- change(hero): tweaked hero block height and padding [`994b6f8`](https://github.com/eea/volto-eea-design-system/commit/994b6f8943c061657792df8adcbdee5da487ce43)
+- Autobuild of docusaurus docs [`772d55b`](https://github.com/eea/volto-eea-design-system/commit/772d55b041d0728e64cdfd19bcd0684df0312f42)
+- change(cards): add underline to links when applied to headers and use tertiary color by default [`874f956`](https://github.com/eea/volto-eea-design-system/commit/874f956c61e65ddbb6a240865f3946bb84247712)
+- Autobuild of docusaurus docs [`93ae789`](https://github.com/eea/volto-eea-design-system/commit/93ae7897286ff65be193f2c576e6472a8e883bde)
+- fix(header): menu generation when atAGlance isn't found [`d68b03c`](https://github.com/eea/volto-eea-design-system/commit/d68b03c05f7671e7ea154efe0199c29a3734fbcf)
+
+#### [0.6.1](https://github.com/eea/volto-eea-design-system/compare/0.6.0...0.6.1)
+
+> 1 July 2022
+
+- Release [`#206`](https://github.com/eea/volto-eea-design-system/pull/206)
+- Autobuild of docusaurus docs [`aa070d4`](https://github.com/eea/volto-eea-design-system/commit/aa070d4397a7369cc439d78b6355a9e6f0c5c3ff)
+- feat(headers): added underlined titles with theming support [`af67561`](https://github.com/eea/volto-eea-design-system/commit/af675616f9e002458501cf8b90742514153a298f)
+- refactor(heading): move underline story and update controls [`2c9bfd2`](https://github.com/eea/volto-eea-design-system/commit/2c9bfd279eafc44435d223be326f9496856c2154)
+- chore(countup): package for statistics [`26fcd09`](https://github.com/eea/volto-eea-design-system/commit/26fcd09bbd8d44119d5ca957542863be8c64836b)
+- refactor(underlinedTitle): Restore text variation dropdown control [`bd8c611`](https://github.com/eea/volto-eea-design-system/commit/bd8c61129d2c80475af8d0e9310412d5c3a82169)
+- refactor(underlineTitle): add content box for different variations [`0878915`](https://github.com/eea/volto-eea-design-system/commit/087891535059d6c2d7d2c2accded20f6ba601bb5)
+- refactor(underlinedTitle): add control for changing heading size [`211f515`](https://github.com/eea/volto-eea-design-system/commit/211f5158bff2b437aac60f26ba63f9adb6be540a)
+- refactor(utilities): add color variation for headings and text [`7e3a779`](https://github.com/eea/volto-eea-design-system/commit/7e3a779ec4fa3b712fcd32124f6f83ab784d2223)
+- refactor(utilities): update border bottom utility and restore line height for headings [`7fe4a7b`](https://github.com/eea/volto-eea-design-system/commit/7fe4a7b9fee579d213fe3945a4e548ff089784bd)
+- refactor(headings): update the line height of headers according to docusaurus instructions [`9da19b3`](https://github.com/eea/volto-eea-design-system/commit/9da19b3e1ea1fd93431e00edf3dc9a443e94f27a)
+- feat(UnderlinedTitle): create story and necessary utilities [`8beb56b`](https://github.com/eea/volto-eea-design-system/commit/8beb56b64ca76fb9f0f6df0f3554e64449a64868)
+
 #### [0.6.0](https://github.com/eea/volto-eea-design-system/compare/0.5.5...0.6.0)
 
+> 1 July 2022
+
+- Pagination, Item refactoring, docusaurus updates, fixes from custom [`#205`](https://github.com/eea/volto-eea-design-system/pull/205)
 - [Tokens] Letter spacing update [`#189`](https://github.com/eea/volto-eea-design-system/pull/189)
 - Refactor docusaurus [`#180`](https://github.com/eea/volto-eea-design-system/pull/180)
 - [R2] Pagination [`#162`](https://github.com/eea/volto-eea-design-system/pull/162)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,8 @@
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
     "remixicon": "2.5.0",
-    "react-slick": "^0.28.1"
+    "react-slick": "^0.28.1",
+    "react-countup": "^6.3.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/index.js

@@ -1,5 +1,8 @@
 const applyConfig = (config) => {
-  config.settings.navDepth = 3;
+  config.settings = {
+    ...(config.settings || {}),
+    navDepth: 3,
+  };
   return config;
 };
 

package/src/semantic.less

@@ -229,6 +229,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/header';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/contextNavigation';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }

package/src/ui/CallToAction/CallToAction.stories.jsx

@@ -5,6 +5,17 @@ export default {
   title: 'Components/Call To Action',
   component: Button,
   argTypes: {
+    variant: {
+      name: 'Variation',
+      defaultValue: 'primary',
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'call to action variation',
+      table: {
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
+      },
+    },
     label: {
       description: 'link label',
       table: {
@@ -37,49 +48,11 @@ export default {
 
 //Default Call To Action
 export const Default = (args) => {
-  return (
-    <Container>
-      <Button as="a" disabled={args.disabled} href={args.href} target="_blank">
-        {args.label}
-      </Button>
-    </Container>
-  );
-};
-Default.args = {
-  label: 'Default Call To Action',
-  href: '/#',
-  disabled: false,
-};
-
-//Primary Call To Action
-export const Primary = (args) => {
-  return (
-    <Container>
-      <Button
-        primary
-        as="a"
-        disabled={args.disabled}
-        href={args.href}
-        target="_blank"
-      >
-        {args.label}
-      </Button>
-    </Container>
-  );
-};
-Primary.args = {
-  label: 'Primary Call To Action',
-  href: '/#',
-  disabled: false,
-};
-
-//Secondary Call To Action
-export const Secondary = (args) => {
   return (
     <Container>
       <Button
-        secondary
         as="a"
+        className={args.variant === 'default' ? '' : args.variant}
         disabled={args.disabled}
         href={args.href}
         target="_blank"
@@ -89,8 +62,9 @@ export const Secondary = (args) => {
     </Container>
   );
 };
-Secondary.args = {
-  label: 'Secondary Call To Action',
+Default.args = {
+  variant: 'primary',
+  label: 'Call To Action',
   href: '/#',
   disabled: false,
 };
@@ -99,64 +73,39 @@ Secondary.args = {
 export const Inverted = (args) => {
   return (
     <Container>
-      <Segment compact>
+      <Segment compact className={args.variant === 'default' ? 'inverted' : ''}>
         <Button
-          primary
           inverted
           as="a"
           disabled={args.disabled}
-          href={args.href1}
+          href={args.href}
           target="_blank"
+          className={args.variant === 'default' ? '' : args.variant}
         >
-          {args.button1}
-        </Button>
-      </Segment>
-      <Segment compact>
-        <Button
-          secondary
-          inverted
-          as="a"
-          disabled={args.disabled}
-          href={args.href2}
-          target="_blank"
-        >
-          {args.button2}
-        </Button>
-      </Segment>
-      <Segment inverted compact>
-        <Button
-          inverted
-          as="a"
-          disabled={args.disabled}
-          href={args.href3}
-          target="_blank"
-        >
-          {args.button3}
+          {args.label}
         </Button>
       </Segment>
     </Container>
   );
 };
 Inverted.args = {
-  button1: 'Primary Call To Action',
-  button2: 'Secondary Call To Action',
-  button3: 'Default Call To Action',
-  href1: '/#',
-  href2: '/#',
-  href3: '/#',
+  variant: 'primary',
+  label: 'Inverted Call To Action',
+  href: '/#',
   disabled: false,
 };
-Inverted.parameters = {
-  controls: { exclude: ['label', 'href'] },
-  hideNoControlsWarning: true,
-};
 
 //Labeled Call To Action
 export const Labeled = (args) => {
   return (
     <Container>
       <Button
-        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        className={
+          (args.variant === 'default' ? '' : args.variant) +
+          ' icon ' +
+          args.icon_position +
+          ' labeled'
+        }
         as="a"
         disabled={args.disabled}
         href={args.href}
@@ -169,22 +118,14 @@ export const Labeled = (args) => {
   );
 };
 Labeled.args = {
+  variant: 'primary',
   label: 'Labeled Call To Action',
   icon: 'chevron right',
+  icon_position: 'right',
   href: '/#',
   disabled: false,
 };
 Labeled.argTypes = {
-  variant: {
-    options: ['primary', 'secondary', 'default'],
-    description: 'call to action class',
-    control: { type: 'radio' },
-    defaultValue: 'secondary',
-    table: {
-      defaultValue: { summary: 'secondary' },
-      type: { summary: 'string' },
-    },
-  },
   icon: {
     name: 'icon',
     defaultValue: 'chevron right',
@@ -213,10 +154,10 @@ Labeled.argTypes = {
   icon_position: {
     options: ['left', 'right'],
     control: { type: 'radio' },
-    defaultValue: 'left',
+    defaultValue: 'right',
     description: 'icon left or right position',
     table: {
-      defaultValue: { summary: 'left' },
+      defaultValue: { summary: 'right' },
       type: { summary: 'string' },
     },
   },
@@ -235,5 +176,6 @@ Link.args = {
   href: '/#',
 };
 Link.parameters = {
+  controls: { exclude: ['Variation', 'disabled'] },
   hideNoControlsWarning: true,
 };

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+const Template = (args) => (
+  <nav className="context-navigation">
+    <div className="context-navigation-header">Navigation</div>
+    <div role="list" className="ui list">
+      <div role="listitem" className="item level-1">
+        <div className="content">
+          <a title="" className="contenttype-folder" href="/api/folder1">
+            Folder1
+          </a>
+        </div>
+      </div>
+      <div role="listitem" className="item level-1">
+        <div className="content">
+          <a
+            title=""
+            className="contenttype-folder in_path"
+            href="/api/folder2/folder21"
+          >
+            Folder21
+          </a>
+          <div className="list">
+            <div role="listitem" className="item level-2">
+              <div className="content">
+                <a
+                  title=""
+                  className="contenttype-document"
+                  href="/api/folder2/folder21/doc211"
+                >
+                  Doc211
+                </a>
+              </div>
+            </div>
+            <div role="listitem" className="active item level-2">
+              <div className="content">
+                <a
+                  title=""
+                  className="contenttype-document"
+                  href="/api/folder2/folder21/doc211-copy"
+                >
+                  Doc212
+                  <div className="content active-indicator">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 36 36"
+                      className="icon"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M21.293 9.293L22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"
+                      ></path>
+                    </svg>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+);
+
+export default {
+  title: 'Components/Navigation portlet',
+  component: Template,
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  root: 'https://www.eea.europa.eu/',
+};

package/src/ui/Header/Header.jsx

@@ -54,6 +54,8 @@ const TopDropdownMenu = ({
       text={mobileText || text}
       icon={icon || 'chevron down'}
       aria-label="dropdown"
+      closeOnChange={false}
+      closeOnBlur={false}
     >
       <Dropdown.Menu role="group">{children}</Dropdown.Menu>
     </Dropdown>
@@ -134,6 +136,19 @@ const Main = ({
     }
   };
 
+  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) => {
     if (searchIsActive) setSearchIsActive(false);
     setActiveItem(item['@id'] || item.url);
@@ -151,6 +166,7 @@ const Main = ({
   const node = React.useRef();
   const searchButtonRef = React.useRef();
   const mobileMenuBurgerRef = React.useRef();
+  const desktopMenuRef = React.useRef();
 
   // disable sticky setting until feature is more stable
   // const isScrollingUp = useScrollingUp();
@@ -172,7 +188,10 @@ const Main = ({
           <Grid.Column mobile={4} tablet={4} computer={8}>
             <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
               {menuItems && (
-                <Menu className="eea-main-menu tablet or lower hidden" text>
+                <div
+                  className="ui text eea-main-menu tablet or lower hidden menu"
+                  ref={desktopMenuRef}
+                >
                   {menuItems.map((item) => (
                     <Menu.Item
                       name={item['@id'] || item.url}
@@ -187,7 +206,7 @@ const Main = ({
                       })}
                     </Menu.Item>
                   ))}
-                </Menu>
+                </div>
               )}
               <div
                 className="search-action"
@@ -221,15 +240,15 @@ const Main = ({
           triggerRefs={[searchButtonRef]}
         />
       )}
-      {menuIsActive && (
-        <HeaderMenuPopUp
-          renderMenuItem={renderMenuItem}
-          activeItem={activeItem}
-          menuItems={menuItems}
-          onClose={mobileBurgerOnClick}
-          triggerRefs={[mobileMenuBurgerRef]}
-        />
-      )}
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        pathName={pathname}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
     </div>
   );
 };