new conf design — close mobile menu (#2000)

* Close mobile menu on link click

* Close navbar menu on escape

Author: hasparus

src/app/conf/2025/components/navbar.tsx

@@ -10,6 +10,7 @@ import { Badge } from "../../_components/badge"
 import MenuIcon from "../pixelarticons/menu.svg?svgr"
 import CloseIcon from "../pixelarticons/close.svg?svgr"
 import { GraphQLConfLogoLink } from "./graphql-conf-logo-link"
+import { Anchor } from "../../_design-system/anchor"
 
 export interface NavbarProps {
   links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
@@ -30,6 +31,15 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
 
   useEffect(() => {
     document.body.style.overflow = mobileDrawerOpen ? "hidden" : "auto"
+    if (mobileDrawerOpen) {
+      const closeOnEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setMobileDrawerOpen(false)
+      }
+      document.addEventListener("keydown", closeOnEscape)
+      return () => {
+        document.removeEventListener("keydown", closeOnEscape)
+      }
+    }
   }, [mobileDrawerOpen])
 
   return (
@@ -79,27 +89,27 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
             <div className="flex w-full flex-col lg:mt-0 lg:block">
               {links.map(
                 ({ "aria-disabled": isDisabled, children, ...link }) => (
-                  <NextLink
+                  <Anchor
                     aria-disabled={isDisabled}
                     key={link.href}
                     {...link}
-                    // if external link, open in new tab
-                    {...(link.href.startsWith("https") && {
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                    })}
                     className={clsx(
                       "p-5 underline-offset-4 hover:underline aria-disabled:pointer-events-none max-lg:text-base",
                       pathname === link.href && "underline",
                     )}
+                    onClick={() => {
+                      if (mobileDrawerOpen) {
+                        setMobileDrawerOpen(false)
+                      }
+                    }}
                   >
                     {children}
                     {isDisabled && (
                       <sup className="ml-2">
                         <Badge className="text-white">Soon</Badge>
                       </sup>
                     )}
-                  </NextLink>
+                  </Anchor>
                 ),
               )}
             </div>