Merge pull request #32 from near/develop

Deploy nav fixes to production

package.json

@@ -6,10 +6,12 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "lint:pre-commit": "next lint --max-warnings 0",
     "prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json}'",
     "prettier:write": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json}'",
     "ts:check": "tsc --noEmit --incremental",
-    "pre-commit": "npm run lint && npm run prettier:write && npm run ts:check",
+    "pre-commit": "npm run lint:pre-commit && npm run prettier && npm run ts:check",
     "sync-submodules": "git submodule init && git submodule update",
     "prepare": "husky"
   },

src/components/CookiePrompt.tsx

@@ -8,6 +8,7 @@ import { Text } from './lib/Text';
 
 const Wrapper = styled.div`
   position: fixed;
+  z-index: 1000;
   bottom: 1rem;
   left: 0;
   right: 0;

src/components/CtaSection.tsx

@@ -1,5 +1,3 @@
-import { CREATE_ACCOUNT_URL } from '@/utils/constants';
-
 import { Button } from './lib/Button';
 import { Container } from './lib/Container';
 import { Flex } from './lib/Flex';

src/components/navigation/desktop/MainNavigationMenu.tsx

@@ -1,5 +1,6 @@
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import Link from 'next/link';
+import type { MouseEventHandler } from 'react';
 import styled from 'styled-components';
 
 import { recordMouseEnter } from '@/utils/analytics';
@@ -44,7 +45,7 @@ const NavTrigger = styled(NavigationMenu.Trigger)`
   transition: all 200ms;
 
   &:hover,
-  &:focus,
+  &:focus-visible,
   &[data-state='open'] {
     background: var(--sand4);
   }
@@ -146,6 +147,16 @@ const NavSection = styled.div`
 `;
 
 export const MainNavigationMenu = () => {
+  const navTriggerClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    const target = event.target as HTMLButtonElement;
+
+    if (target.getAttribute('data-state') === 'open') {
+      // When a nav trigger is already open and then clicked, we ignore the click to keep the nav dropdown open
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
   return (
     <Wrapper>
       <NavRoot delayDuration={0}>
@@ -154,7 +165,9 @@ export const MainNavigationMenu = () => {
             .filter((category) => category.visible === 'all' || category.visible === 'desktop')
             .map((category) => (
               <NavItem key={category.title}>
-                <NavTrigger onMouseEnter={recordMouseEnter}>{category.title}</NavTrigger>
+                <NavTrigger onMouseEnter={recordMouseEnter} onClick={navTriggerClick}>
+                  {category.title}
+                </NavTrigger>
 
                 <NavContent>
                   <Container>

src/components/pages/Home.tsx

@@ -767,7 +767,7 @@ export const Home = () => {
 
             <Grid $columns="1fr 1fr 1fr" $gap="24px" $mobileGap="48px">
               {news.map((post) => (
-                <Article key={post.title} href={post.url} target="_blank">
+                <Article key={post.title + post.createdAt} href={post.url} target="_blank">
                   <ArticleImage>
                     <img src={post.thumbnail} alt={post.title} />
                   </ArticleImage>
@@ -818,7 +818,7 @@ export const Home = () => {
 
             <Grid $columns="1fr 1fr 1fr" $gap="24px" $mobileGap="48px">
               {events.map((event) => (
-                <Article key={event.title} href={event.url} target="_blank" style={{ minWidth: 0 }}>
+                <Article key={event.title + event.date} href={event.url} target="_blank" style={{ minWidth: 0 }}>
                   <ArticleImage>
                     <img src={event.thumbnail} alt={event.title} />
                   </ArticleImage>