💄 make header sticky

next.config.js

@@ -9,4 +9,8 @@ const nextConfig = {
   trailingSlash: true,
 };
 
-module.exports = withVanillaExtract(nextConfig);
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withBundleAnalyzer(withVanillaExtract(nextConfig));

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "analyze": "ANALYZE=true next build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -20,6 +21,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^13.4.19",
     "@storybook/addon-essentials": "^7.4.0-alpha.2",
     "@storybook/addon-interactions": "^7.4.0-alpha.2",
     "@storybook/addon-links": "^7.4.0-alpha.2",

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

src/app/Header/header.css.ts

@@ -1,11 +1,10 @@
 import { style } from '@vanilla-extract/css';
 
 const wrapper = style({
-  padding: '12px',
-  marginBottom: '24px',
   backgroundColor: '#FFFFFF',
   boxShadow: '0px 5px 15px 0px rgba(0, 0, 0, 0.35)',
   borderRadius: '12px',
+  top: '24px'
 });
 
 const FilledButton = style({

src/app/Header/index.tsx

@@ -5,7 +5,7 @@ import * as style from '~/app/Header/header.css';
 
 export const Header: FC = () => {
   return (
-    <Box className={style.wrapper}>
+    <Box className={style.wrapper} position={'sticky'} p={'3'}>
       <Flex display={'flex'} align={'center'} justify={'between'}>
         <Text weight={'bold'} size={'6'}>
           {"Kenzo's Portfolio"}

src/app/page.tsx

@@ -3,6 +3,7 @@ import type { NextPage } from 'next';
 import { Eyecatch } from '~/app/Eyecatch';
 import { Skills } from '~/app/Skill';
 
+
 const TopPage: NextPage = () => {
   return (
     <main>