GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust header menus

Browse Source
This commit is contained in:
Yana
2025-06-25 18:49:51 +03:00
parent 1eb39d1383
commit 8a367ea4cf
8 changed files with 180 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer-v2/envs/config.ts
-39
View File
@@ -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;
explorer-v2/src/app/(pages)/table/page.tsx → explorer-v2/src/app/(pages)/servers/page.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function ExplorerPage() {
<ContentLayout>
<Wrapper>
<Stack gap={5}>
<SectionHeading title="Explorer" />
<SectionHeading title="Servers" />
<NodeAndAddressSearch />
</Stack>
<Box sx={{ mt: 5 }}>
explorer-v2/src/components/header/DesktopHeader.tsx
+82 -8
View File
@@ -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 (
<Box
sx={{
@@ -23,7 +51,7 @@ export const DesktopHeader = () => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "42px",
gap: "30px",
height: "100%",
}}
>
@@ -38,21 +66,67 @@ export const DesktopHeader = () => {
>
<NymLogo />
</Link>
<Environment />
<Box
sx={{
display: "flex",
flexGrow: 1,
alignItems: "center",
justifyContent: "start",
justifyContent: "center",
height: "100%",
gap: 5,
gap: 4,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "start",
height: "100%",
gap: 1,
}}
>
<Circle
sx={{
fontSize: 10,
opacity: isTabActive(explorerName) ? 1 : 0,
}}
/>
<Link href={basePath} passHref style={{ textDecoration: "none" }}>
<Button
sx={{
padding: 0,
}}
>
{explorerName}
</Button>
</Link>
</Box>
{MENU_DATA.map((menu) => (
<HeaderItem key={menu.id} menu={menu} />
<Stack direction="row" gap={1} key={menu.id} alignItems="center">
<Circle
sx={{
fontSize: 10,
opacity: isTabActive(menu.title) ? 1 : 0,
}}
/>
<Link
href={`${basePath}${menu.url}`}
style={{ textDecoration: "none" }}
passHref
>
<Button
sx={{
padding: 0,
}}
>
{menu.title}
</Button>
</Link>
</Stack>
))}
</Box>
<EnvironmentSwitcher />
<ConnectWallet size="small" />
<DarkLightSwitchDesktop />
</Wrapper>
explorer-v2/src/components/header/Environment.tsx → explorer-v2/src/components/header/EnvironmentSwitcher.tsx
+26 -38
View File
@@ -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 (
<Typography
variant="h6"
noWrap
<Button
variant="outlined"
color="inherit"
onClick={handleSwitchEnvironment}
sx={{
color: theme.palette.text.primary,
fontSize: "18px",
fontWeight: 600,
borderRadius: 2,
px: 2,
py: 1,
color:
theme.palette.mode === "light"
? `${theme.palette.common.black} !important`
: `${theme.palette.common.white} !important`,
borderColor:
theme.palette.mode === "light"
? theme.palette.common.black
: theme.palette.common.white,
borderStyle: environment === "sandbox" ? "solid" : "dashed",
backgroundColor:
environment === "sandbox" ? colours.pine[800] : "transparent",
fontWeight: 500,
fontSize: 14,
}}
>
<MuiLink
href={getBasePathByEnv(environment || "mainnet")}
underline="none"
color="inherit"
textTransform="capitalize"
>
{explorerName}
</MuiLink>
<Button
size="small"
variant="outlined"
color="inherit"
onClick={handleSwitchEnvironment}
sx={{
borderRadius: 2,
textTransform: "none",
width: 150,
ml: 4,
fontSize: 14,
fontWeight: 600,
}}
>
{switchNetworkText}
</Button>
</Typography>
{switchNetworkText}
</Button>
);
};
explorer-v2/src/components/header/HeaderItem.tsx
+7 -1
View File
@@ -19,7 +19,13 @@ const HeaderItem = ({ menu }: HeaderItemProps) => {
return (
<Stack direction="row" gap={2} key={menu.id} alignItems="center">
{pathname.includes(menu.url) && <Circle sx={{ fontSize: 10 }} />}
<Circle
sx={{
fontSize: 10,
display: pathname.includes(menu.url) ? "block" : "none",
}}
/>
<Link href={`${basePath}${menu.url}`} passHref>
<Button
sx={{
explorer-v2/src/components/header/MobileHeader.tsx
+61 -2
View File
@@ -9,10 +9,19 @@ import NymLogo from "../icons/NymLogo";
import ConnectWallet from "../wallet/ConnectWallet";
import { DarkLightSwitchDesktop } from "./Switch";
import MENU_DATA from "./menuItems";
import { Environment } from "./Environment";
import { EnvironmentSwitcher } from "./EnvironmentSwitcher";
import { useEnvironment } from "@/providers/EnvironmentProvider";
import { getBasePathByEnv } from "../../../envs/config";
export const MobileHeader = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const theme = useTheme();
const { environment } = useEnvironment();
const basePath = getBasePathByEnv(environment || "mainnet");
const explorerName = environment
? `${environment} Explorer`
: "Mainnet Explorer";
// Mobile menu handlers
const toggleDrawer = (open: boolean) => {
@@ -62,6 +71,55 @@ export const MobileHeader = () => {
>
{/* Main Menu */}
<Box sx={{ width: "50%", height: "100%" }}>
<Box key={explorerName} sx={{ marginBottom: 3 }}>
<Link
onClick={() => toggleDrawer(false)}
href={basePath}
target="_self"
sx={{
display: "flex",
width: "100%",
padding: 3.75,
color:
theme.palette.mode === "dark"
? "base.white"
: "background.main",
justifyContent: "space-between",
alignItems: "center",
textDecoration: "none",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: 1.25,
}}
>
<Box
sx={{
display: "block",
width: "10px",
height: "10px",
borderRadius: "100%",
bgcolor:
theme.palette.mode === "dark"
? "base.white"
: "primary.main",
}}
/>
<Typography
color={
theme.palette.mode === "dark" ? "base.white" : "primary"
}
variant="h4"
>
{explorerName}
</Typography>
</Box>
</Link>
</Box>
{MENU_DATA.map((menu) => (
<Box key={menu.title} sx={{ marginBottom: 3 }}>
<Link
@@ -78,6 +136,7 @@ export const MobileHeader = () => {
: "background.main",
justifyContent: "space-between",
alignItems: "center",
textDecoration: "none",
}}
>
<Box
@@ -178,7 +237,7 @@ const MobileMenuHeader = ({
width: "100%",
}}
>
{!drawerOpen && <Environment />}
{!drawerOpen && <EnvironmentSwitcher />}
{!drawerOpen && <ConnectWallet size="small" />}
</Box>
<Box height={40} />
explorer-v2/src/components/header/menuItems.ts
+2 -2
View File
@@ -7,8 +7,8 @@ export type MenuItem = {
const MENU_DATA: MenuItem[] = [
{
id: 1,
title: "Explorer",
url: "/table",
title: "Servers",
url: "/servers",
},
{
id: 2,
explorer-v2/src/components/staking/StakeTable.tsx
+1 -1
View File
@@ -553,7 +553,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
size="large"
onClick={(e) => e.stopPropagation()}
>
<Link href="/table" underline="none" color="inherit">
<Link href="/servers" underline="none" color="inherit">
Stake
</Link>
</Button>