Migrate to app router (#2254)

components/Header/Header.module.css

@@ -0,0 +1,82 @@
+.header {
+  width: 100%;
+  height: 4.5em;
+  padding: 0.7em 1.5em;
+  border-bottom: 1px solid var(--colors-kindaLight);
+  background-color: var(--colors-backgroundHeader);
+  transition:
+    background var(--transitions-fade),
+    border var(--transitions-fade);
+  z-index: 9999px;
+
+  /* blurry glass-like background effect (except on firefox...?) */
+  backdrop-filter: saturate(180%) blur(5px);
+}
+
+.selfieImage {
+  width: 50px;
+  height: 50px;
+  border: 1px solid var(--colors-light);
+  border-radius: 50%;
+}
+
+.selfieLink {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--colors-mediumDark) !important;
+}
+
+.selfieLink:hover,
+.selfieLink:focus-visible {
+  color: var(--colors-link) !important;
+}
+
+.name {
+  margin: 0 0.6em;
+  font-size: 1.15em;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: var(--sizes-maxLayoutWidth);
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .header {
+    padding: 0.75em 1.25em;
+    height: 5.9em;
+  }
+
+  .selfieImage {
+    width: 70px;
+    height: 70px;
+    border-width: 2px;
+  }
+
+  .selfieLink:hover .selfieImage,
+  .selfieLink:focus-visible .selfieImage {
+    border-color: var(--colors-linkUnderline);
+  }
+
+  .name {
+    display: none;
+  }
+
+  .menu {
+    max-width: 325px;
+  }
+}
+
+@media (max-width: 380px) {
+  .menu {
+    max-width: 225px;
+  }
+}

components/Header/Header.tsx

@@ -1,55 +1,38 @@
-import Selfie from "../Selfie";
+import clsx from "clsx";
+import Link from "../Link";
+import Image from "../Image";
 import Menu from "../Menu";
-import { styled, theme } from "../../lib/styles/stitches.config";
+import config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 
-const Wrapper = styled("header", {
-  width: "100%",
-  height: "4.5em",
-  padding: "0.7em 1.5em",
-  borderBottom: `1px solid ${theme.colors.kindaLight}`,
-  backgroundColor: theme.colors.backgroundHeader,
-  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
-  zIndex: 9999,
+import styles from "./Header.module.css";
 
-  // blurry glass-like background effect (except on firefox...?)
-  backdropFilter: "saturate(180%) blur(5px)",
+import selfieJpg from "../../public/static/images/selfie.jpg";
 
-  "@medium": {
-    padding: "0.75em 1.25em",
-    height: "5.9em",
-  },
-});
+export type HeaderProps = ComponentPropsWithoutRef<"header">;
 
-const Nav = styled("nav", {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  maxWidth: theme.sizes.maxLayoutWidth,
-  margin: "0 auto",
-});
-
-const ResponsiveMenu = styled(Menu, {
-  "@medium": {
-    maxWidth: "325px",
-  },
-
-  "@small": {
-    maxWidth: "225px",
-  },
-});
-
-export type HeaderProps = ComponentPropsWithoutRef<typeof Wrapper>;
-
-const Header = ({ ...rest }: HeaderProps) => {
+const Header = ({ className, ...rest }: HeaderProps) => {
   return (
-    <Wrapper {...rest}>
-      <Nav>
-        <Selfie />
-        <ResponsiveMenu />
-      </Nav>
-    </Wrapper>
+    <header className={clsx(styles.header, className)} {...rest}>
+      <nav className={styles.nav}>
+        <Link href="/" rel="author" title={config.authorName} underline={false} className={styles.selfieLink}>
+          <Image
+            src={selfieJpg}
+            alt={`Photo of ${config.authorName}`}
+            className={styles.selfieImage}
+            width={70}
+            height={70}
+            quality={60}
+            placeholder="empty"
+            inline
+            priority
+          />
+          <span className={styles.name}>{config.authorName}</span>
+        </Link>
+
+        <Menu className={styles.menu} />
+      </nav>
+    </header>
   );
 };