feature(mega-menu): added menu slide down animation #208

eea · Jul 11, 2022 · 4360d0e · 4360d0e
2 parents 03e8086 + 3a20023
commit 4360d0e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 34 deletions.
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -164,6 +164,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();
@@ -185,7 +186,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}
@@ -200,7 +204,7 @@ const Main = ({
                       })}
                     </Menu.Item>
                   ))}
-                </Menu>
+                </div>
               )}
               <div
                 className="search-action"
@@ -234,15 +238,14 @@ const Main = ({
           triggerRefs={[searchButtonRef]}
         />
       )}
-      {menuIsActive && (
-        <HeaderMenuPopUp
-          renderMenuItem={renderMenuItem}
-          activeItem={activeItem}
-          menuItems={menuItems}
-          onClose={menuOnClickOutside}
-          triggerRefs={[mobileMenuBurgerRef]}
-        />
-      )}
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
     </div>
   );
 };

diff --git a/src/ui/Header/Header.stories.js b/src/ui/Header/Header.stories.js
@@ -756,6 +756,7 @@ const menuItems = [
         ],
         review_state: null,
         title: 'EEA member countries',
+        url: '/#',
       },
       {
         '@id': 'Cooperating-countries',

diff --git a/src/ui/Header/HeaderMenuPopUp.js b/src/ui/Header/HeaderMenuPopUp.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Transition } from 'semantic-ui-react';
 import {
   Container,
   Divider,
@@ -203,7 +204,13 @@ const NestedAccordion = ({ menuItems }) => {
   return <Accordion panels={rootPanels} />;
 };
 
-function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
+function HeaderMenuPopUp({
+  menuItems,
+  onClose,
+  triggerRefs,
+  activeItem,
+  visible,
+}) {
   const nodeRef = React.useRef();
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
@@ -212,29 +219,30 @@ function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
   );
 
   return (
-    <div id="mega-menu" ref={nodeRef}>
-      <Container>
-        {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} />
-            )}
+    <Transition visible={visible} animation="slide down" duration={300}>
+      <div id="mega-menu" ref={nodeRef}>
+        <Container>
+          {menuItem && (
+            <div className="menu-content tablet hidden mobile hidden">
+              <h3 className="title">
+                <a href={menuItem.href}>{menuItem.title}</a>
+              </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>
-        )}
-
-        <div className="tablet only mobile only">
-          <NestedAccordion menuItems={menuItems} />
-        </div>
-      </Container>
-    </div>
+        </Container>
+      </div>
+    </Transition>
   );
 }