From 8a367ea4cf98c8caa64e2e85720da41a62a1040e Mon Sep 17 00:00:00 2001 From: Yana Date: Wed, 25 Jun 2025 18:49:51 +0300 Subject: [PATCH] Adjust header menus --- explorer-v2/envs/config.ts | 39 -------- .../app/(pages)/{table => servers}/page.tsx | 2 +- .../src/components/header/DesktopHeader.tsx | 90 +++++++++++++++++-- ...nvironment.tsx => EnvironmentSwitcher.tsx} | 64 ++++++------- .../src/components/header/HeaderItem.tsx | 8 +- .../src/components/header/MobileHeader.tsx | 63 ++++++++++++- .../src/components/header/menuItems.ts | 4 +- .../src/components/staking/StakeTable.tsx | 2 +- 8 files changed, 180 insertions(+), 92 deletions(-) rename explorer-v2/src/app/(pages)/{table => servers}/page.tsx (95%) rename explorer-v2/src/components/header/{Environment.tsx => EnvironmentSwitcher.tsx} (54%) diff --git a/explorer-v2/envs/config.ts b/explorer-v2/envs/config.ts index 9b7df4287f..288006c392 100644 --- a/explorer-v2/envs/config.ts +++ b/explorer-v2/envs/config.ts @@ -6,40 +6,6 @@ interface EnvConfig { apiUrl?: string; } -function log(message?: any, ...optionalParams: any[]) { - if ( - process.env.NODE_ENV === "development" || - process.env.DEBUG_CONFIG_LOGS === "true" - ) { - console.log(message, ...optionalParams); - } -} - -// export function getCurrentEnv(): Environment { -// // Check for VERCEL_ENV from .env file -// if (process.env.VERCEL_ENV === "sandbox") { -// return "sandbox"; -// } -// if (process.env.VERCEL_ENV === "production") { -// return "mainnet"; -// } - -// // Check for environment-specific deployment branches -// if (process.env.VERCEL_GIT_COMMIT_REF === "deploy/sandbox") { -// return "sandbox"; -// } -// if (process.env.VERCEL_GIT_COMMIT_REF === "deploy/mainnet") { -// return "mainnet"; -// } - -// // Check for NODE_ENV -// if (process.env.NODE_ENV === "production") { -// return "mainnet"; -// } - -// // Default to mainnet for development -// return "mainnet"; -// } function getMainnetEnv(): EnvConfig { return { @@ -73,11 +39,6 @@ export const getEnvByName = (name: Environment): EnvConfig => { return getMainnetEnv(); }; -// export const getEnv = (): EnvConfig => { -// const currentEnv = getCurrentEnv(); -// log(`currentEnv = "${currentEnv}"`); -// return getEnvByName(currentEnv); -// }; export const getBasePathByEnv = (env: Environment): string => { return getEnvByName(env).basePath; diff --git a/explorer-v2/src/app/(pages)/table/page.tsx b/explorer-v2/src/app/(pages)/servers/page.tsx similarity index 95% rename from explorer-v2/src/app/(pages)/table/page.tsx rename to explorer-v2/src/app/(pages)/servers/page.tsx index 7e6fb4b62d..3281f2109d 100644 --- a/explorer-v2/src/app/(pages)/table/page.tsx +++ b/explorer-v2/src/app/(pages)/servers/page.tsx @@ -12,7 +12,7 @@ export default function ExplorerPage() { - + diff --git a/explorer-v2/src/components/header/DesktopHeader.tsx b/explorer-v2/src/components/header/DesktopHeader.tsx index 1eca8c8440..8a73617660 100644 --- a/explorer-v2/src/components/header/DesktopHeader.tsx +++ b/explorer-v2/src/components/header/DesktopHeader.tsx @@ -1,15 +1,43 @@ "use client"; -import { Box, Divider } from "@mui/material"; +import { Box, Divider, Stack, Button } from "@mui/material"; import NymLogo from "../../components/icons/NymLogo"; import { Link } from "../../components/muiLink"; import { Wrapper } from "../../components/wrapper"; import ConnectWallet from "../wallet/ConnectWallet"; -import HeaderItem from "./HeaderItem"; import { DarkLightSwitchDesktop } from "./Switch"; import MENU_DATA from "./menuItems"; -import { Environment } from "./Environment"; +import { EnvironmentSwitcher } from "./EnvironmentSwitcher"; +import { usePathname } from "next/navigation"; +import { getBasePathByEnv } from "../../../envs/config"; +import { useEnvironment } from "@/providers/EnvironmentProvider"; +import { Circle } from "@mui/icons-material"; + export const DesktopHeader = () => { + const pathname = usePathname(); + const { environment } = useEnvironment(); + const basePath = getBasePathByEnv(environment || "mainnet"); + const explorerName = environment + ? `${environment} Explorer` + : "Mainnet Explorer"; + + // Helper function to determine if a tab is active + const isTabActive = (tabTitle: string) => { + // Check if the current pathname matches the tab title + // For explorerName, check if we're on the base path + if (tabTitle === explorerName) { + return pathname === basePath || pathname === basePath + "/"; + } + + // For menu items, check if the pathname includes the menu URL + const menuItem = MENU_DATA.find((menu) => menu.title === tabTitle); + if (menuItem) { + return pathname.includes(menuItem.url); + } + + return false; + }; + return ( { display: "flex", justifyContent: "space-between", alignItems: "center", - gap: "42px", + gap: "30px", height: "100%", }} > @@ -38,21 +66,67 @@ export const DesktopHeader = () => { > - + + + + + + {MENU_DATA.map((menu) => ( - + + + + + + + ))} + diff --git a/explorer-v2/src/components/header/Environment.tsx b/explorer-v2/src/components/header/EnvironmentSwitcher.tsx similarity index 54% rename from explorer-v2/src/components/header/Environment.tsx rename to explorer-v2/src/components/header/EnvironmentSwitcher.tsx index 5cfcbba808..cd4c6f898a 100644 --- a/explorer-v2/src/components/header/Environment.tsx +++ b/explorer-v2/src/components/header/EnvironmentSwitcher.tsx @@ -1,23 +1,20 @@ "use client"; import React from "react"; -import { Typography, Button, Link as MuiLink } from "@mui/material"; +import { Button } from "@mui/material"; import { useTheme } from "@mui/material/styles"; import { useEnvironment } from "../../providers/EnvironmentProvider"; import { useRouter, usePathname } from "next/navigation"; import { getBasePathByEnv } from "../../../envs/config"; +import { colours } from "@/theme/colours"; -export const Environment: React.FC = () => { +export const EnvironmentSwitcher: React.FC = () => { const theme = useTheme(); const { environment, setEnvironment } = useEnvironment(); const router = useRouter(); const pathname = usePathname(); - const explorerName = environment - ? `${environment} Explorer` - : "Mainnet Explorer"; - const switchNetworkText = - environment === "mainnet" ? "Switch to Testnet" : "Switch to Mainnet"; + environment === "mainnet" ? "Switch to Sandbox" : "Switch to Mainnet"; const getCurrentInternalPath = () => { // Remove the base path from the current pathname to get the internal path @@ -39,39 +36,30 @@ export const Environment: React.FC = () => { }; return ( - - - {explorerName} - - - + {switchNetworkText} + ); }; diff --git a/explorer-v2/src/components/header/HeaderItem.tsx b/explorer-v2/src/components/header/HeaderItem.tsx index 992e8edece..f0a7c471f5 100644 --- a/explorer-v2/src/components/header/HeaderItem.tsx +++ b/explorer-v2/src/components/header/HeaderItem.tsx @@ -19,7 +19,13 @@ const HeaderItem = ({ menu }: HeaderItemProps) => { return ( - {pathname.includes(menu.url) && } + +