CSS modules ➡️ Stitches 🧵 (#799)

components/Header/Header.tsx

@@ -1,21 +1,68 @@
 import { memo } from "react";
-import classNames from "classnames";
 import Selfie from "../Selfie/Selfie";
 import Menu from "../Menu/Menu";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
-import styles from "./Header.module.css";
+const Wrapper = styled("header", {
+  width: "100%",
+  height: "4.5em",
+  padding: "0.7em 1.5em",
+  borderBottom: "1px solid $kindaLight",
+  backgroundColor: "$backgroundHeader",
 
-export type HeaderProps = JSX.IntrinsicElements["header"] & {
+  // light-dark theme switch fading
+  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
+
+  "@mobile": {
+    padding: "0.75em 1.25em",
+    height: "5.9em",
+  },
+
+  variants: {
+    sticky: {
+      true: {
+        position: "sticky",
+        top: 0,
+
+        // blurry glass-like background effect (except on firefox)
+        backdropFilter: "saturate(180%) blur(5px)",
+        zIndex: 1000,
+      },
+    },
+  },
+});
+
+const Nav = styled("nav", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  maxWidth: "865px",
+  margin: "0 auto",
+});
+
+const ResponsiveMenu = styled(Menu, {
+  "@mobile": {
+    maxWidth: "325px",
+  },
+
+  "@superNarrow": {
+    maxWidth: "225px",
+  },
+});
+
+export type HeaderProps = ComponentProps<typeof Wrapper> & {
   sticky?: boolean;
 };
 
-const Header = ({ sticky, className, ...rest }: HeaderProps) => (
-  <header className={classNames(styles.header, sticky && styles.sticky, className)} {...rest}>
-    <nav className={styles.nav}>
-      <Selfie className={styles.selfie} />
-      <Menu className={styles.menu} />
-    </nav>
-  </header>
+const Header = ({ sticky, ...rest }: HeaderProps) => (
+  <Wrapper sticky={sticky} {...rest}>
+    <Nav>
+      <Selfie />
+      <ResponsiveMenu />
+    </Nav>
+  </Wrapper>
 );
 
 export default memo(Header);