fix(nav): restore native anchor link behavior

piotrgredowski · piotrgredowski · commit 0f3f251eb945 · 2026-03-29T23:24:32.000+02:00
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,30 +1,10 @@
-import { type MouseEvent, useCallback } from "react";
 import { Box, Container, Flex, NavLink } from "theme-ui";
 
 import { Logo } from "./logo";
 
 type LinkComponent = React.FC<{ href: string; children: React.ReactNode }>;
 
 const MenuLink: LinkComponent = ({ href, children }) => {
-  const goToSection = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-
-      const destinationEl: HTMLElement | null =
-        window.document.querySelector(href);
-
-      if (!destinationEl) {
-        return;
-      }
-
-      window.scrollTo({
-        top: destinationEl.offsetTop,
-        behavior: "smooth",
-      });
-    },
-    [href],
-  );
-
   return (
     <NavLink
       sx={{
@@ -39,7 +19,6 @@ const MenuLink: LinkComponent = ({ href, children }) => {
       }}
       mt={["secondary", 0]}
       ml={[0, "secondary"]}
-      onClick={goToSection}
       href={href}
     >
       {children}
@@ -119,7 +98,7 @@ export const Header = () => (
       position: "absolute",
       top: 0,
       left: 0,
-      zIndex: 1,
+      zIndex: 10,
 
       width: "100%",
     }}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -11,6 +11,7 @@ const App = ({ Component, pageProps }: AppProps) => (
       styles={css`
         html {
           font-size: 62.5%;
+          scroll-behavior: smooth;
         }
         body {
           font-size: 2rem;

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ const App = ({ Component, pageProps }: AppProps) => (`
`11`	`11`	styles={css`
`12`	`12`	`html {`
`13`	`13`	`font-size: 62.5%;`
	`14`	`+ scroll-behavior: smooth;`
`14`	`15`	`}`
`15`	`16`	`body {`
`16`	`17`	`font-size: 2rem;`