From 1f14b4fbe17ffdc36fe9039cf0589e0fef88d6ec Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel@vegaprotocol.io>
Date: Fri, 1 Apr 2022 15:20:23 +0100
Subject: [PATCH] Feat/48-mobile-experience (#194)

* Mobile nav

* Made the logo into a link to the home route

* Bit of padding on transaction table cells to avoid smooshing
---
 apps/explorer/src/app/app.tsx                 | 31 +++++++++-----
 .../src/app/components/header/header.tsx      | 32 ++++++++++-----
 .../src/app/components/main/index.tsx         |  2 +-
 .../explorer/src/app/components/nav/index.tsx | 40 ++++++++++++-------
 .../src/app/components/search/search.tsx      |  4 +-
 .../src/app/components/txs/txs-per-block.tsx  |  4 +-
 6 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 595caabdc..b4c694d23 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -1,3 +1,5 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router';
 import { ApolloProvider } from '@apollo/client';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
@@ -5,26 +7,37 @@ import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
-import React from 'react';
 import { DATA_SOURCES } from './config';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 
 function App() {
   const [theme, toggleTheme] = useThemeSwitcher();
+  const [menuOpen, setMenuOpen] = useState(false);
 
-  const client = React.useMemo(
-    () => createClient(DATA_SOURCES.dataNodeUrl),
-    []
-  );
+  const location = useLocation();
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [location]);
+
+  const client = useMemo(() => createClient(DATA_SOURCES.dataNodeUrl), []);
 
   return (
     <ThemeContext.Provider value={theme}>
       <TendermintWebsocketProvider>
         <ApolloProvider client={client}>
-          <div className="antialiased m-0 bg-white dark:bg-black text-black dark:text-white ">
-            <div className="min-h-[100vh] max-w-[1300px] grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-black dark:border-white lg:border-l-1 lg:border-r-1 mx-auto">
-              <Nav />
-              <Header toggleTheme={toggleTheme} />
+          <div
+            className={`${
+              menuOpen && 'h-[100vh] overflow-hidden'
+            } antialiased m-0 bg-white dark:bg-black text-black dark:text-white`}
+          >
+            <div className="min-h-[100vh] max-w-[1300px] grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-black dark:border-white lg:border-l-1 lg:border-r-1 mx-auto">
+              <Header
+                toggleTheme={toggleTheme}
+                menuOpen={menuOpen}
+                setMenuOpen={setMenuOpen}
+              />
+              <Nav menuOpen={menuOpen} />
               <Main />
             </div>
           </div>
diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx
index e1390617f..2a7762d9a 100644
--- a/apps/explorer/src/app/components/header/header.tsx
+++ b/apps/explorer/src/app/components/header/header.tsx
@@ -1,20 +1,34 @@
-import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
+import type { Dispatch, SetStateAction } from 'react';
+import { Link } from 'react-router-dom';
+import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
+import { Routes } from '../../routes/router-config';
 
 interface ThemeToggleProps {
   toggleTheme: () => void;
+  menuOpen: boolean;
+  setMenuOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const Header = ({ toggleTheme }: ThemeToggleProps) => {
+export const Header = ({
+  toggleTheme,
+  menuOpen,
+  setMenuOpen,
+}: ThemeToggleProps) => {
   return (
-    <header className="flex items-center px-16 py-16 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
-      <h1
-        className="text-h3 font-alpha uppercase calt"
-        data-testid="explorer-header"
-      >
-        {t('Vega Explorer')}
-      </h1>
+    <header className="grid grid-rows-2 grid-cols-[1fr_auto] md:flex md:col-span-2 p-16 gap-12 border-b-1">
+      <Link to={Routes.HOME}>
+        <h1
+          className="text-h3 font-alpha uppercase calt"
+          data-testid="explorer-header"
+        >
+          {t('Vega Explorer')}
+        </h1>
+      </Link>
+      <button className="md:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <Icon name={menuOpen ? 'cross' : 'menu'} size={20} />
+      </button>
       <Search />
       <ThemeSwitcher onToggle={toggleTheme} />
     </header>
diff --git a/apps/explorer/src/app/components/main/index.tsx b/apps/explorer/src/app/components/main/index.tsx
index c020ca0fc..e73b3c783 100644
--- a/apps/explorer/src/app/components/main/index.tsx
+++ b/apps/explorer/src/app/components/main/index.tsx
@@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';
 
 export const Main = () => {
   return (
-    <main className="p-20 col-start-2 col-end-2 row-start-2 row-end-3 overflow-hidden">
+    <main className="p-20 overflow-hidden">
       <AppRouter />
     </main>
   );
diff --git a/apps/explorer/src/app/components/nav/index.tsx b/apps/explorer/src/app/components/nav/index.tsx
index d3bb4d11a..a36fd3022 100644
--- a/apps/explorer/src/app/components/nav/index.tsx
+++ b/apps/explorer/src/app/components/nav/index.tsx
@@ -1,22 +1,32 @@
 import { NavLink } from 'react-router-dom';
 import routerConfig from '../../routes/router-config';
 
-export const Nav = () => {
+interface NavProps {
+  menuOpen: boolean;
+}
+
+export const Nav = ({ menuOpen }: NavProps) => {
   return (
-    <nav className="border-r-1 p-20 col-start-1 col-end-1 row-start-2 row-end-3 overflow-hidden">
-      {routerConfig.map((r) => (
-        <NavLink
-          key={r.name}
-          to={r.path}
-          className={({ isActive }) =>
-            `text-h5 block mb-8 px-8 hover:bg-vega-yellow hover:text-black ${
-              isActive && 'bg-vega-yellow text-black'
-            }`
-          }
-        >
-          {r.text}
-        </NavLink>
-      ))}
+    <nav className="relative">
+      <div
+        className={`${
+          menuOpen ? 'right-0' : 'right-[200vw]'
+        } transition-all absolute top-0 h-[100vh] w-full md:static md:border-r-1 bg-white dark:bg-black p-20`}
+      >
+        {routerConfig.map((r) => (
+          <NavLink
+            key={r.name}
+            to={r.path}
+            className={({ isActive }) =>
+              `text-h5 block mb-8 px-8 hover:bg-vega-yellow hover:text-black ${
+                isActive && 'bg-vega-yellow text-black'
+              }`
+            }
+          >
+            {r.text}
+          </NavLink>
+        ))}
+      </div>
     </nav>
   );
 };
diff --git a/apps/explorer/src/app/components/search/search.tsx b/apps/explorer/src/app/components/search/search.tsx
index aa9ad3021..a5d050062 100644
--- a/apps/explorer/src/app/components/search/search.tsx
+++ b/apps/explorer/src/app/components/search/search.tsx
@@ -53,9 +53,9 @@ export const Search = () => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex-1 flex ml-16 mr-12 justify-end"
+      className="flex-1 flex self-center md:ml-16 md:mr-12 md:justify-end"
     >
-      <FormGroup className="relative w-2/3 mb-0">
+      <FormGroup className="relative w-full md:w-2/3 mb-0">
         <Input
           {...register('search')}
           id="search"
diff --git a/apps/explorer/src/app/components/txs/txs-per-block.tsx b/apps/explorer/src/app/components/txs/txs-per-block.tsx
index 31c33e333..83b0c6de2 100644
--- a/apps/explorer/src/app/components/txs/txs-per-block.tsx
+++ b/apps/explorer/src/app/components/txs/txs-per-block.tsx
@@ -50,7 +50,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
                     key={TxHash}
                     data-testid="transaction-row"
                   >
-                    <TableCell modifier="bordered">
+                    <TableCell modifier="bordered" className="pr-12">
                       <TruncatedLink
                         to={`/${Routes.TX}/${TxHash}`}
                         text={TxHash}
@@ -58,7 +58,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
                         endChars={truncateLength}
                       />
                     </TableCell>
-                    <TableCell modifier="bordered">
+                    <TableCell modifier="bordered" className="pr-12">
                       <TruncatedLink
                         to={`/${Routes.PARTIES}/${PubKey}`}
                         text={PubKey}