CSS modules ➡️ Stitches 🧵 (#799)

components/Header/Header.module.css

@@ -1,43 +0,0 @@
-.header {
-  width: 100%;
-  height: 4.5em;
-  padding: 0.7em 1.5em;
-  border-bottom: 1px solid var(--kinda-light);
-  background-color: var(--background-header);
-
-  /* light-dark theme switch fading */
-  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
-}
-
-.sticky {
-  position: sticky;
-  top: 0;
-  backdrop-filter: saturate(180%) blur(5px);
-  z-index: 1000;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 865px;
-  margin: 0 auto;
-}
-
-@media screen and (max-width: 768px) {
-  .header {
-    padding: 0.75em 1.25em;
-    height: 5.9em;
-  }
-
-  .menu {
-    max-width: 325px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .menu {
-    max-width: 225px;
-  }
-}

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);