feat: refine header (#1853)

nervosnetwork · Jan 21, 2025 · 4ae99b0 · 4ae99b0
1 parent afdac22
commit 4ae99b0
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 30 deletions.
diff --git a/src/components/Header/MenusComp/index.module.scss b/src/components/Header/MenusComp/index.module.scss
@@ -88,12 +88,16 @@
   justify-content: space-between;
 
   .icon {
+    margin-left: auto;
     transform: rotate(180deg);
     transition: transform 0.1s;
   }
 }
 
 .headerMenusItem {
+  --dim-color: rgb(244 244 245);
+
+  position: relative;
   color: white;
   display: flex;
   align-items: center;
@@ -118,6 +122,30 @@
     font-weight: medium;
     color: var(--primary-color);
   }
+
+  &[data-popup] {
+    &::after {
+      position: absolute;
+      top: calc(100% + 10px);
+      display: none;
+      content: attr(data-popup);
+      white-space: nowrap;
+      padding: 2px 20px;
+      background: var(--dim-color);
+      color: #333;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 2px;
+      box-shadow: 0 4px 4px 0 rgb(16 16 16 / 5%);
+      opacity: 0.8;
+    }
+
+    &:hover {
+      &::after {
+        display: block;
+      }
+    }
+  }
 }
 
 .moreMenus {

diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
@@ -248,25 +248,37 @@ export default memo(({ isMobile }: { isMobile: boolean }) => {
     <MobileMenuItem>
       {menuList
         .filter(menu => menu.name !== undefined)
-        .map(menu =>
-          // eslint-disable-next-line no-nested-ternary
-          menu.children ? (
-            <SubmenuDropdown key={menu.name} menu={menu.children}>
-              <MobileMenuOuterLink className={styles.mobileSubmenuTrigger}>
+        .map(menu => {
+          if (menu.children) {
+            return (
+              <SubmenuDropdown key={menu.name} menu={menu.children}>
+                <MobileMenuOuterLink className={styles.mobileSubmenuTrigger}>
+                  {menu.icon}
+                  {menu.name}
+                  <ArrowIcon className={styles.icon} />
+                </MobileMenuOuterLink>
+              </SubmenuDropdown>
+            )
+          }
+
+          if (menu.type === LinkType.Inner) {
+            return (
+              <MobileMenuInnerLink key={menu.name} to={menu.url ?? '/'}>
+                {menu.icon}
+                {menu.name}
+              </MobileMenuInnerLink>
+            )
+          }
+          if (menu.type === LinkType.Outer) {
+            return (
+              <MobileMenuOuterLink key={menu.name} href={menu.url} target="_blank" rel="noopener noreferrer">
+                {menu.icon}
                 {menu.name}
-                <ArrowIcon className={styles.icon} />
               </MobileMenuOuterLink>
-            </SubmenuDropdown>
-          ) : menu.type === LinkType.Inner ? (
-            <MobileMenuInnerLink key={menu.name} to={menu.url ?? '/'}>
-              {menu.name}
-            </MobileMenuInnerLink>
-          ) : (
-            <MobileMenuOuterLink key={menu.name} href={menu.url} target="_blank" rel="noopener noreferrer">
-              {menu.name}
-            </MobileMenuOuterLink>
-          ),
-        )}
+            )
+          }
+          return null
+        })}
     </MobileMenuItem>
   ) : (
     <HeaderMenuPanel>
@@ -285,23 +297,33 @@ export default memo(({ isMobile }: { isMobile: boolean }) => {
 
         if (menu.type === LinkType.Inner) {
           return (
-            <Link className={styles.headerMenusItem} to={menu.url ?? '/'} key={menu.name} title={menu.name}>
+            <Link
+              className={styles.headerMenusItem}
+              to={menu.url ?? '/'}
+              key={menu.name}
+              title={menu.name}
+              data-popup={menu.name}
+            >
               {menu.icon}
             </Link>
           )
         }
-        return (
-          <a
-            className={styles.headerMenusItem}
-            href={menu.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            key={menu.name}
-            title={menu.name}
-          >
-            {menu.icon}
-          </a>
-        )
+        if (menu.type === LinkType.Outer) {
+          return (
+            <a
+              className={styles.headerMenusItem}
+              href={menu.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              key={menu.name}
+              title={menu.name}
+              data-popup={menu.name}
+            >
+              {menu.icon}
+            </a>
+          )
+        }
+        return null
       })}
     </HeaderMenuPanel>
   )

diff --git a/src/components/Header/MenusComp/styled.tsx b/src/components/Header/MenusComp/styled.tsx
@@ -16,10 +16,16 @@ export const MobileMenuOuterLink = styled.a`
   font-weight: regular;
   margin-top: 22px;
   height: 21px;
+  gap: 8px;
 
   &:hover {
     font-weight: medium;
     color: ${props => props.theme.primary};
+
+    svg {
+      filter: drop-shadow(0 0 4px var(--primary-color));
+      mix-blend-mode: difference;
+    }
   }
 `
 
@@ -31,10 +37,16 @@ export const MobileMenuInnerLink = styled(Link)`
   font-weight: regular;
   margin-top: 22px;
   height: 21px;
+  gap: 8px;
 
   &:hover {
     font-weight: medium;
     color: ${props => props.theme.primary};
+
+    svg {
+      filter: drop-shadow(0 0 4px var(--primary-color));
+      mix-blend-mode: difference;
+    }
   }
 `