Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include Submenu option + Cosmos link in navbar #1193

Merged
merged 4 commits into from
Nov 26, 2024
Merged

Include Submenu option + Cosmos link in navbar #1193

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90c0233
Include Submenu option + Cosmos link in navbar
yuli-ferna Nov 25, 2024
524be0d
Fix v1 build
yuli-ferna Nov 25, 2024
1854a3f
Merge branch 'main' into feature/include-submenu-cosmos
yuli-ferna Nov 26, 2024
a633b26
Comment in progress widget
yuli-ferna Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 85 additions & 18 deletions apps/connect-v1/src/components/atoms/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 (
<AppBar position="static" color="inherit">
<Nav>
Expand All @@ -69,23 +102,57 @@ export const NavBar = () => {
// active: false,
// href: `https://wormholescan.io${ENV.wormholeConnectConfig.env === "testnet" ? "/#/?network=TESTNET" : ""}`,
// },
{
label: "Advanced Tools",
isBlank: true,
href: `${ENV.PUBLIC_URL}/advanced-tools/`,
},
].map(({ label, active, href, isBlank }, idx) => (
<Link
key={`${label}_${idx}`}
href={href}
sx={
!active ? undefined : { color: COLOR.white, fontWeight: 500 }
}
target={isBlank ? "_blank" : "_self"}
>
{label}
</Link>
))}
].map(({ label, active, href, isBlank, subMenu }, idx) =>
!subMenu ? (
<Link
key={`${label}_${idx}`}
href={href}
sx={
!active
? undefined
: { color: COLOR.white, fontWeight: 500 }
}
target={isBlank ? "_blank" : "_self"}
>
{label}
</Link>
) : (
<Section>
<SubMenu
onClick={() => openSubMenuHandler(idx)}
sx={!subMenu.open ? undefined : { color: COLOR.white }}
>
<CloseIcon
sx={{
width: 16,
transition: "transform 0.15s",
...(!subMenu.open
? { transform: "rotate(45deg)" }
: { transform: "rotate(0deg)" }),
}}
/>
<div>{label}</div>
</SubMenu>
<Collapse in={subMenu.open} timeout="auto" unmountOnExit>
{subMenu.content.map(({ label, href }, idx) => (
<Link
key={`${label}_${idx}`}
href={href}
sx={{
pl: 3,
...(!active
? undefined
: { color: COLOR.white, fontWeight: 500 }),
}}
target={"_blank"}
>
{label}
</Link>
))}
</Collapse>
</Section>
)
)}
</LinkContainer>
</Hidden>
</Nav>
Expand Down
4 changes: 4 additions & 0 deletions apps/connect-v1/src/env/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
}
13 changes: 13 additions & 0 deletions apps/connect-v1/src/env/tbtc-bridge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
15 changes: 15 additions & 0 deletions apps/connect-v1/src/env/token-bridge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
105 changes: 86 additions & 19 deletions apps/connect/src/components/atoms/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 (
<AppBar position="static" color="inherit">
<Nav>
Expand All @@ -62,30 +95,64 @@ export const NavBar = () => {
<Hidden implementation="css" smDown={!openMenu} smUp={false}>
<LinkContainer>
{[
...ENV.navBar,
...items,
// {
// label: "Wormholescan",
// isBlank: true,
// active: false,
// href: `https://wormholescan.io${ENV.wormholeConnectConfig.env === "Testnet" ? "/#/?network=TESTNET" : ""}`,
// },
{
label: "Advanced Tools",
isBlank: true,
href: `${ENV.PUBLIC_URL}/advanced-tools/`,
},
].map(({ label, active, href, isBlank }, idx) => (
<Link
key={`${label}_${idx}`}
href={href}
sx={
!active ? undefined : { color: COLOR.white, fontWeight: 500 }
}
target={isBlank ? "_blank" : "_self"}
>
{label}
</Link>
))}
].map(({ label, active, href, isBlank, subMenu }, idx) =>
!subMenu ? (
<Link
key={`${label}_${idx}`}
href={href}
sx={
!active
? undefined
: { color: COLOR.white, fontWeight: 500 }
}
target={isBlank ? "_blank" : "_self"}
>
{label}
</Link>
) : (
<Section>
<SubMenu
onClick={() => openSubMenuHandler(idx)}
sx={!subMenu.open ? undefined : { color: COLOR.white }}
>
<CloseIcon
sx={{
width: 16,
transition: "transform 0.15s",
...(!subMenu.open
? { transform: "rotate(45deg)" }
: { transform: "rotate(0deg)" }),
}}
/>
<div>{label}</div>
</SubMenu>
<Collapse in={subMenu.open} timeout="auto" unmountOnExit>
{subMenu.content.map(({ label, href }, idx) => (
<Link
key={`${label}_${idx}`}
href={href}
sx={{
pl: 3,
...(!active
? undefined
: { color: COLOR.white, fontWeight: 500 }),
}}
target={"_blank"}
>
{label}
</Link>
))}
</Collapse>
</Section>
)
)}
</LinkContainer>
</Hidden>
</Nav>
Expand Down
4 changes: 4 additions & 0 deletions apps/connect/src/env/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
}
13 changes: 13 additions & 0 deletions apps/connect/src/env/token-bridge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
13 changes: 13 additions & 0 deletions apps/connect/src/env/usdc-bridge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<WormholeConnectConfig>(
Expand Down
Loading