frontend-monorepo-567: Ensure menu sits above other content when open on mobile (#617)

* frontend-monorepo-567: Gave menu a high z-index to ensure it's shown above any positioned elements or ui-toolkit components

* frontend-monorepo-567: Clean up explorer nav component classes using classnames

apps/explorer/src/app/components/nav/index.tsx

@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import routerConfig from '../../routes/router-config';
+import classnames from 'classnames';
 
 interface NavProps {
   menuOpen: boolean;
@@ -9,18 +10,29 @@ export const Nav = ({ menuOpen }: NavProps) => {
   return (
     <nav className="relative">
       <div
-        className={`${
-          menuOpen ? 'right-0 h-[100vh]' : 'right-[200vw] h-full'
-        } transition-[right] absolute top-0 w-full md:static md:border-r-1 bg-white dark:bg-black p-20`}
+        className={classnames(
+          'absolute top-0 z-50 md:static',
+          'w-full p-20 md:border-r-1',
+          'bg-white dark:bg-black',
+          'transition-[right]',
+          {
+            'right-0 h-[100vh]': menuOpen,
+            'right-[200vw] h-full': !menuOpen,
+          }
+        )}
       >
         {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'
-              }`
+              classnames(
+                'block mb-8 px-8',
+                'text-h5 hover:bg-vega-yellow hover:text-black',
+                {
+                  'bg-vega-yellow text-black': isActive,
+                }
+              )
             }
           >
             {r.text}