feat: add mobile hamburger menu

Author: piotrgredowski

src/components/header.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Box, Container, Flex, NavLink } from "theme-ui";
 
 import { genericInformation } from "~/data/generic";
@@ -6,6 +7,17 @@ import { Logo } from "./logo";
 
 type LinkComponent = React.FC<{ href: string; children: React.ReactNode }>;
 
+const menuItems = [
+  { href: "#about", label: "About 🍕" },
+  { href: "#cfp", label: "CFP 🙋🏻‍♀️" },
+  { href: "/compact-agenda/", label: "Compact agenda 🔗" },
+  { href: "#schedule", label: "Program 📅" },
+  { href: "#organizers", label: "Organizers 👩🏻" },
+  { href: "#venue", label: "Venue 🏰" },
+  { href: "#sponsors", label: "Sponsors 💛" },
+  { href: "#coc", label: "CoC 💂" },
+];
+
 const MenuLink: LinkComponent = ({ href, children }) => {
   return (
     <NavLink
@@ -61,6 +73,37 @@ const MenuButton: LinkComponent = ({ children, href }) => (
   </Box>
 );
 
+type MobileMenuLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  onClick: () => void;
+};
+
+const MobileMenuLink: React.FC<MobileMenuLinkProps> = ({
+  href,
+  children,
+  onClick,
+}) => (
+  <NavLink
+    href={href}
+    onClick={onClick}
+    sx={{
+      color: "white",
+      fontSize: "2.8rem",
+      lineHeight: 1.15,
+      py: ".7rem",
+      textShadow: "0 .2rem 1rem rgba(80, 0, 0, 0.22)",
+      "&:hover, &:focus": {
+        color: "white",
+        textDecoration: "underline",
+        textUnderlineOffset: ".5rem",
+      },
+    }}
+  >
+    {children}
+  </NavLink>
+);
+
 export const ContentButton: LinkComponent = ({ children, href }) => (
   <Box
     sx={{
@@ -94,54 +137,220 @@ export const ContentButton: LinkComponent = ({ children, href }) => (
   </Box>
 );
 
-export const Header = () => (
-  <Box
-    sx={{
-      position: "absolute",
-      top: 0,
-      left: 0,
-      zIndex: 10,
+export const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-      width: "100%",
-    }}
-  >
-    <Container
-      sx={{
-        width: "100%",
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 64em)");
+    const closeMenuOnDesktop = () => {
+      if (mediaQuery.matches) {
+        setIsMenuOpen(false);
+      }
+    };
 
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: ["column", null, "row"],
+    closeMenuOnDesktop();
+    mediaQuery.addEventListener("change", closeMenuOnDesktop);
 
-        color: "white",
-        p: "secondary",
+    return () => {
+      mediaQuery.removeEventListener("change", closeMenuOnDesktop);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isMenuOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isMenuOpen]);
+
+  const closeMenu = () => setIsMenuOpen(false);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: isMenuOpen ? 30 : 10,
+
+        width: "100%",
       }}
     >
-      <Logo />
-      <Flex
+      <Container
         sx={{
+          width: "100%",
+
+          display: "flex",
           alignItems: "center",
-          flexDirection: ["column", "row"],
-          zIndex: 5,
+          justifyContent: "space-between",
+
+          color: "white",
+          p: "secondary",
         }}
+      >
+        <Logo />
+        <button
+          type="button"
+          aria-controls="mobile-menu"
+          aria-expanded={isMenuOpen}
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          onClick={() => setIsMenuOpen((isOpen) => !isOpen)}
+          sx={{
+            display: ["inline-flex", null, "none"],
+            position: "relative",
+            zIndex: 40,
+            width: "5.2rem",
+            height: "5.2rem",
+            alignItems: "center",
+            justifyContent: "center",
+            border: "1px solid rgba(255, 255, 255, 0.65)",
+            borderRadius: "50%",
+            background: "rgba(237, 67, 55, 0.2)",
+            color: "white",
+            cursor: "pointer",
+            p: 0,
+            backdropFilter: "blur(.5rem)",
+          }}
+        >
+          <Box
+            as="span"
+            sx={{
+              position: "relative",
+              width: "2.4rem",
+              height: ".2rem",
+              borderRadius: ".2rem",
+              background: isMenuOpen ? "transparent" : "white",
+              transition: "background .2s ease",
+              "&:before, &:after": {
+                content: '""',
+                position: "absolute",
+                left: 0,
+                width: "2.4rem",
+                height: ".2rem",
+                borderRadius: ".2rem",
+                background: "white",
+                transition: "transform .2s ease, top .2s ease",
+              },
+              "&:before": {
+                top: isMenuOpen ? 0 : "-.8rem",
+                transform: isMenuOpen ? "rotate(45deg)" : "none",
+              },
+              "&:after": {
+                top: isMenuOpen ? 0 : ".8rem",
+                transform: isMenuOpen ? "rotate(-45deg)" : "none",
+              },
+            }}
+          />
+        </button>
+        <Flex
+          sx={{
+            display: ["none", null, "flex"],
+            alignItems: "center",
+            flexDirection: "row",
+            zIndex: 5,
+          }}
+          as="nav"
+        >
+          {menuItems.map(({ href, label }) => (
+            <MenuLink key={href} href={href}>
+              {label}
+            </MenuLink>
+          ))}
+          <MenuButton href={genericInformation.ticketsUrl}>
+            Buy tickets 🎫
+          </MenuButton>
+        </Flex>
+      </Container>
+      <Flex
+        id="mobile-menu"
         as="nav"
+        aria-hidden={!isMenuOpen}
+        sx={{
+          display: ["flex", null, "none"],
+          position: "fixed",
+          inset: 0,
+          zIndex: 30,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+          px: "secondary",
+          py: "primary",
+          background: "url(city.png) center / cover",
+          color: "white",
+          opacity: isMenuOpen ? 1 : 0,
+          pointerEvents: isMenuOpen ? "auto" : "none",
+          transform: isMenuOpen ? "translateY(0)" : "translateY(-1rem)",
+          transition: "opacity .22s ease, transform .22s ease",
+          "&:before": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "primary",
+            opacity: 0.78,
+          },
+        }}
       >
-        <MenuLink href="#about">About 🍕</MenuLink>
-        <MenuLink href="#cfp">CFP 🙋🏻‍♀️</MenuLink>
-        <MenuLink href="/compact-agenda/">Compact agenda 🔗</MenuLink>
-        <MenuLink href="#schedule">Program 📅</MenuLink>
-        <MenuLink href="#organizers">Organizers 👩🏻</MenuLink>
-        <MenuLink href="#venue">Venue 🏰</MenuLink>
-        <MenuLink href="#sponsors">Sponsors 💛</MenuLink>
-        <MenuLink href="#coc">CoC 💂</MenuLink>
-        <MenuButton href={genericInformation.ticketsUrl}>
-          Buy tickets 🎫
-        </MenuButton>
+        <Box sx={{ position: "relative", zIndex: 1, mb: "secondary" }}>
+          <Logo />
+        </Box>
+        <Flex
+          sx={{
+            position: "relative",
+            zIndex: 1,
+            alignItems: "center",
+            flexDirection: "column",
+            gap: ".4rem",
+          }}
+        >
+          {menuItems.map(({ href, label }) => (
+            <MobileMenuLink key={href} href={href} onClick={closeMenu}>
+              {label}
+            </MobileMenuLink>
+          ))}
+          <Box sx={{ mt: "secondary", perspective: "24rem" }}>
+            <NavLink
+              href={genericInformation.ticketsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={closeMenu}
+              sx={{
+                display: "inline-flex",
+                px: "2.8rem",
+                py: "1.3rem",
+                border: "1px solid white",
+                borderRadius: "10rem",
+                background: "white",
+                boxShadow: "0.6rem 0.4rem 2.4rem -0.8rem rgba(25, 0, 0, 0.5)",
+                color: "primary",
+                fontSize: "2rem",
+                "&:hover, &:focus": {
+                  color: "primary",
+                  transform: "translateY(-0.2rem)",
+                },
+              }}
+            >
+              Buy tickets 🎫
+            </NavLink>
+          </Box>
+        </Flex>
       </Flex>
-    </Container>
-  </Box>
-);
+    </Box>
+  );
+};
 
 export const FloatingTicketsButton = () => (
   <NavLink

src/sections/hero.tsx

@@ -16,7 +16,7 @@ const HeroHeading: React.FC<HeroHeadingProps> = ({
   <Heading
     {...props}
     sx={{
-      fontSize: large ? "large" : "heading",
+      fontSize: large ? ["4.2rem", "large"] : ["2rem", "heading"],
       textAlign: "center",
       color: "white",
     }}
@@ -34,7 +34,7 @@ export const Hero = () => (
       background: "url(city.png) center / cover",
       minHeight: "100vh",
       position: "relative",
-      pt: ["52rem", "20rem", "14rem"],
+      pt: ["12rem", "20rem", "14rem"],
       "&:before": {
         content: '""',
         position: "absolute",