From 7f82b3aa2be41a227b33316e2314e07bf89f379e Mon Sep 17 00:00:00 2001
From: Takuya Sakoda <syakoo.pub@gmail.com>
Date: Sat, 21 Dec 2024 13:38:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20update=20header=20as=20stic?=
 =?UTF-8?q?ky?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/works/page.tsx                           |  2 +-
 src/app/writings/page.tsx                        |  2 +-
 .../header-footer-template.test.tsx.snap         |  4 ++--
 .../header-footer-template.css.ts                |  3 +++
 .../header/__snapshots__/header.test.tsx.snap    |  4 ++--
 .../header-footer-template/header/header.css.ts  | 16 ++++++++++++++++
 .../header-footer-template/header/header.tsx     |  8 +++++---
 .../__snapshots__/art-list.test.tsx.snap         |  2 +-
 src/features/arts/art-list/art-list.tsx          |  8 +-------
 .../writing-detail/writing-detail.css.ts         |  3 ++-
 10 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/components/header-footer-template/header/header.css.ts

diff --git a/src/app/works/page.tsx b/src/app/works/page.tsx
index 9e51cbd..c711a9e 100644
--- a/src/app/works/page.tsx
+++ b/src/app/works/page.tsx
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 const WorksPage = () => {
   return (
     <HeaderFooterTemplate>
-      <Container as="main" center paddingBottom="400" paddingX="200" size="100">
+      <Container as="main" center paddingX="200" paddingY="400" size="100">
         <WorkList />
       </Container>
     </HeaderFooterTemplate>
diff --git a/src/app/writings/page.tsx b/src/app/writings/page.tsx
index d24f70f..075d8b3 100644
--- a/src/app/writings/page.tsx
+++ b/src/app/writings/page.tsx
@@ -31,7 +31,7 @@ const WritingsPage = async () => {
 
   return (
     <HeaderFooterTemplate>
-      <Container as="main" center paddingBottom="400" paddingX="200" size="100">
+      <Container as="main" center paddingX="200" paddingY="400" size="100">
         <Suspense>
           <WritingList heads={metas} />
         </Suspense>
diff --git a/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap b/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap
index fb2ef2d..0856eb4 100644
--- a/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap
+++ b/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap
@@ -13,10 +13,10 @@ exports[`HeaderFooterTemplate スナップショット Sample 1`] = `
           class="center_centerStyle__1yvz6qj0"
         >
           <header
-            class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_300__s76bfe1b padding_paddingYVariants_300__409uzl13"
+            class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2"
           >
             <div
-              class="flex_flexStyle__12xne02i flex_flexStyle_align_center__12xne02s flex_flexStyle_variants_align_center__12xne027 flex_flexStyle_direction_row__12xne02j flex_flexStyle_gap_100__12xne02y flex_flexStyle_variants_gap_100__12xne02d flex_flexStyle_justify_spaceBetween__12xne02o flex_flexStyle_variants_justify_spaceBetween__12xne023 flex_flexStyle_wrap_true__12xne0213"
+              class="header_headerStyle__ik9xif0"
             >
               <a
                 aria-label="Go to the homepage"
diff --git a/src/components/header-footer-template/header-footer-template.css.ts b/src/components/header-footer-template/header-footer-template.css.ts
index 1853b05..3a6eeea 100644
--- a/src/components/header-footer-template/header-footer-template.css.ts
+++ b/src/components/header-footer-template/header-footer-template.css.ts
@@ -12,6 +12,9 @@ export const containerStyle = style({
 
 export const containerHeaderStyle = style({
   gridArea: "header",
+  position: "sticky",
+  top: 0,
+  zIndex: 100,
 });
 export const containerMainStyle = style({
   gridArea: "main",
diff --git a/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap b/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap
index 9e50445..c0ea26e 100644
--- a/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`Header スナップショット Sample 1`] = `
       class="center_centerStyle__1yvz6qj0"
     >
       <header
-        class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_300__s76bfe1b padding_paddingYVariants_300__409uzl13"
+        class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2"
       >
         <div
-          class="flex_flexStyle__12xne02i flex_flexStyle_align_center__12xne02s flex_flexStyle_variants_align_center__12xne027 flex_flexStyle_direction_row__12xne02j flex_flexStyle_gap_100__12xne02y flex_flexStyle_variants_gap_100__12xne02d flex_flexStyle_justify_spaceBetween__12xne02o flex_flexStyle_variants_justify_spaceBetween__12xne023 flex_flexStyle_wrap_true__12xne0213"
+          class="header_headerStyle__ik9xif0"
         >
           <a
             aria-label="Go to the homepage"
diff --git a/src/components/header-footer-template/header/header.css.ts b/src/components/header-footer-template/header/header.css.ts
new file mode 100644
index 0000000..83170ae
--- /dev/null
+++ b/src/components/header-footer-template/header/header.css.ts
@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+
+import { theme } from "@/design-system/theme.css";
+
+export const headerHeightPx = 74;
+export const headerStyle = style({
+  background: `color-mix(in srgb, ${theme.color.background.primary} 80%, transparent)`,
+  height: `${headerHeightPx}px`,
+  display: "flex",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: theme.space[100],
+  backdropFilter: "blur(10px)",
+  paddingInline: theme.space[200],
+});
diff --git a/src/components/header-footer-template/header/header.tsx b/src/components/header-footer-template/header/header.tsx
index e0f04aa..1c34576 100644
--- a/src/components/header-footer-template/header/header.tsx
+++ b/src/components/header-footer-template/header/header.tsx
@@ -10,6 +10,8 @@ import { artPaths } from "@/features/arts/config/paths";
 import { workPaths } from "@/features/works/config/paths";
 import { writingPaths } from "@/features/writings/config/paths";
 
+import { headerStyle } from "./header.css";
+
 const NavLink: React.FC<{ children: React.ReactNode; href: string }> = ({
   children,
   href,
@@ -27,8 +29,8 @@ const NavLink: React.FC<{ children: React.ReactNode; href: string }> = ({
 export const Header: React.FC = () => {
   return (
     <Center>
-      <Container as="header" paddingX="200" paddingY="300" size="200">
-        <Row align="center" justify="spaceBetween" wrap>
+      <Container as="header" size="200">
+        <div className={headerStyle}>
           <Link aria-label="Go to the homepage" href="/">
             <SyakooLabText />
           </Link>
@@ -37,7 +39,7 @@ export const Header: React.FC = () => {
             <NavLink href={workPaths.list()}>Works</NavLink>
             <NavLink href={artPaths.list()}>Arts</NavLink>
           </Row>
-        </Row>
+        </div>
       </Container>
     </Center>
   );
diff --git a/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap b/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap
index e9dca90..7115577 100644
--- a/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap
+++ b/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ArtList スナップショット Sample 1`] = `
 <body>
   <div>
     <section
-      class="container_containerStyle__s76bfe3 container_containerStyle_size_100__s76bfe5 container_containerStyle_variants_size_100__s76bfe1 container_containerStyle_center_true__s76bfe7 container_containerStyle_paddingBottom_400__s76bfey padding_paddingBottomVariants_400__409uzlq container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv"
+      class="container_containerStyle__s76bfe3 container_containerStyle_size_100__s76bfe5 container_containerStyle_variants_size_100__s76bfe1 container_containerStyle_center_true__s76bfe7 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_400__s76bfe1c padding_paddingYVariants_400__409uzl14"
     >
       <div
         class="flex_flexStyle__12xne02i flex_flexStyle_align_stretch__12xne02u flex_flexStyle_variants_align_stretch__12xne029 flex_flexStyle_direction_column__12xne02k flex_flexStyle_gap_200__12xne02z flex_flexStyle_variants_gap_200__12xne02e flex_flexStyle_justify_flexStart__12xne02l flex_flexStyle_variants_justify_flexStart__12xne020"
diff --git a/src/features/arts/art-list/art-list.tsx b/src/features/arts/art-list/art-list.tsx
index 5e2db71..3e150f0 100644
--- a/src/features/arts/art-list/art-list.tsx
+++ b/src/features/arts/art-list/art-list.tsx
@@ -11,13 +11,7 @@ type ArtListProps = {
 
 export const ArtList: React.FC<ArtListProps> = ({ heads }) => {
   return (
-    <Container
-      as="section"
-      center
-      paddingBottom="400"
-      paddingX="200"
-      size="100"
-    >
+    <Container as="section" center paddingX="200" paddingY="400" size="100">
       <Col gap="200">
         <H2>Arts</H2>
         <ul className={artListStyles.listContainer}>
diff --git a/src/features/writings/writing-detail/writing-detail.css.ts b/src/features/writings/writing-detail/writing-detail.css.ts
index cf622d9..ff33211 100644
--- a/src/features/writings/writing-detail/writing-detail.css.ts
+++ b/src/features/writings/writing-detail/writing-detail.css.ts
@@ -1,5 +1,6 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 
+import { headerHeightPx } from "@/components/header-footer-template/header/header.css";
 import { theme } from "@/design-system/theme.css";
 
 // 縦配置のメディア条件式
@@ -50,7 +51,7 @@ export const writingDetailStyles = {
   }),
   stickyContainer: style({
     position: "sticky",
-    top: theme.space[200],
+    top: `calc(${theme.space[200]} + ${headerHeightPx}px)`,
   }),
 };