feat(2036): add markets to the navbar (#2402)

* feat: add markets to the navbar

* feat: add markets to the navbar - adjust failing int test

apps/trading-e2e/src/integration/global.cy.ts

@@ -130,3 +130,33 @@ describe('ethereum wallet', { tags: '@smoke' }, () => {
     cy.getByTestId(connectEthWalletBtn).should('exist');
   });
 });
+
+describe('Navbar', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockGQLSubscription();
+    cy.visit('/');
+    cy.getByTestId('dialog-close').click();
+  });
+
+  it('should be properly rendered', () => {
+    const links = ['Markets', 'Trading', 'Portfolio'];
+    const hashes = ['#/markets', '#/markets/market-0', '#/portfolio'];
+    let i = 0;
+    cy.getByTestId('navbar').within(() => {
+      cy.get('a[data-testid]', { log: true })
+        .should('have.length', 3)
+        .each((item) => {
+          cy.wrap(item).click();
+          cy.wrap(item).get('span.absolute.h-1.w-full').should('exist');
+          cy.location('hash').should('equal', hashes[i]);
+          cy.wrap(item).should('have.data', 'testid', links[i++]);
+        });
+    });
+  });
+
+  it('should look nicer on mobile', () => {
+    cy.viewport(560, 890);
+    cy.getByTestId('theme-switcher').scrollIntoView().click();
+  });
+});

apps/trading-e2e/src/integration/markets.cy.ts

@@ -53,7 +53,7 @@ describe('markets table', { tags: '@smoke' }, () => {
       .click();
     cy.url().should('eq', Cypress.config('baseUrl') + '/#/markets');
     cy.contains('AAPL.MF21').should('be.visible');
-    cy.contains('Market').click(); // sort by market name
+    cy.get('.ag-header-cell-label').contains('Market').click(); // sort by market name
     for (let i = 0; i < ExpectedSortedMarkets.length; i++) {
       cy.get(`[row-index=${i}]`)
         .find('[col-id="tradableInstrument.instrument.code"]')

apps/trading/components/navbar/navbar.tsx

@@ -42,6 +42,12 @@ export const Navbar = ({
         </Link>
       }
     >
+      <AppNavLink
+        name={t('Markets')}
+        path={Routes.MARKETS}
+        navbarTheme={navbarTheme}
+        end
+      />
       <AppNavLink
         name={t('Trading')}
         path={tradingPath}
@@ -77,6 +83,7 @@ interface AppNavLinkProps {
   navbarTheme: NavbarTheme;
   testId?: string;
   target?: HTMLAttributeAnchorTarget;
+  end?: boolean;
 }
 
 const AppNavLink = ({
@@ -85,6 +92,7 @@ const AppNavLink = ({
   navbarTheme,
   target,
   testId = name,
+  end,
 }: AppNavLinkProps) => {
   const borderClasses = classNames('absolute h-1 w-full bottom-[-1px] left-0', {
     'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
@@ -96,6 +104,7 @@ const AppNavLink = ({
       to={{ pathname: path }}
       className={getNavLinkClassNames(navbarTheme)}
       target={target}
+      end={end}
     >
       {({ isActive }) => {
         return (

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

@@ -40,13 +40,16 @@ export const Nav = ({
   titleContent,
   title,
 }: NavbarProps) => {
-  const themeWrapperClasses = classNames('w-full', {
+  const themeWrapperClasses = classNames(
-    dark: navbarTheme === 'dark',
+    'w-full overflow-y-hidden overflow-x-auto md:overflow-x-hidden',
-  });
+    {
+      dark: navbarTheme === 'dark',
+    }
+  );
 
   const isYellow = navbarTheme === 'yellow';
   const navbarClasses = classNames(
-    'flex items-stretch border-b px-4 border-default',
+    'min-w-max w-full flex items-stretch border-b px-4 border-default',
     {
       'dark:bg-black dark:text-white': !isYellow,
       'bg-vega-yellow text-black bg-right-top bg-no-repeat bg-contain':
@@ -55,7 +58,7 @@ export const Nav = ({
   );
 
   return (
-    <div className={themeWrapperClasses}>
+    <div className={themeWrapperClasses} data-testid="navbar">
       <div className={navbarClasses}>
         <div className="flex gap-4 items-center">
           {icon}