[B2BP-723] - Update MegaHeader UI (#344)

* commit ui fix * commit changeset
pagopa · Jul 9, 2024 · 49f0c28 · 49f0c28
1 parent bdc6f4a
commit 49f0c28
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/.changeset/smart-elephants-rush.md b/.changeset/smart-elephants-rush.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Fix submenu jiggling links effect while hovering
diff --git a/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.Helpers.ts b/apps/nextjs-website/react-components/components/MegaHeader/MegaHeader.Helpers.ts
@@ -69,15 +69,18 @@ export const Nav = styled('ul')({
   },
   '& .menuSecondaryItem:hover .arrowIcon': {
     visibility: 'visible',
+    opacity: 100,
   },
   '& .menuSecondaryItem.active': {
     fontWeight: 600,
   },
   '& .menuSecondaryItem.active .arrowIcon': {
-    display: 'none',
+    visibility: 'visible',
+    opacity: 0,
   },
   '& .arrowIcon': {
-    visibility: 'hidden',
+    visibility: 'visible',
+    opacity: 0,
     marginLeft: 5,
     color: '#0B3EE3',
     verticalAlign: 'middle',
@@ -110,23 +113,20 @@ export const Dropdown = styled(Box)({
     color: '#555C70',
     display: 'flex',
     alignItems: 'center',
-    whiteSpace: 'nowrap',  
+    whiteSpace: 'nowrap',
+    letterSpacing: 'normal',
   },
-  '& a:hover': {
+  '& a:hover, & a.active': {
     fontWeight: 600,
-    color: '#555C70',
+    letterSpacing: '-0.0090em',
   },
-  '& a:hover .arrowIcon': {
+  '& a:hover .arrowIcon, & a.active .arrowIcon': {
     visibility: 'visible',
-  },
-  '& a.active': {
-    fontWeight: 600,
-  },
-  '& a.active .arrowIcon': {
-    display: 'none',
+    opacity: 1,
   },
   '& .arrowIcon': {
-    visibility: 'hidden',
+    visibility: 'visible',
+    opacity: 0,
     marginLeft: 5,
     color: '#0B3EE3',
     verticalAlign: 'middle',
@@ -199,15 +199,18 @@ export const MobileMenu = styled(Box)({
   },
   '& a:hover .arrowIcon': {
     visibility: 'visible',
+    opacity: 100,
   },
   '& a.active': {
     fontWeight: 600,
   },
   '& a.active .arrowIcon': {
-    display: 'none',
+    visibility: 'visible',
+    opacity: 0,
   },
   '& .arrowIcon': {
-    visibility: 'hidden',
+    visibility: 'visible',
+    opacity: 0,
     marginLeft: 5,
     color: '#0B3EE3',
     verticalAlign: 'middle',