Add link to Methodology page to the header (#6332)

Co-authored-by: Viktor Andersson <30777521+VIKTORVAV99@users.noreply.github.com>
electricitymaps · Jan 11, 2024 · 197be32 · 197be32
1 parent 9539389
commit 197be32
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/web/src/features/header/Header.tsx b/web/src/features/header/Header.tsx
@@ -28,15 +28,15 @@ function MenuLink({
     onClick && onClick();
   };
   return (
-    <div className="relative flex py-2 ">
+    <div className="relative flex py-2">
       <NavigationMenu.Item
         asChild
         className="cursor-pointer rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-black/50"
       >
         <NavigationMenu.Link
           onClick={handleClick}
           href={href}
-          className="group px-2 py-2"
+          className="group px-1 py-2 text-base lg:px-2 lg:text-[1rem]"
         >
           {children}
           {isExternal && (
@@ -59,16 +59,23 @@ export default function Header(): JSX.Element {
   return (
     <header
       className={twMerge(
-        'z-30 hidden w-full items-center justify-between bg-white pl-4 pr-8 shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)] dark:bg-gray-800 dark:shadow-[0_4px_6px_-2px_rgba(0,0,0,0.25)]',
-        !isMobileApp && 'sm:flex'
+        'z-30 hidden w-full items-center justify-between bg-white px-4 shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)] md:pr-8 dark:bg-gray-800 dark:shadow-[0_4px_6px_-2px_rgba(0,0,0,0.25)]',
+        !isMobileApp && 'sm:block md:flex'
       )}
     >
       <Logo className="h-12 w-56 fill-black dark:fill-white" />
-      <NavigationMenu.Root className="hidden md:block">
-        <NavigationMenu.List className="flex space-x-2">
+      <NavigationMenu.Root className="hidden sm:block">
+        <NavigationMenu.List className="flex w-full justify-around md:space-x-2">
           <MenuLink id="faq" onClick={onFAQClick}>
             FAQ
           </MenuLink>
+          <MenuLink
+            href="https://www.electricitymaps.com/methodology/?utm_source=app.electricitymaps.com&utm_medium=referral"
+            id="methodology"
+            isExternal
+          >
+            Methodology
+          </MenuLink>
           <MenuLink
             href="https://www.electricitymaps.com/jobs/?utm_source=app.electricitymaps.com&utm_medium=referral"
             id="jobs"