From c4668dd3ad2c191b5a979200e9a3bb4d0ef73aa2 Mon Sep 17 00:00:00 2001
From: asiaznik <artur@vegaprotocol.io>
Date: Thu, 2 Mar 2023 19:02:46 +0100
Subject: [PATCH] feat(ui-toolkit, explorer): navigation

---
 apps/explorer/src/app/app.tsx                 |  56 +-
 .../src/app/components/footer/footer.tsx      |   2 +-
 .../src/app/components/header/header.spec.tsx |   6 +-
 .../src/app/components/header/header.tsx      | 113 ++--
 .../src/app/components/search/search.tsx      | 114 ++--
 .../explorer/src/app/routes/router-config.tsx |  29 +-
 apps/explorer/src/app/setup-tests.ts          |  10 +
 .../network-switcher/network-switcher.tsx     |  16 +-
 libs/tailwindcss-config/src/theme.js          |   1 +
 .../src/components/drawer/drawer.stories.tsx  |   2 +-
 .../src/components/drawer/drawer.tsx          |  18 +-
 .../dropdown-menu/dropdown-menu.tsx           |   2 +-
 libs/ui-toolkit/src/components/index.ts       |  15 +-
 .../components/input-error/input-error.tsx    |   3 +-
 .../src/components/navigation/index.ts        |   1 +
 .../navigation/navigation.stories.tsx         | 246 +++++++++
 .../src/components/navigation/navigation.tsx  | 491 ++++++++++++++++++
 .../src/components/theme-switcher/icons.tsx   |  12 +-
 .../src/components/vega-logo/vega-logo.tsx    |   9 +-
 package.json                                  |   1 +
 yarn.lock                                     |  21 +
 21 files changed, 1041 insertions(+), 127 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/navigation/index.ts
 create mode 100644 libs/ui-toolkit/src/components/navigation/navigation.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/navigation/navigation.tsx

diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 1f292caed..1e788bad9 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -1,6 +1,4 @@
-import classnames from 'classnames';
 import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
