From 41bffb8aec2ef6d5dd52c9f61146d1c3bb28aa52 Mon Sep 17 00:00:00 2001 From: yuli-ferna <35125931+yuli-ferna@users.noreply.github.com> Date: Tue, 26 Nov 2024 12:39:44 -0300 Subject: [PATCH] Include Submenu option + Cosmos link in navbar (#1193) * Include Submenu option + Cosmos link in navbar * Fix v1 build * Comment in progress widget --- .../src/components/atoms/NavBar.tsx | 103 ++++++++++++++--- apps/connect-v1/src/env/common.ts | 4 + apps/connect-v1/src/env/tbtc-bridge.ts | 13 +++ apps/connect-v1/src/env/token-bridge.ts | 15 +++ apps/connect/src/components/atoms/NavBar.tsx | 105 ++++++++++++++---- apps/connect/src/env/common.ts | 6 +- apps/connect/src/env/token-bridge.ts | 13 +++ apps/connect/src/env/usdc-bridge.ts | 13 +++ .../src/components/Header.tsx | 39 ++++++- 9 files changed, 272 insertions(+), 39 deletions(-) diff --git a/apps/connect-v1/src/components/atoms/NavBar.tsx b/apps/connect-v1/src/components/atoms/NavBar.tsx index d20ec850a..7e30e01ab 100644 --- a/apps/connect-v1/src/components/atoms/NavBar.tsx +++ b/apps/connect-v1/src/components/atoms/NavBar.tsx @@ -9,6 +9,8 @@ import { ENV } from "@env"; import { Logo } from "./Logo"; import { COLOR } from "../../theme/portal"; import { Link } from "./Link"; +import { Collapse, MenuItem } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; export const NAVBAR_WIDTH = 110; @@ -44,9 +46,40 @@ const LinkContainer = styled("div")(({ theme }) => ({ }, })); +const SubMenu = styled(MenuItem)(() => ({ + paddingLeft: 1, + paddingRight: 0, + paddingTop: 0, + paddingBottom: 0, + display: "flex", + gap: 4, + maxHeight: 20, + color: COLOR.whiteWithTransparency, + fontWeight: 400, + transition: "color 0.3s", + ":hover": { + color: COLOR.white, + }, +})); + +const Section = styled("div")(() => ({ + display: "flex", + flexDirection: "column", + gap: 8, +})); + export const NavBar = () => { const [openMenu, setOpenMenu] = useState(false); - + const [items, setItems] = useState([...ENV.navBar]); + const openSubMenuHandler = (index: number) => { + const newItems = [...items]; + const item = newItems[index]; + if (item && item.subMenu) { + item.subMenu.open = !item.subMenu?.open; + newItems[index] = item; + setItems(newItems); + } + }; return ( diff --git a/apps/connect-v1/src/env/common.ts b/apps/connect-v1/src/env/common.ts index 4cdc36774..af6f37a9f 100644 --- a/apps/connect-v1/src/env/common.ts +++ b/apps/connect-v1/src/env/common.ts @@ -57,6 +57,10 @@ export interface Env { active?: boolean; href: string; isBlank?: boolean; + subMenu?: { + open: boolean; + content: { label: string; href: string; active?: boolean }[]; + }; }[]; redirects?: { source: string[]; target: string }; } diff --git a/apps/connect-v1/src/env/tbtc-bridge.ts b/apps/connect-v1/src/env/tbtc-bridge.ts index 808bca815..001fce311 100644 --- a/apps/connect-v1/src/env/tbtc-bridge.ts +++ b/apps/connect-v1/src/env/tbtc-bridge.ts @@ -13,6 +13,19 @@ export const ENV: Env = { { label: "USDC", href: `${PUBLIC_URL}/usdc-bridge` }, { label: "tBTC", active: true, href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: undefined, wormholeConnectConfig: { diff --git a/apps/connect-v1/src/env/token-bridge.ts b/apps/connect-v1/src/env/token-bridge.ts index bf9a2b4ad..7ca480d37 100644 --- a/apps/connect-v1/src/env/token-bridge.ts +++ b/apps/connect-v1/src/env/token-bridge.ts @@ -47,6 +47,21 @@ export const ENV: Env = { { label: "USDC", href: USDC_BRIDGE_HREF }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [ + { label: "Cosmos", href: `${PUBLIC_URL}/cosmos`, active: true }, + ], + }, + }, ], redirects: { source: [ diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx index 14c4d355a..4c79aef69 100644 --- a/apps/connect/src/components/atoms/NavBar.tsx +++ b/apps/connect/src/components/atoms/NavBar.tsx @@ -9,6 +9,8 @@ import { ENV } from "@env"; import { Logo } from "./Logo"; import { COLOR } from "../../theme/portal"; import { Link } from "./Link"; +import { Collapse, MenuItem } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; export const NAVBAR_WIDTH = 110; @@ -44,9 +46,40 @@ const LinkContainer = styled("div")(({ theme }) => ({ }, })); +const SubMenu = styled(MenuItem)(() => ({ + paddingLeft: 1, + paddingRight: 0, + paddingTop: 0, + paddingBottom: 0, + display: "flex", + gap: 4, + maxHeight: 20, + color: COLOR.whiteWithTransparency, + fontWeight: 400, + transition: "color 0.3s", + ":hover": { + color: COLOR.white, + }, +})); + +const Section = styled("div")(() => ({ + display: "flex", + flexDirection: "column", + gap: 8, +})); + export const NavBar = () => { const [openMenu, setOpenMenu] = useState(false); - + const [items, setItems] = useState([...ENV.navBar]); + const openSubMenuHandler = (index: number) => { + const newItems = [...items]; + const item = newItems[index]; + if (item && item.subMenu) { + item.subMenu.open = !item.subMenu?.open; + newItems[index] = item; + setItems(newItems); + } + }; return ( diff --git a/apps/connect/src/env/common.ts b/apps/connect/src/env/common.ts index 46ea6aadb..1cf7c80d1 100644 --- a/apps/connect/src/env/common.ts +++ b/apps/connect/src/env/common.ts @@ -48,7 +48,7 @@ export const wormholeConnectConfigCommon: Partial = { href: `https://wormholescan.io/#/txs?address={:address}&network=${CLUSTER}`, }, menu: [], - showInProgressWidget: true, + // showInProgressWidget: true, }, network: CLUSTER, rpcs: {}, @@ -62,6 +62,10 @@ export interface Env { active?: boolean; href: string; isBlank?: boolean; + subMenu?: { + open: boolean; + content: { label: string; href: string; active?: boolean }[]; + }; }[]; redirects?: { source: string[]; target: string }; } diff --git a/apps/connect/src/env/token-bridge.ts b/apps/connect/src/env/token-bridge.ts index 2a0fa1621..4546267bb 100644 --- a/apps/connect/src/env/token-bridge.ts +++ b/apps/connect/src/env/token-bridge.ts @@ -48,6 +48,19 @@ export const ENV: Env = { { label: "USDC", href: USDC_BRIDGE_HREF }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: { source: [ diff --git a/apps/connect/src/env/usdc-bridge.ts b/apps/connect/src/env/usdc-bridge.ts index 50a1a6b17..fe8c76ed9 100644 --- a/apps/connect/src/env/usdc-bridge.ts +++ b/apps/connect/src/env/usdc-bridge.ts @@ -17,6 +17,19 @@ export const ENV: Env = { { label: "USDC", active: true, href: `${PUBLIC_URL}/usdc-bridge` }, { label: "tBTC", href: `${PUBLIC_URL}/tbtc-bridge` }, { label: "Rewards", href: `${PUBLIC_URL}/rewards-dashboard` }, + { + label: "Advanced Tools", + isBlank: true, + href: `${PUBLIC_URL}/advanced-tools/`, + }, + { + label: "More", + href: "", + subMenu: { + open: true, + content: [{ label: "Cosmos", href: `${PUBLIC_URL}/cosmos` }], + }, + }, ], redirects: undefined, wormholeConnectConfig: mergeDeep( diff --git a/apps/rewards-dashboard/src/components/Header.tsx b/apps/rewards-dashboard/src/components/Header.tsx index 82bdf999e..214f5f026 100644 --- a/apps/rewards-dashboard/src/components/Header.tsx +++ b/apps/rewards-dashboard/src/components/Header.tsx @@ -7,7 +7,7 @@ import { PortalLogoWithText } from "../quarks/LogoVectors"; export const Header = () => { const [showMenu, setShowMenu] = useState(false); - + const [openMenu, setOpenMenu] = useState(true); return (
@@ -26,6 +26,43 @@ export const Header = () => { {navBar.map((x, idx) => ( ))} + <> + +
+ +
+