feat(console, explorer): console navigation, generic and explorer tweaks

apps/explorer/src/app/components/header/header.tsx

@@ -62,14 +62,14 @@ export const Header = () => {
           <Search />
         </>
       }
-      onResize={(width, ref) => {
+      onResize={(width, el) => {
         if (width < 1157) {
           // switch to magnifying glass trigger when widht < 1157
-          ref.current?.classList.remove('nav-search-full');
-          ref.current?.classList.add('nav-search-compact');
+          el.classList.remove('nav-search-full');
+          el.classList.add('nav-search-compact');
         } else {
-          ref.current?.classList.remove('nav-search-compact');
-          ref.current?.classList.add('nav-search-full');
+          el.classList.remove('nav-search-compact');
+          el.classList.add('nav-search-full');
         }
       }}
     >

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

@@ -1 +0,0 @@
-export * from './nav';

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

@@ -1,181 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom';
-import type { Navigable } from '../../routes/router-config';
-import routerConfig from '../../routes/router-config';
-import classnames from 'classnames';
-import { create } from 'zustand';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { Icon } from '@vegaprotocol/ui-toolkit';
-import first from 'lodash/first';
-import last from 'lodash/last';
-import { BREAKPOINT_MD } from '../../config/breakpoints';
-
-type NavStore = {
-  open: boolean;
-  toggle: () => void;
-  hide: () => void;
-};
-
-export const useNavStore = create<NavStore>()((set, get) => ({
-  open: false,
-  toggle: () => set({ open: !get().open }),
-  hide: () => set({ open: false }),
-}));
-
-const NavLinks = ({ links }: { links: Navigable[] }) => {
-  const navLinks = links.map((r) => (
-    <li key={r.name}>
-      <NavLink
-        to={r.path}
-        className={({ isActive }) =>
-          classnames(
-            'block mb-2 px-2',
-            'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
-            {
-              'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
-                isActive,
-            }
-          )
-        }
-      >
-        {r.text}
-      </NavLink>
-    </li>
-  ));
-
-  return <ul className="pr-8 md:pr-0">{navLinks}</ul>;
-};
-
-export const Nav = () => {
-  const [open, hide] = useNavStore((state) => [state.open, state.hide]);
-  const location = useLocation();
-
-  const navRef = useRef<HTMLElement>(null);
-  const btnRef = useRef<HTMLButtonElement>(null);
-
-  const focusable = useMemo(
-    () =>
-      navRef.current
-        ? [
-            ...(navRef.current.querySelectorAll(
-              'a, button'
-            ) as NodeListOf<HTMLElement>),
-          ]
-        : [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [navRef.current] // do not remove `navRef.current` from deps
-  );
-
-  const closeNav = useCallback(() => {
-    hide();
-    console.log(focusable);
-    focusable.forEach((fe) =>
-      fe.setAttribute(
-        'tabindex',
-        window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
-      )
-    );
-  }, [focusable, hide]);
-
-  // close navigation when location changes
-  useEffect(() => {
-    closeNav();
-  }, [closeNav, location]);
-
-  useLayoutEffect(() => {
-    if (open) {
-      focusable.forEach((fe) => fe.setAttribute('tabindex', '0'));
-    }
-
-    document.body.style.overflow = open ? 'hidden' : '';
-    const offset =
-      document.querySelector('header')?.getBoundingClientRect().top || 0;
-    if (navRef.current) {
-      navRef.current.style.height = `calc(100vh - ${offset}px)`;
-    }
-
-    // focus current by default
-    if (navRef.current && open) {
-      (navRef.current.querySelector('a[aria-current]') as HTMLElement)?.focus();
-    }
-
-    const closeOnEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        closeNav();
-      }
-    };
-
-    // tabbing loop
-    const focusLast = (e: FocusEvent) => {
-      e.preventDefault();
-      const isNavElement =
-        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
-      if (!isNavElement && open) {
-        last(focusable)?.focus();
-      }
-    };
-    const focusFirst = (e: FocusEvent) => {
-      e.preventDefault();
-      const isNavElement =
-        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
-      if (!isNavElement && open) {
-        first(focusable)?.focus();
-      }
-    };
-
-    const resetOnDesktop = () => {
-      focusable.forEach((fe) =>
-        fe.setAttribute(
-          'tabindex',
-          window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
-        )
-      );
-    };
-
-    window.addEventListener('resize', resetOnDesktop);
-
-    first(focusable)?.addEventListener('focusout', focusLast);
-    last(focusable)?.addEventListener('focusout', focusFirst);
-
-    document.addEventListener('keydown', closeOnEsc);
-    return () => {
-      window.removeEventListener('resize', resetOnDesktop);
-      document.removeEventListener('keydown', closeOnEsc);
-      first(focusable)?.removeEventListener('focusout', focusLast);
-      last(focusable)?.removeEventListener('focusout', focusFirst);
-    };
-  }, [closeNav, focusable, open]);
-
-  return (
-    <nav
-      ref={navRef}
-      className={classnames(
-        'absolute top-0 z-20 overflow-y-auto',
-        'transition-[right]',
-        {
-          'right-[-200vw] h-full': !open,
-          'right-0 h-[100vh]': open,
-        },
-        'w-full p-4  border-neutral-700 dark:border-neutral-300',
-        'bg-white dark:bg-black',
-        'md:static md:border-r'
-      )}
-    >
-      <NavLinks links={routerConfig} />
-      <button
-        ref={btnRef}
-        className="absolute top-0 right-0 p-4 md:hidden"
-        onClick={() => {
-          closeNav();
-        }}
-      >
-        <Icon name="cross" />
-      </button>
-    </nav>
-  );
-};

apps/trading/components/navbar/navbar.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import { NavLink, Link } from 'react-router-dom';
+import type { ComponentProps } from 'react';
 import {
   DApp,
   NetworkSwitcher,
@@ -11,32 +9,22 @@ import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import {
-  Drawer,
-  getNavLinkClassNames,
-  getActiveNavLinkClassNames,
-  Nav,
-  NewTab,
   ThemeSwitcher,
+  Navigation,
+  NavigationList,
+  NavigationItem,
+  NavigationLink,
+  ExternalLink,
+  Icon,
+  NavigationBreakpoint,
 } from '@vegaprotocol/ui-toolkit';
-import { Vega } from '../icons/vega';
-import type { HTMLAttributeAnchorTarget } from 'react';
+
 import { Links, Routes } from '../../pages/client-router';
 
-type NavbarTheme = 'inherit' | 'dark' | 'yellow';
-interface NavbarProps {
-  navbarTheme?: NavbarTheme;
-}
-
-const LinkList = ({
-  navbarTheme,
-  className = 'flex',
-  dataTestId = 'navbar-links',
-  onNavigate,
+export const Navbar = ({
+  theme = 'system',
 }: {
-  navbarTheme: NavbarTheme;
-  className?: string;
-  dataTestId?: string;
-  onNavigate?: () => void;
+  theme: ComponentProps<typeof Navigation>['theme'];
 }) => {
   const tokenLink = useLinks(DApp.Token);
   const { marketId } = useGlobalStore((store) => ({
@@ -46,178 +34,47 @@ const LinkList = ({
     ? Links[Routes.MARKET](marketId)
     : Links[Routes.MARKET]();
   return (
-    <div className={className} data-testid={dataTestId}>
-      <AppNavLink
-        name={t('Markets')}
-        path={Links[Routes.MARKETS]()}
-        navbarTheme={navbarTheme}
-        onClick={onNavigate}
-        end
-      />
-      <AppNavLink
-        name={t('Trading')}
-        path={tradingPath}
-        navbarTheme={navbarTheme}
-        onClick={onNavigate}
-        end
-      />
-      <AppNavLink
-        name={t('Portfolio')}
-        path={Links[Routes.PORTFOLIO]()}
-        navbarTheme={navbarTheme}
-        onClick={onNavigate}
-      />
-      <a
-        href={tokenLink(TOKEN_GOVERNANCE)}
-        target="_blank"
-        rel="noreferrer"
-        className={classNames(
-          'w-full md:w-auto',
-          getActiveNavLinkClassNames(false, navbarTheme)
-        )}
-      >
-        <span className="flex items-center justify-between w-full gap-2 pr-3 md:pr-0">
-          {t('Governance')}
-          <NewTab />
-        </span>
-      </a>
-    </div>
-  );
-};
-
-const MobileMenuBar = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [container, setContainer] = useState<HTMLElement | null>(null);
-
-  const menuButton = (
-    <button
-      className={classNames(
-        'flex flex-col justify-around gap-3 p-2 relative z-30 h-[34px]',
-        {
-          'z-50': drawerOpen,
-        }
-      )}
-      onClick={() => setDrawerOpen(!drawerOpen)}
-      data-testid="button-menu-drawer"
-    >
-      <div
-        className={classNames('w-[26px] h-[2px] transition-all', {
-          'translate-y-0 rotate-0 bg-white': !drawerOpen,
-          'bg-black': !drawerOpen && navbarTheme === 'yellow',
-          'translate-y-[7.5px] rotate-45 bg-black dark:bg-white': drawerOpen,
-        })}
-      />
-      <div
-        className={classNames('w-[26px] h-[2px] transition-all', {
-          'translate-y-0 rotate-0 bg-white': !drawerOpen,
-          'bg-black': !drawerOpen && navbarTheme === 'yellow',
-          '-translate-y-[7.5px] -rotate-45 bg-black dark:bg-white': drawerOpen,
-        })}
-      />
-    </button>
-  );
-
-  return (
-    <div className="flex overflow-hidden md:hidden" ref={setContainer}>
-      <Drawer
-        dataTestId="menu-drawer"
-        open={drawerOpen}
-        onChange={setDrawerOpen}
-        container={container}
-        trigger={menuButton}
-      >
-        <div className="border-l border-default px-4 py-2 gap-4 flex flex-col w-full h-full bg-white dark:bg-black dark:text-white justify-start">
-          <div className="w-full h-1"></div>
-          <div className="px-2 pt-10 w-full flex flex-col items-stretch">
-            <NetworkSwitcher />
-            <div className="w-full pt-8 h-1 border-b border-default"></div>
-          </div>
-          <LinkList
-            className="flex flex-col"
-            navbarTheme={navbarTheme}
-            dataTestId="mobile-navbar-links"
-            onNavigate={() => setDrawerOpen(false)}
-          />
-          <div className="flex flex-col px-2 justify-between">
-            <div className="w-full h-1 border-t border-default py-5"></div>
-            <ThemeSwitcher withMobile />
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  );
-};
-
-export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => {
-  const titleContent = (
-    <div className="hidden md:block">
-      <NetworkSwitcher />
-    </div>
-  );
-  return (
-    <Nav
-      navbarTheme={navbarTheme}
-      title={t('Console')}
-      titleContent={titleContent}
-      icon={
-        <Link to="/">
-          <Vega className="w-13" />
-        </Link>
+    <Navigation
+      appName="Console"
+      theme={theme}
+      actions={
+        <>
+          <ThemeSwitcher />
+          <VegaWalletConnectButton />
+        </>
       }
+      breakpoints={[500, 1050]}
     >
-      <LinkList className="hidden md:flex md:px-2" navbarTheme={navbarTheme} />
-      <div className="flex items-center gap-2 ml-auto overflow-hidden">
-        <VegaWalletConnectButton />
-        <ThemeSwitcher className="hidden md:block" />
-        <MobileMenuBar navbarTheme={navbarTheme} />
-      </div>
-    </Nav>
-  );
-};
-
-interface AppNavLinkProps {
-  name: string;
-  path: string;
-  navbarTheme: NavbarTheme;
-  testId?: string;
-  target?: HTMLAttributeAnchorTarget;
-  end?: boolean;
-  onClick?: () => void;
-}
-
-const AppNavLink = ({
-  name,
-  path,
-  navbarTheme,
-  target,
-  testId = name,
-  end,
-  onClick,
-}: AppNavLinkProps) => {
-  const borderClasses = classNames(
-    'absolute h-[2px] md:h-1 w-full bottom-[-1px] left-0',
-    {
-      'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
-      'bg-black dark:bg-vega-yellow md:dark:bg-black': navbarTheme === 'yellow',
-    }
-  );
-  return (
-    <NavLink
-      data-testid={testId}
-      to={{ pathname: path }}
-      className={getNavLinkClassNames(navbarTheme)}
-      onClick={onClick}
-      target={target}
-      end={end}
-    >
-      {({ isActive }) => {
-        return (
-          <>
-            {name}
-            {isActive && <span className={borderClasses} />}
-          </>
-        );
-      }}
-    </NavLink>
+      <NavigationList hide={[NavigationBreakpoint.Small]}>
+        <NavigationItem>
+          <NetworkSwitcher />
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
+      >
+        <NavigationItem>
+          <NavigationLink to={Links[Routes.MARKETS]()}>
+            {t('Markets')}
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to={tradingPath}>{t('Trading')}</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to={Links[Routes.PORTFOLIO]()}>
+            {t('Portfolio')}
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <ExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
+            <span className="flex items-center gap-2">
+              <span>{t('Governance')}</span>{' '}
+              <Icon name="arrow-top-right" size={3} />
+            </span>
+          </ExternalLink>
+        </NavigationItem>
+      </NavigationList>
+    </Navigation>
   );
 };

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -54,7 +54,7 @@ const MobileWalletButton = ({
     ? 'hidden'
     : isYellow
     ? 'fill-black'
-    : 'fill-white';
+    : 'fill-black dark:fill-white';
   const [container, setContainer] = useState<HTMLElement | null>(null);
 
   const walletButton = (

apps/trading/pages/_app.page.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
-import { Navbar } from '../components/navbar';
 import { t } from '@vegaprotocol/i18n';
 import {
   useEagerConnect as useVegaEagerConnect,
@@ -33,6 +32,7 @@ import { ViewingBanner } from '../components/viewing-banner';
 import { Banner } from '../components/banner';
 import classNames from 'classnames';
 import { AppLoader, DynamicLoader } from '../components/app-loader';
+import { Navbar } from '../components/navbar';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -83,9 +83,7 @@ function AppBody({ Component }: AppProps) {
       </Head>
       <Title />
       <div className={gridClasses}>
-        <Navbar
-          navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
-        />
+        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
         <Banner />
         <ViewingBanner />
         <main data-testid={location.pathname}>

libs/ui-toolkit/src/components/navigation/navigation.tsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames';
-import type { ComponentProps, ReactNode, RefObject } from 'react';
-import type { MutableRefObject } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import { useLayoutEffect } from 'react';
 import { createContext } from 'react';
 import { useContext } from 'react';
 import { useRef } from 'react';
 import { VegaLogo } from '../vega-logo';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import { useResizeObserver } from '@vegaprotocol/react-helpers';
 import { Icon } from '../icon';
 import { Drawer, DrawerContext, useDrawer } from '../drawer';
 import type { Link } from 'react-router-dom';
@@ -38,7 +37,8 @@ type NavigationProps = {
    * Size variants breakpoints
    */
   breakpoints?: [number, number];
-  onResize?: (width: number, ref: RefObject<HTMLElement>) => void;
+  fullWidth?: boolean;
+  onResize?: (width: number, navigationElement: HTMLElement) => void;
 };
 
 export enum NavigationBreakpoint {
@@ -310,6 +310,44 @@ export const NavigationContext = createContext<{
   theme: NavigationProps['theme'];
 }>({ theme: 'system' });
 
+const setSizeVariantClasses = (
+  breakpoints: [number, number],
+  currentWidth: number,
+  target: HTMLElement
+) => {
+  if (
+    currentWidth <= breakpoints[0] &&
+    !target.classList.contains(NavigationBreakpoint.Small)
+  ) {
+    target.classList.remove(
+      NavigationBreakpoint.Full,
+      NavigationBreakpoint.Narrow
+    );
+    target.classList.add(NavigationBreakpoint.Small);
+  }
+  if (
+    currentWidth > breakpoints[0] &&
+    currentWidth <= breakpoints[1] &&
+    !target.classList.contains(NavigationBreakpoint.Narrow)
+  ) {
+    target.classList.remove(
+      NavigationBreakpoint.Full,
+      NavigationBreakpoint.Small
+    );
+    target.classList.add(NavigationBreakpoint.Narrow);
+  }
+  if (
+    currentWidth > breakpoints[1] &&
+    !target.classList.contains(NavigationBreakpoint.Full)
+  ) {
+    target.classList.remove(
+      NavigationBreakpoint.Narrow,
+      NavigationBreakpoint.Small
+    );
+    target.classList.add(NavigationBreakpoint.Full);
+  }
+};
+
 export const Navigation = ({
   appName,
   homeLink = '/',
@@ -319,47 +357,28 @@ export const Navigation = ({
   breakpoints = [478, 1000],
   onResize,
 }: NavigationProps) => {
-  const navigationRef = useRef<HTMLElement>(
-    null
-  ) as MutableRefObject<HTMLElement>;
+  const navigationRef = useRef<HTMLElement>(null);
   const actionsRef = useRef<HTMLDivElement>(null);
-  useResizeObserver(navigationRef.current, (entries) => {
-    if (entries.length === 0 || !navigationRef.current) return;
 
-    const w = entries[0].borderBoxSize[0].inlineSize;
-    if (onResize) onResize(w, navigationRef);
-    if (
-      w <= breakpoints[0] &&
-      !navigationRef.current.classList.contains(NavigationBreakpoint.Small)
-    ) {
-      navigationRef.current.classList.remove(
-        NavigationBreakpoint.Full,
-        NavigationBreakpoint.Narrow
-      );
-      navigationRef.current.classList.add(NavigationBreakpoint.Small);
-    }
-    if (
-      w > breakpoints[0] &&
-      w <= breakpoints[1] &&
-      !navigationRef.current.classList.contains(NavigationBreakpoint.Narrow)
-    ) {
-      navigationRef.current.classList.remove(
-        NavigationBreakpoint.Full,
-        NavigationBreakpoint.Small
-      );
-      navigationRef.current.classList.add(NavigationBreakpoint.Narrow);
-    }
-    if (
-      w > breakpoints[1] &&
-      !navigationRef.current.classList.contains(NavigationBreakpoint.Full)
-    ) {
-      navigationRef.current.classList.remove(
-        NavigationBreakpoint.Narrow,
-        NavigationBreakpoint.Small
-      );
-      navigationRef.current.classList.add(NavigationBreakpoint.Full);
-    }
-  });
+  useLayoutEffect(() => {
+    if (!navigationRef.current) return;
+    const target = navigationRef.current;
+    const currentWidth = Math.min(
+      target.getBoundingClientRect().width,
+      window.innerWidth
+    );
+    setSizeVariantClasses(breakpoints, currentWidth, target);
+
+    const handler = () => {
+      const currentWidth = target.getBoundingClientRect().width;
+      setSizeVariantClasses(breakpoints, currentWidth, target);
+      onResize?.(currentWidth, target);
+    };
+    window.addEventListener('resize', handler);
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, [breakpoints, onResize]);
 
   const [drawerOpen, setDrawerOpen] = useDrawer((state) => [
     state.drawerOpen,
@@ -368,9 +387,13 @@ export const Navigation = ({
 
   const drawerTrigger = (
     <button
-      className={classNames('px-2', `group-[.nav-size-full]:hidden`, {
-        'z-20': drawerOpen,
-      })}
+      className={classNames(
+        'px-2',
+        `hidden group-[.nav-size-narrow]:block group-[.nav-size-small]:block`,
+        {
+          'z-[21]': drawerOpen,
+        }
+      )}
       onClick={() => {
         setDrawerOpen(!drawerOpen);
       }}
@@ -415,7 +438,7 @@ export const Navigation = ({
         className={classNames(
           'drawer-content',
           'border-l h-full relative overflow-auto',
-          'px-4 font-alpha',
+          'px-4 pb-8 font-alpha',
           // text
           {
             'text-vega-light-300 dark:text-vega-dark-300': theme === 'system',
@@ -442,7 +465,7 @@ export const Navigation = ({
           }px`,
         }}
       >
-        <div className="flex flex-col gap-2 pr-10">{children}</div>
+        <div className="flex flex-col gap-2 pr-10 text-lg">{children}</div>
       </div>
     </DrawerContext.Provider>
   );