-import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
@@ -11,6 +9,7 @@ import {
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
+import classNames from 'classnames';
 
 const DialogsContainer = () => {
   const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
@@ -25,35 +24,42 @@ const DialogsContainer = () => {
   );
 };
 
-function App() {
-  const layoutClasses = classnames(
-    'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
-    'min-h-[100vh] mx-auto my-0',
-    'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
-    'bg-white dark:bg-black',
-    'antialiased text-black dark:text-white',
-    'overflow-hidden relative'
-  );
+const MainnetSimAd = () => (
+  <AnnouncementBanner>
+    <div className="font-alpha calt uppercase text-center text-lg text-white">
+      <span className="pr-4">Mainnet sim 2 is live!</span>
+      <ExternalLink href="https://fairground.wtf/">
+        Come help stress test the network
+      </ExternalLink>
+    </div>
+  </AnnouncementBanner>
+);
 
+function App() {
   return (
     <TendermintWebsocketProvider>
       <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
-        <AnnouncementBanner>
-          <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">Mainnet sim 2 is live!</span>
-            <ExternalLink href="https://fairground.wtf/">
-              Come help stress test the network
-            </ExternalLink>
+        <div
+          className={classNames(
+            'max-w-[1500px] min-h-[100vh]',
+            'mx-auto my-0',
+            'grid grid-rows-[auto_1fr_auto] grid-cols-1',
+            'border-vega-light-200 dark:border-vega-dark-200 lg:border-l lg:border-r',
+            'antialiased text-black dark:text-white',
+            'overflow-hidden relative'
+          )}
+        >
+          <div>
+            <MainnetSimAd />
+            <Header />
+          </div>
+          <div>
+            <Main />
+          </div>
+          <div>
+            <Footer />
           </div>
-        </AnnouncementBanner>
-
-        <div className={layoutClasses}>
-          <Header />
-          <Nav />
-          <Main />
-          <Footer />
         </div>
-
         <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
diff --git a/apps/explorer/src/app/components/footer/footer.tsx b/apps/explorer/src/app/components/footer/footer.tsx
index ce817c809..ab1b5e755 100644
--- a/apps/explorer/src/app/components/footer/footer.tsx
+++ b/apps/explorer/src/app/components/footer/footer.tsx
@@ -16,7 +16,7 @@ export const Footer = () => {
 
   return (
     <>
-      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
+      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
         <div className="flex justify-between gap-2 align-middle">
           {GIT_COMMIT_HASH && (
             <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
diff --git a/apps/explorer/src/app/components/header/header.spec.tsx b/apps/explorer/src/app/components/header/header.spec.tsx
index b6a1cb184..f640c7bde 100644
--- a/apps/explorer/src/app/components/header/header.spec.tsx
+++ b/apps/explorer/src/app/components/header/header.spec.tsx
@@ -19,12 +19,10 @@ const renderComponent = () => (
 );
 
 describe('Header', () => {
-  it('should render heading', () => {
+  it('should render navigation', () => {
     render(renderComponent());
 
-    expect(screen.getByTestId('explorer-header')).toHaveTextContent(
-      'Vega Explorer'
-    );
+    expect(screen.getByTestId('navigation')).toHaveTextContent('Explorer');
   });
   it('should render search', () => {
     render(renderComponent());
diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx
index 74d91e3c9..2723b7aeb 100644
--- a/apps/explorer/src/app/components/header/header.tsx
+++ b/apps/explorer/src/app/components/header/header.tsx
@@ -1,43 +1,90 @@
-import classnames from 'classnames';
-import { Link } from 'react-router-dom';
-import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
+import { matchPath, useLocation } from 'react-router-dom';
+import {
+  ThemeSwitcher,
+  Navigation,
+  NavigationList,
+  NavigationItem,
+  NavigationLink,
+  NavigationBreakpoint,
+  NavigationTrigger,
+  NavigationContent,
+} from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
-import { useNavStore } from '../nav';
+import type { Navigable } from '../../routes/router-config';
+import routerConfig from '../../routes/router-config';
+import { useMemo } from 'react';
+import compact from 'lodash/compact';
+import { Search } from '../search';
+
+const routeToNavigationItem = (r: Navigable) => (
+  <NavigationItem key={r.name}>
+    <NavigationLink to={r.path}>{r.text}</NavigationLink>
+  </NavigationItem>
+);
 
 export const Header = () => {
-  const [open, toggle] = useNavStore((state) => [state.open, state.toggle]);
-  const headerClasses = classnames(
-    'md:col-span-2',
-    'grid grid-rows-2 md:grid-rows-1 grid-cols-[1fr_auto] md:grid-cols-[auto_1fr_auto] items-center',
-    'p-4 gap-2 md:gap-4',
-    'border-b border-neutral-700 dark:border-neutral-300 bg-black',
-    'dark text-white'
+  const mainItems = compact(
+    [Routes.TX, Routes.BLOCKS, Routes.ORACLES, Routes.VALIDATORS].map((n) =>
+      routerConfig.find((r) => r.path === n)
+    )
   );
+
+  const groupedItems = compact(
+    [
+      Routes.PARTIES,
+      Routes.ASSETS,
+      Routes.MARKETS,
+      Routes.GOVERNANCE,
+      Routes.NETWORK_PARAMETERS,
+      Routes.GENESIS,
+    ].map((n) => routerConfig.find((r) => r.path === n))
+  );
+
+  const { pathname } = useLocation();
+  const isOnOther = useMemo(() => {
+    for (const path of groupedItems.map((r) => r.path)) {
+      const matched = matchPath(`${path}/*`, pathname);
+      if (matched) return true;
+    }
+    return false;
+  }, [groupedItems, pathname]);
+
   return (
-    <header className={headerClasses}>
-      <div className="flex h-full items-center sm:items-stretch gap-4">
-        <Link to={Routes.HOME}>
-          <h1
-            className="text-white text-3xl font-alpha uppercase calt mb-0"
-            data-testid="explorer-header"
-          >
-            {t('Vega Explorer')}
-          </h1>
-        </Link>
-        <NetworkSwitcher />
-      </div>
-      <button
-        data-testid="open-menu"
-        className="md:hidden text-white"
-        onClick={() => toggle()}
+    <Navigation
+      appName="Explorer"
+      theme="system"
+      breakpoints={[400, 800]}
+      actions={
+        <>
+          <ThemeSwitcher />
+          <Search />
+        </>
+      }
+    >
+      <NavigationList hide={[NavigationBreakpoint.Small]}>
+        <NavigationItem>
+          <NetworkSwitcher />
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Small, NavigationBreakpoint.Narrow]}
       >
-        <Icon name={open ? 'cross' : 'menu'} />
-      </button>
-      <Search />
-      <ThemeSwitcher className="-my-4" />
-    </header>
+        {mainItems.map(routeToNavigationItem)}
+        {groupedItems && (
+          <NavigationItem>
+            <NavigationTrigger isActive={Boolean(isOnOther)}>
+              {t('Other')}
+            </NavigationTrigger>
+            <NavigationContent>
+              <NavigationList>
+                {groupedItems.map(routeToNavigationItem)}
+              </NavigationList>
+            </NavigationContent>
+          </NavigationItem>
+        )}
+      </NavigationList>
+    </Navigation>
   );
 };
diff --git a/apps/explorer/src/app/components/search/search.tsx b/apps/explorer/src/app/components/search/search.tsx
index 34e20569c..36780e3c0 100644
--- a/apps/explorer/src/app/components/search/search.tsx
+++ b/apps/explorer/src/app/components/search/search.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
-import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import { Button, Icon, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { getSearchType, SearchTypes, toHex } from './detect-search';
 import { Routes } from '../../routes/route-names';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
 
 interface FormFields {
   search: string;
@@ -49,39 +51,91 @@ export const Search = () => {
     [navigate]
   );
 
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="w-full md:max-w-[620px] justify-self-end"
-    >
-      <label htmlFor="search" className="sr-only">
-        {t('Search by block number or transaction hash')}
-      </label>
-      <div className="flex items-stretch gap-2">
-        <div className="flex grow relative">
-          <Input
-            {...register('search')}
-            id="search"
-            data-testid="search"
-            className="text-white"
-            hasError={Boolean(error?.message)}
-            type="text"
-            placeholder={t(
-              'Enter block number, public key or transaction hash'
-            )}
-          />
-          {error?.message && (
-            <div className="bg-white border border-t-0 border-accent absolute top-[100%] flex-1 w-full pb-2 px-2 rounded-b text-black">
-              <InputError data-testid="search-error" intent="danger">
-                {error.message}
-              </InputError>
-            </div>
+  const searchForm = (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex relative items-stretch gap-2 text-xs">
+        <label htmlFor="search" className="sr-only">
+          {t('Search by block number or transaction hash')}
+        </label>
+        <button
+          className={classNames(
+            'absolute top-[50%] translate-y-[-50%] left-2',
+            'text-vega-light-300 dark:text-vega-dark-300'
           )}
-        </div>
-        <Button type="submit" size="sm" data-testid="search-button">
+        >
+          <Icon name="search" />
+        </button>
+        <Input
+          {...register('search')}
+          id="search"
+          data-testid="search"
+          className={classNames(
+            'peer',
+            'pl-8 py-2 text-xs',
+            'border rounded border-vega-light-200 dark:border-vega-dark-200'
+          )}
+          hasError={Boolean(error?.message)}
+          type="text"
+          placeholder={t('Enter block number, public key or transaction hash')}
+        />
+        {error?.message && (
+          <div
+            className={classNames(
+              'hidden peer-focus:block',
+              'bg-white dark:bg-black',
+              'border rounded-b border-t-0 border-vega-light-200 dark:border-vega-dark-200',
+              'absolute top-[100%] flex-1 w-full pb-2 px-2 text-black dark:text-white'
+            )}
+          >
+            <InputError
+              data-testid="search-error"
+              intent="danger"
+              className="text-xs"
+            >
+              {error.message}
+            </InputError>
+          </div>
+        )}
+        <Button
+          className="hidden [.search-dropdown_&]:block"
+          type="submit"
+          size="xs"
+          data-testid="search-button"
+        >
           {t('Search')}
         </Button>
       </div>
     </form>
   );
+
+  return (
+    <>
+      <div className="[.nav-size-narrow_&]:hidden [.nav-size-small_&]:hidden min-w-[290px]">
+        {searchForm}
+      </div>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <button className="mt-[-1px] text-vega-light-300 dark:text-vega-dark-300 data-open:text-black dark:data-open:text-white [.nav-size-full_&]:hidden">
+            <Icon name="search" size={4} />
+          </button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            className={classNames(
+              'search-dropdown',
+              'p-2 min-w-[290px] z-20',
+              'text-vega-light-300 dark:text-vega-dark-300',
+              'bg-white dark:bg-black',
+              'border rounded border-vega-light-200 dark:border-vega-dark-200',
+              'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]'
+            )}
+            align="end"
+            sideOffset={10}
+          >
+            {searchForm}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </>
+  );
 };
diff --git a/apps/explorer/src/app/routes/router-config.tsx b/apps/explorer/src/app/routes/router-config.tsx
index 772b60c64..f8a5b7e5d 100644
--- a/apps/explorer/src/app/routes/router-config.tsx
+++ b/apps/explorer/src/app/routes/router-config.tsx
@@ -23,14 +23,18 @@ import { NetworkParameters } from './network-parameters';
 import type { RouteObject } from 'react-router-dom';
 import { MarketPage, MarketsPage } from './markets';
 
-export type Navigable = { path: string; name: string; text: string };
+export type Navigable = {
+  path: string;
+  name: string;
+  text: string;
+};
 type Route = RouteObject & Navigable;
 
 const partiesRoutes: Route[] = flags.parties
   ? [
       {
         path: Routes.PARTIES,
-        name: 'Parties',
+        name: t('Parties'),
         text: t('Parties'),
         element: <Party />,
         children: [
@@ -52,7 +56,7 @@ const assetsRoutes: Route[] = flags.assets
       {
         path: Routes.ASSETS,
         text: t('Assets'),
-        name: 'Assets',
+        name: t('Assets'),
         children: [
           {
             index: true,
@@ -71,7 +75,7 @@ const genesisRoutes: Route[] = flags.genesis
   ? [
       {
         path: Routes.GENESIS,
-        name: 'Genesis',
+        name: t('Genesis'),
         text: t('Genesis Parameters'),
         element: <Genesis />,
       },
@@ -82,7 +86,7 @@ const governanceRoutes: Route[] = flags.governance
   ? [
       {
         path: Routes.GOVERNANCE,
-        name: 'Governance proposals',
+        name: t('Governance proposals'),
         text: t('Governance Proposals'),
         element: <Proposals />,
       },
@@ -93,7 +97,7 @@ const marketsRoutes: Route[] = flags.markets
   ? [
       {
         path: Routes.MARKETS,
-        name: 'Markets',
+        name: t('Markets'),
         text: t('Markets'),
         children: [
           {
@@ -113,17 +117,18 @@ const networkParametersRoutes: Route[] = flags.networkParameters
   ? [
       {
         path: Routes.NETWORK_PARAMETERS,
-        name: 'NetworkParameters',
+        name: t('NetworkParameters'),
         text: t('Network Parameters'),
         element: <NetworkParameters />,
       },
     ]
   : [];
+
 const validators: Route[] = flags.validators
   ? [
       {
         path: Routes.VALIDATORS,
-        name: 'Validators',
+        name: t('Validators'),
         text: t('Validators'),
         element: <ValidatorsPage />,
       },
@@ -133,14 +138,14 @@ const validators: Route[] = flags.validators
 const routerConfig: Route[] = [
   {
     path: Routes.HOME,
-    name: 'Home',
+    name: t('Home'),
     text: t('Home'),
     element: <Home />,
     index: true,
   },
   {
     path: Routes.TX,
-    name: 'Txs',
+    name: t('Txs'),
     text: t('Transactions'),
     element: <Txs />,
     children: [
@@ -160,7 +165,7 @@ const routerConfig: Route[] = [
   },
   {
     path: Routes.BLOCKS,
-    name: 'Blocks',
+    name: t('Blocks'),
     text: t('Blocks'),
     element: <BlockPage />,
     children: [
@@ -176,7 +181,7 @@ const routerConfig: Route[] = [
   },
   {
     path: Routes.ORACLES,
-    name: 'Oracles',
+    name: t('Oracles'),
     text: t('Oracles'),
     element: <OraclePage />,
     children: [
diff --git a/apps/explorer/src/app/setup-tests.ts b/apps/explorer/src/app/setup-tests.ts
index 8f2609b7b..25ebbd3be 100644
--- a/apps/explorer/src/app/setup-tests.ts
+++ b/apps/explorer/src/app/setup-tests.ts
@@ -3,3 +3,13 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: false,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+});
diff --git a/libs/environment/src/components/network-switcher/network-switcher.tsx b/libs/environment/src/components/network-switcher/network-switcher.tsx
index 8effd6489..b3b51fbe6 100644
--- a/libs/environment/src/components/network-switcher/network-switcher.tsx
+++ b/libs/environment/src/components/network-switcher/network-switcher.tsx
@@ -80,7 +80,13 @@ const NetworkLabel = ({
   </span>
 );
 
-export const NetworkSwitcher = () => {
+type NetworkSwitcherProps = {
+  /**
+   * The current network identifier, defaults to the `VEGA_ENV` if unset.
+   */
+  currentNetwork?: Networks;
+};
+export const NetworkSwitcher = ({ currentNetwork }: NetworkSwitcherProps) => {
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const tokenLink = useLinks(DApp.Token);
   const [isOpen, setOpen] = useState(false);
@@ -97,6 +103,8 @@ export const NetworkSwitcher = () => {
   );
   const menuRef = useRef<HTMLButtonElement | null>(null);
 
+  const current = currentNetwork || VEGA_ENV;
+
   return (
     <DropdownMenu
       open={isOpen}
@@ -106,7 +114,7 @@ export const NetworkSwitcher = () => {
           ref={menuRef}
           className="flex justify-between items-center"
         >
-          {envTriggerMapping[VEGA_ENV]}
+          {envTriggerMapping[current]}
         </DropdownMenuTrigger>
       }
     >
@@ -125,7 +133,7 @@ export const NetworkSwitcher = () => {
                 <a href={VEGA_NETWORKS[key]}>
                   {envNameMapping[key]}
                   <NetworkLabel
-                    isCurrent={VEGA_ENV === key}
+                    isCurrent={current === key}
                     isAvailable={!!VEGA_NETWORKS[key]}
                   />
                 </a>
@@ -150,7 +158,7 @@ export const NetworkSwitcher = () => {
                 <div className="mr-4">
                   <Link href={VEGA_NETWORKS[key]}>{envNameMapping[key]}</Link>
                   <NetworkLabel
-                    isCurrent={VEGA_ENV === key}
+                    isCurrent={current === key}
                     isAvailable={!!VEGA_NETWORKS[key]}
                   />
                 </div>
diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 245a551f1..307c4f2f3 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -165,5 +165,6 @@ module.exports = {
   },
   data: {
     selected: 'state~="checked"',
+    open: 'state~="open"',
   },
 };
diff --git a/libs/ui-toolkit/src/components/drawer/drawer.stories.tsx b/libs/ui-toolkit/src/components/drawer/drawer.stories.tsx
index 70fd8c12e..b691f8629 100644
--- a/libs/ui-toolkit/src/components/drawer/drawer.stories.tsx
+++ b/libs/ui-toolkit/src/components/drawer/drawer.stories.tsx
@@ -31,7 +31,7 @@ export const Default = Template.bind({});
 Default.args = {
   open: false,
   children: (
-    <p className="h-full bg-black dark:bg-white text-white dark:text-black">
+    <p className="h-full bg-white dark:bg-black text-black dark:text-white">
       Some content
     </p>
   ),
diff --git a/libs/ui-toolkit/src/components/drawer/drawer.tsx b/libs/ui-toolkit/src/components/drawer/drawer.tsx
index 57176197e..d294e677a 100644
--- a/libs/ui-toolkit/src/components/drawer/drawer.tsx
+++ b/libs/ui-toolkit/src/components/drawer/drawer.tsx
@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
+import { createContext } from 'react';
 import classNames from 'classnames';
 import * as DialogPrimitives from '@radix-ui/react-dialog';
 import { Icon } from '../icon';
+import { create } from 'zustand';
 
 interface DrawerProps {
   children: ReactNode;
@@ -15,6 +17,19 @@ interface DrawerProps {
   trigger?: ReactNode;
 }
 
+export const DrawerContext = createContext<true | undefined>(undefined);
+
+type DrawerStore = {
+  drawerOpen: boolean;
+  setDrawerOpen: (isOpen: boolean) => void;
+};
+export const useDrawer = create<DrawerStore>((set) => ({
+  drawerOpen: false,
+  setDrawerOpen: (isOpen) => {
+    set({ drawerOpen: isOpen });
+  },
+}));
+
 export function Drawer({
   children,
   open,
@@ -27,11 +42,12 @@ export function Drawer({
   trigger,
 }: DrawerProps) {
   const contentClasses = classNames(
+    'group/drawer',
     'h-full max-w-[500px] w-[90vw] z-10 top-0 right-0 fixed transition-transform',
     className,
     {
       'translate-x-[100%]': !open,
-      'translate-x-0 z-40': open,
+      'translate-x-0 z-20': open,
     }
   );
 
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
index 88ff553a9..13379bac5 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@@ -73,7 +73,7 @@ export const DropdownMenuContent = forwardRef<
   <DropdownMenuPrimitive.Content
     {...contentProps}
     ref={forwardedRef}
-    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded text-black"
+    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded z-20"
     align="start"
     sideOffset={10}
   />
diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts
index abfd9d66d..4cb56fa2b 100644
--- a/libs/ui-toolkit/src/components/index.ts
+++ b/libs/ui-toolkit/src/components/index.ts
@@ -1,8 +1,8 @@
 export * from './accordion';
+export * from './announcement-banner';
 export * from './arrows';
 export * from './async-renderer';
 export * from './background-video';
-export * from './announcement-banner';
 export * from './button';
 export * from './callout';
 export * from './checkbox';
@@ -19,12 +19,16 @@ export * from './key-value-table';
 export * from './link';
 export * from './loader';
 export * from './lozenge';
-export * from './nav';
+export * from './maintenance-page';
 export * from './nav-dropdown';
+export * from './nav';
+export * from './navigation';
+export * from './notification';
 export * from './popover';
 export * from './progress-bar';
 export * from './radio-group';
 export * from './resizable-grid';
+export * from './rounded-wrapper';
 export * from './select';
 export * from './simple-grid';
 export * from './slider';
@@ -35,13 +39,10 @@ export * from './tabs';
 export * from './text-area';
 export * from './theme-switcher';
 export * from './thumbs';
+export * from './toast';
 export * from './toggle';
 export * from './tooltip';
+export * from './traffic-light';
 export * from './vega-icons';
 export * from './vega-logo';
 export * from './viewing-as-user';
-export * from './traffic-light';
-export * from './toast';
-export * from './notification';
-export * from './rounded-wrapper';
-export * from './maintenance-page';
diff --git a/libs/ui-toolkit/src/components/input-error/input-error.tsx b/libs/ui-toolkit/src/components/input-error/input-error.tsx
index 586c885f3..b79429645 100644
--- a/libs/ui-toolkit/src/components/input-error/input-error.tsx
+++ b/libs/ui-toolkit/src/components/input-error/input-error.tsx
@@ -13,6 +13,7 @@ export const InputError = ({
   children,
   forInput,
   testId,
+  className,
   ...props
 }: InputErrorProps) => {
   const effectiveClassName = classNames(
@@ -31,7 +32,7 @@ export const InputError = ({
     <div
       data-testid={testId || 'input-error-text'}
       aria-describedby={forInput}
-      className={effectiveClassName}
+      className={classNames(effectiveClassName, className)}
       {...props}
       role="alert"
     >
diff --git a/libs/ui-toolkit/src/components/navigation/index.ts b/libs/ui-toolkit/src/components/navigation/index.ts
new file mode 100644
index 000000000..701e50504
--- /dev/null
+++ b/libs/ui-toolkit/src/components/navigation/index.ts
@@ -0,0 +1 @@
+export * from './navigation';
diff --git a/libs/ui-toolkit/src/components/navigation/navigation.stories.tsx b/libs/ui-toolkit/src/components/navigation/navigation.stories.tsx
new file mode 100644
index 000000000..dd874d699
--- /dev/null
+++ b/libs/ui-toolkit/src/components/navigation/navigation.stories.tsx
@@ -0,0 +1,246 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { MemoryRouter, Route, Routes, useMatch } from 'react-router-dom';
+import { Button, ExternalLink, Icon, ThemeSwitcher } from '..';
+import {
+  Navigation,
+  NavigationBreakpoint,
+  NavigationContent,
+  NavigationItem,
+  NavigationLink,
+  NavigationList,
+  NavigationTrigger,
+} from './navigation';
+
+export default {
+  title: 'Navigation',
+  component: Navigation,
+} as ComponentMeta<typeof Navigation>;
+
+const Template: ComponentStory<typeof Navigation> = ({
+  children,
+  ...props
+}) => {
+  const nav = <Navigation {...props}>{children}</Navigation>;
+  return (
+    <MemoryRouter>
+      <div className="h-[300px]">
+        {nav}
+        <div className="mt-2">
+          <Routes>
+            <Route path="transactions" element={<h1>Transactions</h1>} />
+            <Route path="blocks" element={<h1>Blocks</h1>} />
+            <Route path="markets/all" element={<h1>All markets</h1>} />
+          </Routes>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
+            pariatur a nemo quos sed! Voluptas itaque voluptate dolores minima.
+            Iste laudantium perspiciatis accusamus facere eius repudiandae sit
+            odio saepe nisi.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea facere
+            ab at incidunt numquam nemo natus eos iure, iste tenetur illo
+            dolores, commodi magni quam dolor totam quae velit eaque.
+          </p>
+          <p>
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat
+            minus perspiciatis quas temporibus odit? Enim ipsam nisi amet
+            molestias magnam esse blanditiis aperiam sapiente quaerat. Veniam
+            unde magnam exercitationem distinctio.
+          </p>
+        </div>
+      </div>
+    </MemoryRouter>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  appName: '',
+};
+
+const ExplorerNav = () => {
+  const isOnMarkets = useMatch('markets/*');
+
+  return (
+    <>
+      <NavigationList>
+        <NavigationItem hide={[NavigationBreakpoint.Small]}>
+          {/* <NetworkSwitcher currentNetwork={Networks.CUSTOM} /> */}
+          <Button size="xs">Network Switcher</Button>
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
+      >
+        <NavigationItem>
+          <NavigationLink to="transactions">Transactions</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="blocks">Blocks</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationTrigger isActive={Boolean(isOnMarkets)}>
+            Markets
+          </NavigationTrigger>
+          <NavigationContent>
+            <NavigationList>
+              <NavigationItem>
+                <NavigationLink to="markets/all">All markets</NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="markets/proposed">
+                  Proposed markets
+                </NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="markets/failed">
+                  Failed markets
+                </NavigationLink>
+              </NavigationItem>
+            </NavigationList>
+          </NavigationContent>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="validators">Validators</NavigationLink>
+        </NavigationItem>
+      </NavigationList>
+    </>
+  );
+};
+
+export const Explorer = Template.bind({});
+Explorer.args = {
+  appName: 'Explorer',
+  theme: 'system',
+  children: <ExplorerNav />,
+  actions: (
+    <>
+      <ThemeSwitcher />
+      {/* JUST A PLACEHOLDER */}
+      <div className="border rounded px-2 py-1 text-xs font-alpha w-60 flex items-center gap-1">
+        <Icon
+          name="search"
+          size={3}
+          className="text-vega-light-200 dark:text-vega-dark-200"
+        />
+        <input
+          className="w-full bg-transparent outline-none"
+          placeholder="Enter block number or transaction hash"
+        />
+      </div>
+    </>
+  ),
+};
+
+const ConsoleNav = () => {
+  return (
+    <>
+      <NavigationList>
+        <NavigationItem>
+          <Button size="xs">Network Switcher</Button>
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
+      >
+        <NavigationItem>
+          <NavigationLink to="markets">Markets</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="trading">Trading</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="portfolio">Portfolio</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <ExternalLink>
+            <span className="flex items-center gap-2">
+              <span>Governance</span> <Icon name="arrow-top-right" size={3} />
+            </span>
+          </ExternalLink>
+        </NavigationItem>
+      </NavigationList>
+    </>
+  );
+};
+
+export const Console = Template.bind({});
+Console.args = {
+  appName: 'Console',
+  theme: 'system',
+  children: <ConsoleNav />,
+  breakpoints: [478, 770],
+  actions: <ThemeSwitcher />,
+};
+
+const GovernanceNav = () => {
+  const isOnToken = useMatch('token/*');
+  return (
+    <>
+      <NavigationList>
+        <NavigationItem hide={[NavigationBreakpoint.Small]}>
+          <Button size="xs">Network Switcher</Button>
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
+      >
+        <NavigationItem>
+          <NavigationLink to="proposals">Proposals</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="validators">Validators</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink to="rewards">Rewards</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationTrigger isActive={Boolean(isOnToken)}>
+            Token
+          </NavigationTrigger>
+          <NavigationContent>
+            <NavigationList>
+              <NavigationItem>
+                <NavigationLink to="token/index">Token</NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="token/tranches">
+                  Supply & Vesting
+                </NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="token/withdraw">Withdraw</NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="token/redeem">Redeem</NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="token/associate">Associate</NavigationLink>
+              </NavigationItem>
+              <NavigationItem>
+                <NavigationLink to="token/disassociate">
+                  Disassociate
+                </NavigationLink>
+              </NavigationItem>
+            </NavigationList>
+          </NavigationContent>
+        </NavigationItem>
+      </NavigationList>
+    </>
+  );
+};
+
+export const Governance = Template.bind({});
+Governance.args = {
+  appName: 'Governance',
+  theme: 'dark',
+  children: <GovernanceNav />,
+  actions: (
+    <Button size="sm">
+      <span className="flex items-center gap-2">
+        <span>Connect</span> <Icon name="arrow-right" size={3} />
+      </span>
+    </Button>
+  ),
+};
diff --git a/libs/ui-toolkit/src/components/navigation/navigation.tsx b/libs/ui-toolkit/src/components/navigation/navigation.tsx
new file mode 100644
index 000000000..93c3cfc37
--- /dev/null
+++ b/libs/ui-toolkit/src/components/navigation/navigation.tsx
@@ -0,0 +1,491 @@
+import classNames from 'classnames';
+import type { ComponentProps, ReactNode } 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';
+import { NavLink } from 'react-router-dom';
+
+type NavigationProps = {
+  /**
+   * The display name of the dApp, e.g. "Console", "Explorer"
+   */
+  appName: string;
+  /**
+   * URL pointing to the home page.
+   */
+  homeLink?: string;
+  /**
+   * The theme of the navigation.
+   * @default "system"
+   */
+  theme: 'system' | 'light' | 'dark' | 'yellow';
+  /**
+   * The navigation items (links, buttons, dropdowns, etc.)
+   */
+  children?: ReactNode;
+  /**
+   * The navigation actions (e.g. theme switcher, wallet connector)
+   */
+  actions?: ReactNode;
+  /**
+   * Size variants breakpoints
+   */
+  breakpoints?: [number, number];
+};
+
+export enum NavigationBreakpoint {
+  /**
+   * Full width navigation
+   * `width > breakpoints[1]`
+   */
+  Full = 'nav-size-full',
+  /**
+   * Narrow variant
+   * `width > breakpoints[0] && width <= breakpoints[1]`
+   */
+  Narrow = 'nav-size-narrow',
+  /**
+   * Small variant
+   * `width <= breakpoints[0]`
+   */
+  Small = 'nav-size-small',
+}
+type NavigationElementProps = {
+  hide?: NavigationBreakpoint[];
+  hideInDrawer?: boolean;
+};
+
+const determineIfHidden = ({ hide, hideInDrawer }: NavigationElementProps) => [
+  {
+    '[.nav-size-full_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Full
+    ),
+    '[.nav-size-narrow_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Narrow
+    ),
+    '[.nav-size-small_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Small
+    ),
+    '[.drawer-content_&]:hidden': hideInDrawer,
+  },
+];
+
+const Logo = ({
+  appName,
+  homeLink,
+}: Pick<NavigationProps, 'theme' | 'appName' | 'homeLink'>) => {
+  const theme = useContext(NavigationThemeContext);
+  return (
+    <div className="flex h-full gap-4 items-center">
+      {homeLink ? (
+        <NavLink to={homeLink}>
+          <VegaLogo className="h-4 group-[.nav-size-small]:h-3" />
+        </NavLink>
+      ) : (
+        <VegaLogo className="h-4 group-[.nav-size-small]:h-3" />
+      )}
+
+      {appName && (
+        <span
+          data-testid="nav-app-name"
+          className={classNames(
+            'group-[.nav-size-small]:text-sm',
+            'font-alpha calt lowercase text-xl tracking-[1px] whitespace-nowrap leading-1',
+            'border-l pl-4',
+            {
+              'border-l-vega-light-200 dark:border-l-vega-dark-200':
+                theme === 'system',
+              'border-l-vega-light-200': theme === 'light',
+              'border-l-vega-dark-200': theme === 'dark' || theme === 'yellow',
+            }
+          )}
+        >
+          {appName}
+        </span>
+      )}
+    </div>
+  );
+};
+
+const Spacer = () => <div className="w-full" aria-hidden="true"></div>;
+
+export const NavigationItem = ({
+  children,
+  className,
+  hide,
+  hideInDrawer,
+  ...props
+}: ComponentProps<typeof NavigationMenu.Item> & NavigationElementProps) => {
+  const insideDrawer = useContext(DrawerContext);
+  return (
+    <NavigationMenu.Item
+      className={classNames(
+        !insideDrawer && ['h-12 [.navigation-content_&]:h-8 flex items-center'],
+        determineIfHidden({ hide, hideInDrawer }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </NavigationMenu.Item>
+  );
+};
+export const NavigationList = ({
+  children,
+  className,
+  hide,
+  hideInDrawer,
+  ...props
+}: ComponentProps<typeof NavigationMenu.List> & NavigationElementProps) => (
+  <NavigationMenu.List
+    className={classNames(
+      'flex gap-4 items-center',
+      '[.navigation-content_&]:flex-col [.navigation-content_&]:items-start [.navigation-content_&]:gap-2',
+      '[.drawer-content_&]:flex-col [.drawer-content_&]:items-start [.drawer-content_&]:gap-2 [.drawer-content_&]:mt-2',
+      determineIfHidden({ hide, hideInDrawer }),
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </NavigationMenu.List>
+);
+export const NavigationTrigger = ({
+  children,
+  className,
+  isActive = false,
+  hide,
+  hideInDrawer,
+  ...props
+}: ComponentProps<typeof NavigationMenu.Trigger> & {
+  isActive?: boolean;
+} & NavigationElementProps) => {
+  const theme = useContext(NavigationThemeContext);
+  return (
+    <NavigationMenu.Trigger
+      className={classNames(
+        'h-12 [.drawer-content_&]:h-min flex items-center relative gap-2',
+        {
+          'text-black dark:text-white': isActive && theme === 'system',
+          'text-black': isActive && theme === 'light',
+          'text-white': isActive && theme === 'dark',
+          'text-black [.navigation-content_&]:text-white [.drawer-content_&]:text-white':
+            isActive && theme === 'yellow',
+        },
+        determineIfHidden({ hide, hideInDrawer }),
+        className
+      )}
+      onPointerMove={(e) => e.preventDefault()} // disables hover
+      onPointerLeave={(e) => e.preventDefault()} // disables hover
+      {...props}
+    >
+      <span>{children}</span>
+      <span className="rotate-90 group-data-open/drawer:hidden">
+        <Icon name="arrow-right" size={3} />
+      </span>
+      <div
+        aria-hidden="true"
+        className={classNames(
+          'absolute bottom-0 left-0 w-full h-[2px] [.navigation-content_&]:hidden [.drawer-content_&]:hidden',
+          { hidden: !isActive },
+          {
+            'bg-vega-yellow-550 dark:bg-vega-yellow-500': theme === 'system',
+            'bg-vega-yellow-550': theme === 'light',
+            'bg-vega-yellow-500': theme === 'dark',
+            'bg-black': theme === 'yellow',
+          }
+        )}
+      ></div>
+    </NavigationMenu.Trigger>
+  );
+};
+export const NavigationContent = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenu.Content>) => {
+  const theme = useContext(NavigationThemeContext);
+  const insideDrawer = useContext(DrawerContext);
+
+  const content = (
+    <NavigationMenu.Content
+      onPointerLeave={(e) => e.preventDefault()} // disables hover
+      asChild
+      {...props}
+    >
+      <div
+        className={classNames(
+          'navigation-content',
+          'absolute z-20 top-12 w-max',
+          'p-2 mt-1',
+          'text-vega-light-300 dark:text-vega-dark-300',
+
+          'border rounded border-vega-light-200 dark:border-vega-dark-200',
+          'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]',
+          {
+            'bg-white dark:bg-black': theme === 'system',
+            'bg-white': theme === 'light',
+            'bg-black': theme === 'dark' || theme === 'yellow',
+          }
+        )}
+      >
+        {children}
+      </div>
+    </NavigationMenu.Content>
+  );
+
+  const list = (
+    <div className={classNames('navigation-content', 'border-none pl-4')}>
+      {children}
+    </div>
+  );
+
+  return insideDrawer ? list : content;
+};
+
+export const NavigationLink = ({
+  children,
+  to,
+  ...props
+}: ComponentProps<typeof Link>) => {
+  const theme = useContext(NavigationThemeContext);
+  const setDrawerOpen = useDrawer((state) => state.setDrawerOpen);
+  return (
+    <NavigationMenu.Link
+      asChild
+      onClick={() => {
+        setDrawerOpen(false);
+      }}
+    >
+      <NavLink
+        to={to}
+        className={classNames(
+          'h-12 [.navigation-content_&]:h-min [.drawer-content_&]:h-min flex items-center relative'
+        )}
+        {...props}
+      >
+        {({ isActive }) => (
+          <>
+            <span
+              className={classNames({
+                'text-black dark:text-white': isActive && theme === 'system',
+                'text-black': isActive && theme === 'light',
+                'text-white': isActive && theme === 'dark',
+                'text-black [.navigation-content_&]:text-white [.drawer-content_&]:text-white':
+                  isActive && theme === 'yellow',
+              })}
+            >
+              {children}
+            </span>
+            <div
+              aria-hidden="true"
+              className={classNames(
+                'absolute bottom-0 left-0 w-full h-[2px] [.navigation-content_&]:hidden [.drawer-content_&]:hidden',
+                { hidden: !isActive },
+                {
+                  'bg-vega-yellow-550 dark:bg-vega-yellow-500':
+                    theme === 'system',
+                  'bg-vega-yellow-550': theme === 'light',
+                  'bg-vega-yellow-500': theme === 'dark',
+                  'bg-black': theme === 'yellow',
+                }
+              )}
+            ></div>
+          </>
+        )}
+      </NavLink>
+    </NavigationMenu.Link>
+  );
+};
+
+const NavigationThemeContext =
+  createContext<NavigationProps['theme']>('system');
+
+export const Navigation = ({
+  appName,
+  homeLink = '/',
+  children,
+  actions,
+  theme = 'system',
+  breakpoints = [478, 1000],
+}: NavigationProps) => {
+  const navigationRef = useRef<HTMLElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  useResizeObserver(navigationRef.current, (entries) => {
+    if (entries.length === 0 && !navigationRef.current) return;
+
+    const width = entries[0].borderBoxSize[0].inlineSize;
+    navigationRef.current?.classList.remove(
+      NavigationBreakpoint.Full,
+      NavigationBreakpoint.Narrow,
+      NavigationBreakpoint.Small
+    );
+
+    if (width <= breakpoints[0]) {
+      navigationRef.current?.classList.add(NavigationBreakpoint.Small);
+    }
+    if (width > breakpoints[0] && width <= breakpoints[1]) {
+      navigationRef.current?.classList.add(NavigationBreakpoint.Narrow);
+    }
+    if (width > breakpoints[1]) {
+      navigationRef.current?.classList.add(NavigationBreakpoint.Full);
+    }
+  });
+
+  const [drawerOpen, setDrawerOpen] = useDrawer((state) => [
+    state.drawerOpen,
+    state.setDrawerOpen,
+  ]);
+
+  const drawerTrigger = (
+    <button
+      className={classNames('px-2', `group-[.nav-size-full]:hidden`, {
+        'z-20': drawerOpen,
+      })}
+      onClick={() => {
+        setDrawerOpen(!drawerOpen);
+      }}
+    >
+      <svg
+        className={classNames('stroke-[1px] transition-transform', {
+          'stroke-black dark:stroke-white': theme === 'system',
+          'stroke-black': theme === 'light' || theme === 'yellow',
+          'stroke-white':
+            theme === 'dark' || (drawerOpen && theme === 'yellow'),
+        })}
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <line
+          x1={0.5}
+          x2={15.5}
+          y1={3.5}
+          y2={3.5}
+          className={classNames('transition-transform duration-75', {
+            'rotate-45 translate-y-[4px] origin-[8px_3.5px]': drawerOpen,
+          })}
+        />
+        <line
+          x1={0.5}
+          x2={15.5}
+          y1={11.5}
+          y2={11.5}
+          className={classNames('transition-transform duration-75', {
+            'rotate-[-45deg] translate-y-[-4px] origin-[8px_11.5px]':
+              drawerOpen,
+          })}
+        />
+      </svg>
+    </button>
+  );
+
+  const drawerContent = (
+    <DrawerContext.Provider value={true}>
+      <div
+        className={classNames(
+          'drawer-content',
+          'border-l h-full relative overflow-auto',
+          'px-4 font-alpha',
+          // text
+          {
+            'text-vega-light-300 dark:text-vega-dark-300': theme === 'system',
+            'text-vega-light-300': theme === 'light',
+            'text-vega-dark-300': theme === 'dark' || theme === 'yellow',
+          },
+          // border
+          {
+            'border-l-vega-light-200 dark:border-l-vega-dark-200':
+              theme === 'system',
+            'border-l-vega-light-200': theme === 'light',
+            'border-l-vega-dark-200': theme === 'dark' || theme === 'yellow',
+          },
+          // background
+          {
+            'bg-white dark:bg-black': theme === 'system',
+            'bg-white': theme === 'light',
+            'bg-black': theme === 'dark' || theme === 'yellow',
+          }
+        )}
+        style={{
+          paddingTop: `${
+            navigationRef.current?.getBoundingClientRect().bottom
+          }px`,
+        }}
+      >
+        <div className="flex flex-col gap-2 pr-10">{children}</div>
+      </div>
+    </DrawerContext.Provider>
+  );
+
+  return (
+    <NavigationThemeContext.Provider value={theme}>
+      <NavigationMenu.Root
+        ref={navigationRef}
+        className={classNames(
+          'h-12',
+          'group flex gap-4 items-center',
+          'border-b px-3 relative',
+          // text
+          {
+            'text-black dark:text-white': theme === 'system',
+            'text-black': theme === 'light' || theme === 'yellow',
+            'text-white': theme === 'dark',
+          },
+          // border
+          {
+            'border-b-vega-light-200 dark:border-b-vega-dark-200':
+              theme === 'system',
+            'border-b-vega-light-200': theme === 'light',
+            'border-b-vega-dark-200': theme === 'dark',
+            'border-b-black': theme === 'yellow',
+          },
+          // background
+          {
+            'bg-white dark:bg-black': theme === 'system',
+            'bg-white': theme === 'light',
+            'bg-black': theme === 'dark',
+            'bg-vega-yellow-500': theme === 'yellow',
+          }
+        )}
+        data-testid="navigation"
+      >
+        <Logo appName={appName} theme={theme} homeLink={homeLink} />
+        <div
+          className={classNames(
+            'navbar',
+            'flex gap-4 h-12 items-center font-alpha text-lg calt',
+            {
+              'text-vega-light-300 dark:text-vega-dark-300': theme === 'system',
+              'text-vega-light-300': theme === 'light',
+              'text-vega-dark-300': theme === 'dark',
+              'text-vega-dark-200': theme === 'yellow',
+            }
+          )}
+        >
+          {children}
+        </div>
+        <Spacer />
+        {(actions || children) && (
+          <div ref={actionsRef} className="flex gap-2 items-center">
+            {actions}
+            <Drawer
+              open={drawerOpen}
+              onChange={setDrawerOpen}
+              trigger={drawerTrigger}
+              container={actionsRef.current}
+            >
+              {drawerContent}
+            </Drawer>
+          </div>
+        )}
+      </NavigationMenu.Root>
+    </NavigationThemeContext.Provider>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/theme-switcher/icons.tsx b/libs/ui-toolkit/src/components/theme-switcher/icons.tsx
index 88ad0d3ce..481b506aa 100644
--- a/libs/ui-toolkit/src/components/theme-switcher/icons.tsx
+++ b/libs/ui-toolkit/src/components/theme-switcher/icons.tsx
@@ -1,5 +1,9 @@
-export const SunIcon = () => (
-  <svg viewBox="0 0 45 45" className="w-8 h-8">
+type IconProps = {
+  className?: string;
+};
+
+export const SunIcon = ({ className }: IconProps) => (
+  <svg viewBox="0 0 45 45" className={className || 'w-8 h-8'}>
     <path
       d="M22.5 27.79a5.29 5.29 0 1 0 0-10.58 5.29 5.29 0 0 0 0 10.58Z"
       fill="currentColor"
@@ -13,8 +17,8 @@ export const SunIcon = () => (
   </svg>
 );
 
-export const MoonIcon = () => (
-  <svg viewBox="0 0 45 45" className="w-8 h-8">
+export const MoonIcon = ({ className }: IconProps) => (
+  <svg viewBox="0 0 45 45" className={className || 'w-8 h-8'}>
     <path
       d="M28.75 11.69A12.39 12.39 0 0 0 22.5 10a12.5 12.5 0 1 0 0 25c2.196 0 4.353-.583 6.25-1.69A12.46 12.46 0 0 0 35 22.5a12.46 12.46 0 0 0-6.25-10.81Zm-6.25 22a11.21 11.21 0 0 1-11.2-11.2 11.21 11.21 0 0 1 11.2-11.2c1.246 0 2.484.209 3.66.62a13.861 13.861 0 0 0-5 10.58 13.861 13.861 0 0 0 5 10.58 11.078 11.078 0 0 1-3.66.63v-.01Z"
       fill="currentColor"
diff --git a/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx b/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
index 73ce63c4a..155f9ebc0 100644
--- a/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
+++ b/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
@@ -1,13 +1,16 @@
 import { t } from '@vegaprotocol/i18n';
 
-export const VegaLogo = () => {
+type VegaLogoProps = {
+  className?: string;
+};
+export const VegaLogo = ({ className }: VegaLogoProps) => {
   return (
     <svg
       aria-label={t('Vega logo')}
-      width="111"
-      height="24"
+      className={className || 'h-6'}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 111 24"
     >
       <path
         fill="currentColor"
diff --git a/package.json b/package.json
index 1970de9d3..df7a411df 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-icons": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-select": "^1.2.0",
diff --git a/yarn.lock b/yarn.lock
index 4f024327d..67eeaefba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4222,6 +4222,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-navigation-menu@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.1.tgz#84f24d90e6448a0c83d3431c6eefbea73dc7522e"
+  integrity sha512-Khgf+LwqYfUpbFAHcFPDMj6ZrWxnwCgC96liLYwE48x9YJbXGlutOWzZaSzrgl82xS+PwoPLQunfDe/i4ZITRA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.2"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-visually-hidden" "1.0.1"
+
 "@radix-ui/react-popover@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.3.tgz#65ae2ee1fca2d7fd750308549eb8e0857c6160fe"