configure nav base based on build options

XLabs · Nov 21, 2023 · d1bcc5b · d1bcc5b
1 parent 48ea968
commit d1bcc5b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx
@@ -18,7 +18,11 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
   boxShadow: "none",
 }));
 
-const Link = styled(MuiLink)(({ theme }) => ({
+type LinkProps = {
+  active?: boolean;
+}
+
+const Link = styled(MuiLink)<LinkProps>(({ theme, active }) => ({
   ...theme.typography.body2,
   fontWeight: 600,
   fontFamily: "Suisse BP Intl, sans-serif",
@@ -31,6 +35,7 @@ const Link = styled(MuiLink)(({ theme }) => ({
   [theme.breakpoints.down("xs")]: {
     marginLeft: theme.spacing(1),
   },
+  textDecoration: active ? "underline" : "none",
   ":hover": {
     textDecoration: "underline"
   },
@@ -73,18 +78,18 @@ export default function NavBar() {
         <Spacer />
         <Hidden implementation="css" xsDown>
           <div style={{ display: "flex", alignItems: "center" }}>
-            <Link
-              href=""
-              color="inherit"
-            >
-              Home
-            </Link>
-            <Link
-              href="usdc-bridge"
-              color="inherit"
-            >
-              USDC
-            </Link>
+            {
+              navBar.map(({ label, active, href }, idx) =>
+                <Link
+                  key={`${label}_${idx}`}
+                  href={href}
+                  color="inherit"
+                  active={active}
+                >
+                  {label}
+                </Link>
+              )
+            }
             <Box>
               <Link
                 href="https://wormholescan.io"

diff --git a/apps/connect/src/vite-env.d.ts b/apps/connect/src/vite-env.d.ts
@@ -1,6 +1,14 @@
 /// <reference types="vite/client" />
 
 import type { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect";
+
+type NavLink = {
+    label: string;
+    active?: boolean;
+    href: string;
+}
+
 declare global {
     declare const wormholeConnectConfig: WormholeConnectConfig;
+    declare const navBar: NavLink[];
 }
diff --git a/apps/connect/vite.token-bridge.config.ts b/apps/connect/vite.token-bridge.config.ts
@@ -7,6 +7,10 @@ const PUBLIC_URL = viteConfig.base;
 export default defineConfig({
   ...viteConfig,
   define: {
+    navBar: [
+      { label: "Home", active: true, href: `${PUBLIC_URL}/` },
+      { label: "USDC",  href: `${PUBLIC_URL}/usdc-bridge` }
+    ],
     wormholeConnectConfig: {
       ...viteConfig?.define?.wormholeConnectConfig,
       moreNetworks: {

diff --git a/apps/connect/vite.usdc-bridge.config.ts b/apps/connect/vite.usdc-bridge.config.ts
@@ -1,11 +1,17 @@
 import { defineConfig } from 'vite'
 import viteConfig from './vite.config'
 
+const PUBLIC_URL = viteConfig.base;
+
 // https://vitejs.dev/config/
 export default defineConfig({
   ...viteConfig,
-  base: `${viteConfig.base}/usdc-bridge/`,
+  base: `${PUBLIC_URL}/usdc-bridge/`,
   define: {
+    navBar: [
+      { label: "Home", href: `${PUBLIC_URL}/` },
+      { label: "USDC", active: true, href: `${PUBLIC_URL}/usdc-bridge` }
+    ],
     wormholeConnectConfig: {
       ...viteConfig?.define?.wormholeConnectConfig,
       routes: ["cctpManual", "cctpRelay"],