chore/refactor monitor relayer paths

src/components/layout/docs-layout-client.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
+import { useMemo } from "react";
 import { baseOptions } from "@/app/layout.config";
 import {
 	ArbitrumIcon,
@@ -21,67 +23,87 @@ interface DocsLayoutClientProps {
 
 export function DocsLayoutClient({ children }: DocsLayoutClientProps) {
 	const currentTree = useNavigationTree();
+	const pathname = usePathname();
+
+	// Determine if shared paths should be included in Stellar tab based on sessionStorage
+	const tabs = useMemo(() => {
+		const isSharedPath =
+			pathname.startsWith("/monitor") || pathname.startsWith("/relayer");
+		const lastEcosystem =
+			typeof window !== "undefined"
+				? sessionStorage.getItem("lastEcosystem")
+				: null;
+
+		// Include shared paths in Stellar tab only if coming from Stellar context
+		const stellarUrls =
+			isSharedPath && lastEcosystem === "stellar"
+				? new Set(["/stellar-contracts", "/monitor", "/relayer"])
+				: new Set(["/stellar-contracts"]);
+
+		return [
+			{
+				title: "Ethereum & EVM",
+				url: "/contracts",
+				icon: <EthereumIcon className="w-5 h-5" />,
+				urls: new Set([
+					"/contracts",
+					"/community-contracts",
+					"/upgrades-plugins",
+					"/wizard",
+					"/relayer",
+					"/monitor",
+					"/ui-builder",
+					"/upgrades",
+					"/defender",
+					"/tools",
+				]),
+			},
+			{
+				title: "Arbitrum Stylus",
+				url: "/contracts-stylus",
+				icon: <ArbitrumIcon className="w-5 h-5" />,
+			},
+			{
+				title: "Starknet",
+				url: "/contracts-cairo",
+				icon: <StarknetIcon className="w-5 h-5" />,
+			},
+			{
+				title: "Stellar",
+				url: "/stellar-contracts",
+				icon: <StellarIcon className="w-5 h-5" />,
+				urls: stellarUrls,
+			},
+			{
+				title: "Midnight",
+				url: "/contracts-compact",
+				icon: <MidnightIcon className="w-5 h-5" />,
+			},
+			{
+				title: "Polkadot",
+				url: "/substrate-runtimes",
+				icon: <PolkadotIcon className="w-5 h-5" />,
+			},
+			{
+				title: "Uniswap Hooks",
+				url: "/uniswap-hooks",
+				icon: <UniswapIcon className="w-5 h-5" />,
+			},
+			{
+				title: "Zama FHEVM",
+				url: "/confidential-contracts",
+				icon: <ZamaIcon className="w-5 h-5" />,
+			},
+		];
+	}, [pathname]);
 
 	return (
 		<DocsLayout
 			tree={currentTree}
 			nav={{ ...baseOptions, mode: "top", transparentMode: "none" }}
 			{...baseOptions}
 			sidebar={{
-				tabs: [
-					{
-						title: "Ethereum & EVM",
-						url: "/contracts",
-						icon: <EthereumIcon className="w-5 h-5" />,
-						urls: new Set([
-							"/contracts",
-							"/community-contracts",
-							"/upgrades-plugins",
-							"/wizard",
-							"/relayer",
-							"/monitor",
-							"/ui-builder",
-							"/upgrades",
-							"/defender",
-							"/tools",
-						]),
-					},
-					{
-						title: "Arbitrum Stylus",
-						url: "/contracts-stylus",
-						icon: <ArbitrumIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Starknet",
-						url: "/contracts-cairo",
-						icon: <StarknetIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Stellar",
-						url: "/stellar-contracts",
-						icon: <StellarIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Midnight",
-						url: "/contracts-compact",
-						icon: <MidnightIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Polkadot",
-						url: "/substrate-runtimes",
-						icon: <PolkadotIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Uniswap Hooks",
-						url: "/uniswap-hooks",
-						icon: <UniswapIcon className="w-5 h-5" />,
-					},
-					{
-						title: "Zama FHEVM",
-						url: "/confidential-contracts",
-						icon: <ZamaIcon className="w-5 h-5" />,
-					},
-				],
+				tabs,
 			}}
 		>
 			{children}

src/hooks/use-navigation-tree.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { useEffect } from "react";
 import {
 	arbitrumStylusTree,
 	ethereumEvmTree,
@@ -15,6 +16,26 @@ import {
 export function useNavigationTree() {
 	const pathname = usePathname();
 
+	// Track ecosystem changes in sessionStorage
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+
+		if (pathname.startsWith("/stellar-contracts")) {
+			sessionStorage.setItem("lastEcosystem", "stellar");
+		} else if (
+			pathname.startsWith("/contracts") ||
+			pathname.startsWith("/community-contracts") ||
+			pathname.startsWith("/upgrades-plugins") ||
+			pathname.startsWith("/wizard") ||
+			pathname.startsWith("/ui-builder") ||
+			pathname.startsWith("/upgrades") ||
+			pathname.startsWith("/defender") ||
+			pathname.startsWith("/tools")
+		) {
+			sessionStorage.setItem("lastEcosystem", "ethereum");
+		}
+	}, [pathname]);
+
 	// Determine which navigation tree to use based on the current path
 	if (pathname.startsWith("/contracts-stylus")) {
 		return arbitrumStylusTree;
@@ -34,5 +55,23 @@ export function useNavigationTree() {
 		return ethereumEvmTree;
 	}
 
+	// For shared paths like /monitor and /relayer, check sessionStorage to see
+	// which ecosystem was last active, defaulting to ethereumEvmTree
+	if (typeof window !== "undefined") {
+		const lastEcosystem = sessionStorage.getItem("lastEcosystem");
+
+		if (pathname.startsWith("/monitor") || pathname.startsWith("/relayer")) {
+			switch (lastEcosystem) {
+				case "stellar":
+					return stellarTree;
+				case "ethereum":
+					return ethereumEvmTree;
+				default:
+					return ethereumEvmTree;
+			}
+		}
+	}
+
+	// Default to ethereumEvmTree for other paths
 	return ethereumEvmTree;
 }

src/navigation/ethereum-evm.json

@@ -785,7 +785,7 @@
 	},
 	{
 		"type": "separator",
-		"name": "Tools"
+		"name": "Open Source Tools"
 	},
 	{
 		"type": "folder",
@@ -837,11 +837,6 @@
 				"name": "Solana Integration",
 				"url": "/relayer/solana"
 			},
-			{
-				"type": "page",
-				"name": "Stellar Integration",
-				"url": "/relayer/stellar"
-			},
 			{
 				"type": "folder",
 				"name": "API Reference",
@@ -1085,6 +1080,11 @@
 	{
 		"type": "folder",
 		"name": "Monitor",
+		"index": {
+			"type": "page",
+			"name": "Overview",
+			"url": "/monitor"
+		},
 		"children": [
 			{
 				"type": "page",