feat: refactor navbar & add evm explorer links no navbar

client/src/app/App.tsx

@@ -3,12 +3,11 @@ import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { RouteComponentProps } from "react-router-dom";
 import { AppRouteProps } from "./AppRouteProps";
-import { buildMetaLabel, buildUtilities, getFooterItems, getPages, getFaviconHelmet, networkContextWrapper } from "./AppUtils";
+import { buildMetaLabel, getFooterItems, getPages, getFaviconHelmet, networkContextWrapper } from "./AppUtils";
 import Disclaimer from "./components/Disclaimer";
 import Footer from "./components/footer/Footer";
 import ShimmerFooter from "./components/footer/ShimmerFooter";
 import Header from "./components/header/Header";
-import SearchInput from "./components/SearchInput";
 import buildAppRoutes from "./routes";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { isShimmerUiTheme } from "~helpers/networkHelper";
@@ -62,6 +61,7 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
     }
 
     const routes = buildAppRoutes(networkConfig?.protocolVersion ?? "", withNetworkContext);
+    const pages = getPages(networkConfig, networks);
 
     const metaLabel = buildMetaLabel(currentNetworkName);
     const faviconHelmet = getFaviconHelmet(isShimmer);
@@ -81,14 +81,8 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
                 networks={networks}
                 action={action}
                 history={history}
-                search={
-                    <SearchInput
-                        onSearch={(query) => history.push(`/${currentNetworkName}/search/${query}`)}
-                        protocolVersion={networkConfig?.protocolVersion ?? STARDUST}
-                    />
-                }
-                pages={getPages(networkConfig, networks)}
-                utilities={buildUtilities(network ?? "", networks, identityResolverEnabled)}
+                protocolVersion={protocolVersion}
+                pages={pages}
             />
             <div className="content">
                 {networks.length > 0 ? (

client/src/app/AppUtils.tsx

@@ -5,6 +5,7 @@ import { INetwork } from "~models/config/INetwork";
 import { ALPHANET, CHRYSALIS_MAINNET, DEVNET, LEGACY_MAINNET, MAINNET, NetworkType, SHIMMER, TESTNET } from "~models/config/networkType";
 import { IOTA_UI, Theme } from "~models/config/uiTheme";
 import { IReducedNodeInfo } from "~services/nodeInfoService";
+import { NavigationRoute } from "./lib/interfaces";
 
 export const networkContextWrapper = (currentNetwork: string | undefined, nodeInfo: IReducedNodeInfo | null, uiTheme: Theme | undefined) =>
     function withNetworkContext(wrappedComponent: ReactNode) {
@@ -24,30 +25,57 @@ export const networkContextWrapper = (currentNetwork: string | undefined, nodeIn
         ) : null;
     };
 
-export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]) => {
-    const pages = [];
-    if (networks.length > 0 && currentNetwork !== undefined) {
-        pages.push({ label: "Explorer", url: `/${currentNetwork.network}/` });
-        pages.push({ label: "Visualizer", url: `/${currentNetwork.network}/visualizer/` });
+export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]): NavigationRoute[] => {
+    const hasNetworks = networks.length > 0 && currentNetwork !== undefined;
 
-        if (currentNetwork.hasStatisticsSupport) {
-            pages.push({ label: "Statistics", url: `/${currentNetwork.network}/statistics/` });
-        }
-    }
-
-    return pages;
-};
+    const { network, hasStatisticsSupport } = currentNetwork ?? { network: "", hasStatisticsSupport: false };
 
-export const buildUtilities = (currentNetwork: string, networks: INetwork[], identityResolverEnabled: boolean) => {
-    const utilities = [];
-    if (networks.length > 0) {
-        utilities.push({ label: "Streams v0", url: `/${currentNetwork}/streams/0/` });
-        if (identityResolverEnabled) {
-            utilities.push({ label: "Decentralized Identifier", url: `/${currentNetwork}/identity-resolver/` });
-        }
-    }
+    const routes: NavigationRoute[] = [
+        {
+            label: "Explorer",
+            url: `/${network}/`,
+            disabled: !hasNetworks,
+        },
+        {
+            label: "Visualizer",
+            url: `/${network}/visualizer/`,
+            disabled: !hasNetworks,
+        },
+        {
+            label: "Statistics",
+            url: `/${network}/statistics/`,
+            disabled: !hasStatisticsSupport || !hasNetworks,
+        },
+        {
+            label: "Utilities",
+            disabled: network !== CHRYSALIS_MAINNET || !hasNetworks,
+            routes: [
+                { label: "Streams v0", url: `/${network}/streams/0/` },
+                {
+                    label: "Decentralized Identifier",
+                    url: `/${network}/identity-resolver/`,
+                    disabled: network !== CHRYSALIS_MAINNET,
+                },
+            ],
+        },
+        {
+            label: "EVM",
+            routes: [
+                {
+                    label: "ShimmerEVM Explorer",
+                    url: "https://explorer.evm.shimmer.network/",
+                    isExternal: true,
+                },
+                {
+                    label: "ShimmerEVM Testnet Testnet",
+                    url: "https://explorer.evm.testnet.shimmer.network/",
+                    isExternal: true,
+                },
+            ],
+        },
+    ];
 
-    return utilities;
+    return routes;
 };
 
 /**

client/src/app/components/header/Header.scss

@@ -150,21 +150,25 @@ header {
         }
 
         .navigation--item,
-        .utilities--wrapper {
+        .header-dropdown--wrapper {
             @include font-size(14px, 21px);
 
             display: flex;
             align-items: center;
             height: 100%;
-            margin-left: 40px;
             color: var(--navbar-color);
             font-family: $metropolis;
             font-weight: 600;
             letter-spacing: 0.01em;
+            margin-left: 32px;
+
+            &:first-child {
+                margin-left: 40px;
+            }
         }
 
-        .utilities--wrapper {
-            .utilities--dropdown {
+        .header-dropdown--wrapper {
+            .header-dropdown--dropdown {
                 display: flex;
                 align-items: center;
                 font-family: $metropolis;
@@ -176,12 +180,13 @@ header {
                     color: var(--navbar-color);
                     font-weight: 600;
                     letter-spacing: 0.01em;
+                    text-wrap: nowrap;
                 }
 
                 .icon {
                     display: flex;
                     align-items: center;
-                    margin-left: 8px;
+                    margin-left: 4px;
 
                     span {
                         margin-bottom: 3px;
@@ -204,14 +209,14 @@ header {
                 }
             }
 
-            .utilities {
+            .header-dropdown {
                 padding: 64px 120px 120px 120px;
 
                 & * {
                     margin-bottom: 8px;
                 }
 
-                .utilities--label {
+                .header-dropdown--label {
                     color: var(--navbar-color);
                     font-family: $metropolis;
                     font-weight: 700;
@@ -221,7 +226,7 @@ header {
                     @include font-size(14px, 21px);
                 }
 
-                .utilities--item a {
+                .header-dropdown--item a {
                     color: $gray-7;
                     font-family: $inter;
                     letter-spacing: 0.5px;
@@ -231,11 +236,14 @@ header {
             }
         }
 
-        .utilities--mobile {
+        .header-dropdown--mobile {
             transition: opacity 0.3s ease-in-out;
             opacity: 0;
+            height: 0;
+            overflow: hidden;
 
             &.opened {
+                height: auto;
                 opacity: 1;
             }
         }
@@ -296,7 +304,7 @@ header {
 
         @include desktop-down {
             .navigation--item,
-            .utilities--wrapper,
+            .header-dropdown--wrapper,
             .search-input {
                 display: none;
             }