From fd90175e87786f31efe24b6f402d0d1209aa22f1 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 10 Aug 2022 15:43:42 +0200
Subject: [PATCH] adding button on mov nav and make it smaller

---
 explorer/src/components/MobileNav.tsx | 22 ++++++++++++++++++++--
 explorer/src/components/Nav.tsx       |  4 ++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index cab6e50e5b..313a9ae8ba 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -30,9 +30,16 @@ type MobileNavProps = {
 
 export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: MobileNavProps) => {
   const theme = useTheme();
-  const { navState, updateNavState } = useMainContext();
+  const { navState, updateNavState, environment } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
 
+  const explorerName =
+    `${environment && environment.charAt(0).toUpperCase() + environment.slice(1)} Explorer` || 'Mainnet Explorer';
+
+  const switchNetworkText = environment === 'mainnet' ? 'Switch to Testnet' : 'Switch to Mainnet';
+  const switchNetworkLink =
+    environment === 'mainnet' ? 'https://sandbox-explorer.nymtech.net' : 'https://explorer.nymtech.net';
+
   const toggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
   };
@@ -81,11 +88,22 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
                 fontSize: '18px',
                 fontWeight: 600,
                 ml: 2,
+                display: 'flex',
+                flexDirection: 'column',
               }}
             >
               <MuiLink component={Link} to="/overview" underline="none" color="inherit">
-                Network Explorer
+                {explorerName}
               </MuiLink>
+              <Button
+                size="small"
+                variant="outlined"
+                color="inherit"
+                href={switchNetworkLink}
+                sx={{ textTransform: 'none', width: 150 }}
+              >
+                {switchNetworkText}
+              </Button>
             </Typography>
           </Box>
 
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index 9b0d7f4f51..4b13edda46 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -308,11 +308,11 @@ export const Nav: React.FC = ({ children }) => {
                 {explorerName}
               </MuiLink>
               <Button
-                size="large"
+                size="small"
                 variant="outlined"
                 color="inherit"
                 href={switchNetworkLink}
-                sx={{ textTransform: 'none', width: 200, ml: 4 }}
+                sx={{ textTransform: 'none', width: 150, ml: 4 }}
               >
                 {switchNetworkText}
               </Button>