Fix bridge link and navigation

darwinia-network · Mar 15, 2024 · f5a73a5 · f5a73a5
1 parent 51b8285
commit f5a73a5
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 47 deletions.
diff --git a/src/components/Header/data.ts b/src/components/Header/data.ts
@@ -1,4 +1,9 @@
-export const navigations: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[] = [
+export const navigations: {
+  label: string;
+  sub: { label: string; link: string; isExternal?: boolean }[];
+  link?: string;
+  isExternal?: boolean;
+}[] = [
   {
     label: "Use Darwinia",
     sub: [
@@ -105,4 +110,5 @@ export const navigations: { label: string; sub: { label: string; link: string; i
       },
     ],
   },
+  { label: "Bridge", sub: [], link: "https://helixbridge.app/?token_category=ring", isExternal: true },
 ];
diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx
@@ -4,7 +4,12 @@ import { Dispatch, SetStateAction, useCallback } from "react";
 import ExternalIcon from "../ExternalIcon";
 
 interface Props {
-  data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
+  data: {
+    label: string;
+    sub: { label: string; link: string; isExternal?: boolean }[];
+    link?: string;
+    isExternal?: boolean;
+  }[];
   isHomePage?: boolean;
   isNavigationActive: boolean[];
   setIsNavigationActive: Dispatch<SetStateAction<boolean[]>>;
@@ -23,26 +28,41 @@ export default function DesktopNavigation({ data, isHomePage, isNavigationActive
 
   return (
     <div className="hidden lg:flex items-center gap-[2.5rem]">
-      {data.map(({ label, sub }, index) => (
-        <Navigation
-          key={label}
-          index={index}
-          label={label}
-          sub={sub}
-          isHomePage={isHomePage}
-          isActive={isNavigationActive[index]}
-          onActiveChange={handleActiveChange}
-        />
-      ))}
-      <a className="" href="https://helixbridge.app/?token_category=ring." target="_blank" rel="noopener noreferrer">
-        <span
-          className={`whitespace-nowrap transition-colors hover:text-app-main text-app-black ${
-            isHomePage ? "text-t20" : "text-t16b"
-          } `}
-        >
-          Bridge
-        </span>
-      </a>
+      {data.map(({ label, sub, link, isExternal }, index) =>
+        sub.length ? (
+          <Navigation
+            key={label}
+            index={index}
+            label={label}
+            sub={sub}
+            isHomePage={isHomePage}
+            isActive={isNavigationActive[index]}
+            onActiveChange={handleActiveChange}
+          />
+        ) : isExternal ? (
+          <a
+            key={label}
+            className={`whitespace-nowrap transition-colors text-app-black hover:text-app-main ${
+              isHomePage ? "text-t20" : "text-t16b"
+            }`}
+            target="_blank"
+            rel="noopener noreferrer"
+            href={link}
+          >
+            {label}
+          </a>
+        ) : (
+          <Link
+            key={label}
+            className={`whitespace-nowrap transition-colors text-app-black hover:text-app-main ${
+              isHomePage ? "text-t20" : "text-t16b"
+            }`}
+            to={link ?? "/"}
+          >
+            {label}
+          </Link>
+        )
+      )}
     </div>
   );
 }

diff --git a/src/components/Navigation/MobileNavigation.tsx b/src/components/Navigation/MobileNavigation.tsx
@@ -3,7 +3,12 @@ import { Link } from "react-router-dom";
 import ExternalIcon from "../ExternalIcon";
 
 interface Props {
-  data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
+  data: {
+    label: string;
+    sub: { label: string; link: string; isExternal?: boolean }[];
+    link?: string;
+    isExternal?: boolean;
+  }[];
 }
 
 export default function MobileNavigation({ data }: Props) {
@@ -12,30 +17,52 @@ export default function MobileNavigation({ data }: Props) {
 
   return (
     <div className="flex flex-col lg:hidden w-full">
-      {data.map(({ label, sub }, index) => (
+      {data.map(({ label, sub, link, isExternal }, index) => (
         <div key={label} className="w-full flex flex-col items-end">
-          <button
-            className="px-[1.25rem] py-[1.0625rem] flex items-center justify-end gap-[0.625rem] w-full"
-            onClick={() => setActiveIndex((prev) => (prev === index ? -1 : index))}
-          >
-            <span className="text-t16b text-app-white">{label}</span>
-            <Arrow isOpen={index === activeIndex} />
-          </button>
-          <div
-            className="transition-[height] duration-200 overflow-y-hidden w-full"
-            style={{ height: index === activeIndex ? ref.current[index]?.clientHeight : 0 }}
-          >
-            <div
-              className="bg-app-inner-black flex flex-col items-end"
-              ref={(node) => {
-                ref.current[index] = node;
-              }}
+          {sub.length ? (
+            <>
+              <button
+                className="px-[1.25rem] py-[1.0625rem] flex items-center justify-end gap-[0.625rem] w-full"
+                onClick={() => setActiveIndex((prev) => (prev === index ? -1 : index))}
+              >
+                <span className="text-t16b text-app-white">{label}</span>
+                <Arrow isOpen={index === activeIndex} />
+              </button>
+              <div
+                className="transition-[height] duration-200 overflow-y-hidden w-full"
+                style={{ height: index === activeIndex ? ref.current[index]?.clientHeight : 0 }}
+              >
+                <div
+                  className="bg-app-inner-black flex flex-col items-end"
+                  ref={(node) => {
+                    ref.current[index] = node;
+                  }}
+                >
+                  {sub.map((s) => (
+                    <SubItem key={s.label} label={s.label} link={s.link} isExternal={s.isExternal} />
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : isExternal ? (
+            <a
+              href={link}
+              rel="noopener noreferrer"
+              target="_blank"
+              className="px-[1.25rem] py-[1.0625rem] inline-flex items-center justify-end gap-[0.625rem] w-full"
             >
-              {sub.map((s) => (
-                <SubItem key={s.label} label={s.label} link={s.link} isExternal={s.isExternal} />
-              ))}
-            </div>
-          </div>
+              <span className="text-t16b text-app-white">{label}</span>
+              <Arrow className="invisible" />
+            </a>
+          ) : (
+            <Link
+              to={link ?? "/"}
+              className="px-[1.25rem] py-[1.0625rem] inline-flex items-center justify-end gap-[0.625rem] w-full"
+            >
+              <span className="text-t16b text-app-white">{label}</span>
+              <Arrow className="invisible" />
+            </Link>
+          )}
         </div>
       ))}
     </div>
@@ -80,10 +107,10 @@ function SubItem({ label, link, isExternal }: { label: string; link: string; isE
   );
 }
 
-function Arrow({ isOpen }: { isOpen?: boolean }) {
+function Arrow({ isOpen, className }: { isOpen?: boolean; className?: string }) {
   return (
     <div
-      className="border-t-[0.3125rem] border-t-app-white border-x-[0.25rem] border-x-transparent shrink-0 transition-transform"
+      className={`border-t-[0.3125rem] border-t-app-white border-x-[0.25rem] border-x-transparent shrink-0 transition-transform ${className}`}
       style={{ transform: isOpen ? "rotateX(180deg)" : "rotateX(0)" }}
     />
   );