Migrate to app router (#2254)

components/Layout/Layout.tsx

@@ -1,64 +1,28 @@
+import clsx from "clsx";
 import Header from "../Header";
 import Footer from "../Footer";
 import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent";
-import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentPropsWithoutRef } from "react";
 
-const Flex = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-  minHeight: "100vh",
-});
+import styles from "./Layout.module.css";
 
-const Default = styled("main", {
-  width: "100%",
-  padding: "1.5em",
-});
+export type LayoutProps = ComponentPropsWithoutRef<"div">;
 
-const Container = styled("div", {
-  maxWidth: theme.sizes.maxLayoutWidth,
-  margin: "0 auto",
-  display: "block",
-});
-
-// stick header to the top of the page when scrolling
-const StickyHeader = styled(Header, {
-  position: "sticky",
-  top: 0,
-});
-
-// footer needs to fill the remaining vertical screen space. doing it here to keep flex stuff together.
-const FlexedFooter = styled(Footer, {
-  flex: 1,
-});
-
-export type LayoutProps = ComponentPropsWithoutRef<typeof Flex> & {
-  container?: boolean; // pass false to disable default `<main>` container styles with padding, etc.
-};
-
-const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
+const Layout = ({ className, children, ...rest }: LayoutProps) => {
   return (
     <>
       <SkipToContentLink />
 
-      <Flex {...rest}>
-        <StickyHeader />
+      <div className={clsx(styles.flex, className)} {...rest}>
+        <Header className={styles.stickyHeader} />
 
-        {/* passing `container={false}` to Layout allows 100% control of the content area on a per-page basis */}
-        {container ? (
-          <Default>
-            <SkipToContentTarget />
-            <Container>{children}</Container>
-          </Default>
-        ) : (
-          <>
-            <SkipToContentTarget />
-            {children}
-          </>
-        )}
+        <main className={styles.default}>
+          <SkipToContentTarget />
+          <div className={styles.container}>{children}</div>
+        </main>
 
-        <FlexedFooter />
-      </Flex>
+        <Footer className={styles.flexedFooter} />
+      </div>
     </>
   );
 };