Include Submenu option + Cosmos link in navbar

XLabs · Nov 25, 2024 · 90c0233 · 90c0233
1 parent 417df15
commit 90c0233
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 38 deletions.
diff --git 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];
+    if (newItems[index].subMenu) {
+      if (newItems[index].subMenu) {
+        newItems[index].subMenu.open = !newItems[index].subMenu.open;
+        setItems(newItems);
+      }
+    }
+  };
   return (
     <AppBar position="static" color="inherit">
       <Nav>
@@ -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>

diff --git 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
@@ -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
@@ -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
@@ -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 (
     <AppBar position="static" color="inherit">
       <Nav>
@@ -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>

diff --git a/apps/connect/src/env/common.ts b/apps/connect/src/env/common.ts
@@ -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
@@ -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
@@ -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>(