Merge pull request #1597 from milvus-io/mark-1360

add external link mark to navigator
milvus-io · Sep 9, 2024 · 237eff9 · 237eff9
2 parents b99390c + 91e1cb7
commit 237eff9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/components/header/DescktopHeader.tsx b/src/components/header/DescktopHeader.tsx
@@ -13,6 +13,7 @@ import {
 import { DownArrowIcon, GitHubIcon } from '@/components/icons';
 import { LogoSection } from './Logos';
 import milvusStats from '../../../global-stats.json';
+import { RightTopArrowIcon } from '@/components/icons';
 
 type Props = { className?: string };
 
@@ -104,10 +105,11 @@ export default function DesktopHeader(props: Props) {
                             <Link
                               href={item.link}
                               rel={item.rel}
-                              className="block text-[14px] leading-[40px] font-[400] px-[16px] text-black no whitespace-nowrap cursor-pointer hover:bg-black/[0.04]"
+                              className="flex items-center gap-[4px] text-[14px] leading-[40px] font-[400] px-[16px] text-black no whitespace-nowrap cursor-pointer hover:bg-black/[0.04]"
                               target={item.rel ? '_blank' : undefined}
                             >
                               {item.label}
+                              {item.rel && <RightTopArrowIcon />}
                             </Link>
                           </li>
                         ))}

diff --git a/src/components/header/mobileHeader.jsx b/src/components/header/mobileHeader.jsx
@@ -15,6 +15,7 @@ import { CloseIcon, MenuIcon } from '../icons';
 import { useWindowSize } from '@/http/hooks';
 import { Button } from '@/components/ui/button';
 import { GET_START_LINK } from '@/consts/links';
+import { RightTopArrowIcon } from '../icons';
 
 export default function MobileHeader(props) {
   const { className } = props;
@@ -114,8 +115,10 @@ export default function MobileHeader(props) {
                       href="https://www.youtube.com/c/MilvusVectorDatabase"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Video
+                      <RightTopArrowIcon />
                     </a>
                   </List>
                 </Collapse>
@@ -149,17 +152,26 @@ export default function MobileHeader(props) {
                       href="https://github.com/zilliztech/attu"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Attu
+                      <RightTopArrowIcon />
                     </a>
                     <a
                       href="https://github.com/zilliztech/milvus_cli"
                       target="_blank"
                       rel="noopener noreferrer"
+                      className={classes.externalLinkButton}
                     >
                       Milvus_CLI
+                      <RightTopArrowIcon />
+                    </a>
+                    <a
+                      href="/tools/sizing"
+                      className={classes.externalLinkButton}
+                    >
+                      Sizing Tool <RightTopArrowIcon />
                     </a>
-                    <a href="/tools/sizing">Sizing Tool</a>
                   </List>
                 </Collapse>
 

diff --git a/src/components/header/mobileHeader.module.less b/src/components/header/mobileHeader.module.less
@@ -17,7 +17,9 @@
     right: 0;
     top: @header-height-tablet;
     overflow: hidden;
-    transition: height linear 0.3s, top linear 0.3s;
+    transition:
+      height linear 0.3s,
+      top linear 0.3s;
     background-color: #fff;
     z-index: 100;
   }
@@ -69,6 +71,12 @@
     display: inline-block;
     padding: 4px 16px;
   }
+
+  .externalLinkButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .expendIcon {