From 993ca1d8e14c8a65ecb2fb680f954ae027b5920b Mon Sep 17 00:00:00 2001
From: Vitor Flores <sf.joaovitor@gmail.com>
Date: Fri, 17 Dec 2021 15:32:31 -0400
Subject: [PATCH 1/3] #13 - Fix hover in the header menu - Added CSS hover

---
 packages/borealis/global/nav.import.less            | 2 ++
 packages/borealis/react-components/NavigationBar.js | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/borealis/global/nav.import.less b/packages/borealis/global/nav.import.less
index 816a807..b660b9a 100644
--- a/packages/borealis/global/nav.import.less
+++ b/packages/borealis/global/nav.import.less
@@ -123,6 +123,7 @@ nav {
   min-width: 100%;
   display: none;
 }
+.w-dropdown:hover > .w-dropdown-list,
 .w-dropdown-list.w--open {
   display: flex;
   flex-direction: column;
@@ -295,6 +296,7 @@ nav {
     1px 1px 3px 0 rgba(27, 36, 72, 0.16);
 }
 
+.w-dropdown:hover > .dropdown-list,
 .dropdown-list.w--open {
   left: 50%;
   padding-top: 8px;
diff --git a/packages/borealis/react-components/NavigationBar.js b/packages/borealis/react-components/NavigationBar.js
index d3630be..a5db2d7 100644
--- a/packages/borealis/react-components/NavigationBar.js
+++ b/packages/borealis/react-components/NavigationBar.js
@@ -201,9 +201,9 @@ class NavigationBarComponent extends React.Component {
         className={
           mobile
             ? 'mobile-menu-subitem'
-            : `dropdown-list w-dropdown-list ${
+            : `dropdown-list w-dropdown-list` /*${
                 this.state.active[_id] ? 'w--open' : ''
-              } `
+              } `*/
         }
       >
         {subItems.map(subitem => {

From 2b1a86a9766f42f264fbc1f5b75c765262491270 Mon Sep 17 00:00:00 2001
From: Vitor Flores <sf.joaovitor@gmail.com>
Date: Mon, 20 Dec 2021 14:13:44 -0400
Subject: [PATCH 2/3] #13 - Fix hover in the header menu - Changed behavior
 method on nav items

---
 packages/borealis/global/nav.import.less      | 19 +++++----
 .../react-components/NavigationBar.js         | 41 +++++++++++--------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/packages/borealis/global/nav.import.less b/packages/borealis/global/nav.import.less
index b660b9a..c927603 100644
--- a/packages/borealis/global/nav.import.less
+++ b/packages/borealis/global/nav.import.less
@@ -123,10 +123,11 @@ nav {
   min-width: 100%;
   display: none;
 }
-.w-dropdown:hover > .w-dropdown-list,
+.w-dropdown:hover > .dropdown-list,
+.w-dropdown-list:hover,
 .w-dropdown-list.w--open {
-  display: flex;
-  flex-direction: column;
+  display: flex !important;
+  flex-direction: column !important;
 }
 .dropdown-list {
   border-radius: 8px;
@@ -297,11 +298,12 @@ nav {
 }
 
 .w-dropdown:hover > .dropdown-list,
+.dropdown-list:hover,
 .dropdown-list.w--open {
-  left: 50%;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  transform: translateX(-50%);
+  left: 50% !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  transform: translateX(-50%) !important;
 
   &:before {
     content:"";
@@ -351,6 +353,9 @@ nav {
   flex-basis: 100%;
   height: 0;
 }
+.arrow-icon--active {
+  transform: rotate(-90deg);
+}
 .third-level-items {
   ul {
     display: none;
diff --git a/packages/borealis/react-components/NavigationBar.js b/packages/borealis/react-components/NavigationBar.js
index a5db2d7..b506400 100644
--- a/packages/borealis/react-components/NavigationBar.js
+++ b/packages/borealis/react-components/NavigationBar.js
@@ -162,14 +162,14 @@ class NavigationBarComponent extends React.Component {
     const currentApplicationInfo =
       currentApplication && applicationsMap[currentApplication];
 
-    const onMouseEnter = _id => {
+    /*const onMouseEnter = _id => {
       if (this.timeout[_id]) Meteor.clearTimeout(this.timeout[_id]);
       this.setState({
         active: {
           [_id]: true,
         },
       });
-    };
+    };*/
     const toggleState = (_id, subitem) => {
       this.setState({
         active: {
@@ -178,7 +178,7 @@ class NavigationBarComponent extends React.Component {
         },
       });
     };
-    const onMouseLeave = _id => {
+    /*const onMouseLeave = _id => {
       this.timeout[_id] = Meteor.setTimeout(() => {
         this.setState({
           active: {
@@ -187,7 +187,7 @@ class NavigationBarComponent extends React.Component {
           },
         });
       }, 100);
-    };
+    };*/
     const renderSubItems = ({
       subItems,
       _id,
@@ -196,8 +196,8 @@ class NavigationBarComponent extends React.Component {
       mobileOnClick,
     }) => (
       <nav
-        onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-        onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
+        //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
+        //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
         className={
           mobile
             ? 'mobile-menu-subitem'
@@ -237,7 +237,7 @@ class NavigationBarComponent extends React.Component {
                 onClick={e => {
                   if (subitem.items && subitem.items.length) {
                     e.stopPropagation();
-                    toggleState(subSubItemOpenId, _id);
+                    //toggleState(subSubItemOpenId, _id);
                   }
                   if (mobile) {
                     mobileOnClick({ close: true })();
@@ -266,10 +266,15 @@ class NavigationBarComponent extends React.Component {
                 </Link>
                 {subitem.items && subitem.items.length && (
                   <ArrowIcon
-                    direction={
+                    /*direction={
                       this.state.active[subSubItemOpenId] ? 'right' : 'down'
-                    }
-                    onClick={() => toggleState(subSubItemOpenId, _id)}
+                    }*/
+                    direction='down'
+                    onClick={(e) => {
+                      const ulElement = e.currentTarget.closest('.expandable-dropdown').nextElementSibling.firstChild;
+                      ulElement.classList.toggle('ul--open');
+                      e.currentTarget.classList.toggle('arrow-icon--active');
+                    }}
                   />
                 )}
                 {subitem.alternativeLink ? (
@@ -287,7 +292,7 @@ class NavigationBarComponent extends React.Component {
               {subitem.items && subitem.items.length && (
                 <div className={mobile ? '' : 'third-level-items'}>
                   <ul
-                    className={
+                    /*className={
                       mobile
                         ? ''
                         : `${
@@ -295,7 +300,7 @@ class NavigationBarComponent extends React.Component {
                               ? 'ul--open'
                               : ''
                           } `
-                    }
+                    }*/
                   >
                     {(subitem.items || []).map(subSubItem => (
                       <li key={`${subitem.label}-${subSubItem.label}`}>
@@ -366,8 +371,8 @@ class NavigationBarComponent extends React.Component {
                 >
                   {(!mobile || this.state.mainLabel !== label) && (
                     <div className="avatar-wrapper"
-                       onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                       onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
+                       //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
+                       //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
                     >
                       <LetterAvatar
                         size={40}
@@ -414,8 +419,8 @@ class NavigationBarComponent extends React.Component {
                     RouterComponent={RouterComponent}
                     className={variant}
                     {...(onClick ? { onClick } : { href: actionLink })}
-                    onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                    onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
+                    //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
+                    //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
                   >
                     {currentRegion.label}
                     <img
@@ -448,8 +453,8 @@ class NavigationBarComponent extends React.Component {
                   RouterComponent={RouterComponent}
                   className={variant}
                   {...(onClick ? { onClick } : { href: actionLink })}
-                  onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                  onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
+                  //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
+                  //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
                 >
                   {label}
                 </Link>

From 1e960c168f7f61d81015ea1fc9ff4282cd3fa69a Mon Sep 17 00:00:00 2001
From: Vitor Flores <sf.joaovitor@gmail.com>
Date: Mon, 20 Dec 2021 16:40:26 -0400
Subject: [PATCH 3/3] #13 - Fix hover in the header menu - Fixed secondary
 dropdown with Refs and removed old code

---
 .../react-components/NavigationBar.js         | 59 ++++---------------
 1 file changed, 12 insertions(+), 47 deletions(-)

diff --git a/packages/borealis/react-components/NavigationBar.js b/packages/borealis/react-components/NavigationBar.js
index b506400..1bda3ca 100644
--- a/packages/borealis/react-components/NavigationBar.js
+++ b/packages/borealis/react-components/NavigationBar.js
@@ -71,6 +71,8 @@ class NavigationBarComponent extends React.Component {
     };
     this.urlIntervalId = Meteor.setInterval(this.eventListener, 1000);
     this.pollingIntervalId = Meteor.setInterval(() => this.fetchItems(), 5000);
+    this.dropdownSecondary = React.createRef();
+    this.dropdownSecondary.current = [];
   }
   // eslint-disable-next-line no-undef
   state = {
@@ -138,6 +140,10 @@ class NavigationBarComponent extends React.Component {
     this.setState({ mainLabel: null });
   };
 
+  toggleDropdownSecondary = (i) => {
+    this.dropdownSecondary.current[i].classList.toggle('ul--open');
+  };
+
   // eslint-disable-next-line no-undef
   timeout = {};
 
@@ -162,14 +168,6 @@ class NavigationBarComponent extends React.Component {
     const currentApplicationInfo =
       currentApplication && applicationsMap[currentApplication];
 
-    /*const onMouseEnter = _id => {
-      if (this.timeout[_id]) Meteor.clearTimeout(this.timeout[_id]);
-      this.setState({
-        active: {
-          [_id]: true,
-        },
-      });
-    };*/
     const toggleState = (_id, subitem) => {
       this.setState({
         active: {
@@ -178,16 +176,7 @@ class NavigationBarComponent extends React.Component {
         },
       });
     };
-    /*const onMouseLeave = _id => {
-      this.timeout[_id] = Meteor.setTimeout(() => {
-        this.setState({
-          active: {
-            ...this.state.active,
-            [_id]: false,
-          },
-        });
-      }, 100);
-    };*/
+
     const renderSubItems = ({
       subItems,
       _id,
@@ -196,17 +185,13 @@ class NavigationBarComponent extends React.Component {
       mobileOnClick,
     }) => (
       <nav
-        //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-        //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
         className={
           mobile
             ? 'mobile-menu-subitem'
-            : `dropdown-list w-dropdown-list` /*${
-                this.state.active[_id] ? 'w--open' : ''
-              } `*/
+            : `dropdown-list w-dropdown-list`
         }
       >
-        {subItems.map(subitem => {
+        {subItems.map((subitem, i) => {
           const subSubItemOpenId = `${subitem.label}-thirdlevel`;
           const logoutFunction = () => {
             Meteor.logout();
@@ -237,7 +222,6 @@ class NavigationBarComponent extends React.Component {
                 onClick={e => {
                   if (subitem.items && subitem.items.length) {
                     e.stopPropagation();
-                    //toggleState(subSubItemOpenId, _id);
                   }
                   if (mobile) {
                     mobileOnClick({ close: true })();
@@ -266,13 +250,9 @@ class NavigationBarComponent extends React.Component {
                 </Link>
                 {subitem.items && subitem.items.length && (
                   <ArrowIcon
-                    /*direction={
-                      this.state.active[subSubItemOpenId] ? 'right' : 'down'
-                    }*/
                     direction='down'
                     onClick={(e) => {
-                      const ulElement = e.currentTarget.closest('.expandable-dropdown').nextElementSibling.firstChild;
-                      ulElement.classList.toggle('ul--open');
+                      this.toggleDropdownSecondary(i);
                       e.currentTarget.classList.toggle('arrow-icon--active');
                     }}
                   />
@@ -292,15 +272,7 @@ class NavigationBarComponent extends React.Component {
               {subitem.items && subitem.items.length && (
                 <div className={mobile ? '' : 'third-level-items'}>
                   <ul
-                    /*className={
-                      mobile
-                        ? ''
-                        : `${
-                            this.state.active[subSubItemOpenId]
-                              ? 'ul--open'
-                              : ''
-                          } `
-                    }*/
+                    ref={el => this.dropdownSecondary.current[i] = el}
                   >
                     {(subitem.items || []).map(subSubItem => (
                       <li key={`${subitem.label}-${subSubItem.label}`}>
@@ -370,10 +342,7 @@ class NavigationBarComponent extends React.Component {
                   onClick={mobileOnClick()}
                 >
                   {(!mobile || this.state.mainLabel !== label) && (
-                    <div className="avatar-wrapper"
-                       //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                       //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
-                    >
+                    <div className="avatar-wrapper">
                       <LetterAvatar
                         size={40}
                         bgColor={mobile ? '#eee' : 'white'}
@@ -419,8 +388,6 @@ class NavigationBarComponent extends React.Component {
                     RouterComponent={RouterComponent}
                     className={variant}
                     {...(onClick ? { onClick } : { href: actionLink })}
-                    //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                    //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
                   >
                     {currentRegion.label}
                     <img
@@ -453,8 +420,6 @@ class NavigationBarComponent extends React.Component {
                   RouterComponent={RouterComponent}
                   className={variant}
                   {...(onClick ? { onClick } : { href: actionLink })}
-                  //onMouseEnter={mobile ? () => {} : () => onMouseEnter(_id)}
-                  //onMouseLeave={mobile ? () => {} : () => onMouseLeave(_id)}
                 >
                   {label}
                 </Link>