From 08402a517c92fdce5c8a0b6adecce82b4298ad3d Mon Sep 17 00:00:00 2001
From: Matt van Voorst <mattvanvoorst@contentful.com>
Date: Tue, 18 Oct 2022 09:19:21 +0200
Subject: [PATCH 1/2] chore: [] Sticky header - Changed the header from
 position fixed to sticky, to no longer overlap parts of the components -
 Removed margin-top values wherever they were added since they are no longer
 needed -

---
 src/components/errors/entry-not-found.tsx    |  9 ++++-----
 src/components/layout/category-container.tsx |  9 +--------
 src/components/layout/header.tsx             |  4 ++--
 src/components/layout/layout.css             |  2 +-
 src/components/layout/page-container.tsx     |  8 +-------
 src/components/layout/post-container.tsx     |  9 +--------
 src/components/layout/product-container.tsx  | 16 +---------------
 7 files changed, 11 insertions(+), 46 deletions(-)

diff --git a/src/components/errors/entry-not-found.tsx b/src/components/errors/entry-not-found.tsx
index 18c6a214..fab9fe75 100644
--- a/src/components/errors/entry-not-found.tsx
+++ b/src/components/errors/entry-not-found.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
-
-import ErrorBox from './error-box'
+import React from 'react';
 
+import ErrorBox from './error-box';
 
 const EntryNotFound = (props: { className?: string }) => (
   <ErrorBox {...props}>Component not found.</ErrorBox>
-)
+);
 
-export default EntryNotFound
+export default EntryNotFound;
diff --git a/src/components/layout/category-container.tsx b/src/components/layout/category-container.tsx
index 1f6b7f87..eaf1e656 100644
--- a/src/components/layout/category-container.tsx
+++ b/src/components/layout/category-container.tsx
@@ -1,18 +1,11 @@
-import { Theme } from '@mui/material';
 import { CSSProperties } from '@mui/material/styles/createTypography';
 import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
-import { HEADER_HEIGHT, HEADER_HEIGHT_MD } from '@src/theme';
-
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
-    marginTop: HEADER_HEIGHT_MD,
     width: '100%',
-    [theme.breakpoints.up('md')]: {
-      marginTop: HEADER_HEIGHT,
-    },
   },
 }));
 
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 790cc981..232e7c97 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -70,8 +70,8 @@ const Header = (props: HeaderPropsInterface) => {
   const classes = useStyles();
 
   return (
-    <AppBar position="fixed" color="secondary" className={classes.appbar}>
-      <Toolbar className={classes.toolbar}>
+    <AppBar position="sticky" color="secondary" className={classes.appbar}>
+      <Toolbar>
         <Container
           className={classes.toolbarContent}
           disableGutters
diff --git a/src/components/layout/layout.css b/src/components/layout/layout.css
index c4b728c5..7105634e 100644
--- a/src/components/layout/layout.css
+++ b/src/components/layout/layout.css
@@ -5,7 +5,7 @@ html {
 html,
 body,
 #__next {
-  height: 100%;
+  min-height: 100%;
 }
 
 body.is-scroll-locked {
diff --git a/src/components/layout/page-container.tsx b/src/components/layout/page-container.tsx
index a7c4af0e..1b5b9364 100644
--- a/src/components/layout/page-container.tsx
+++ b/src/components/layout/page-container.tsx
@@ -4,15 +4,9 @@ import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
-import { HEADER_HEIGHT_MD, HEADER_HEIGHT } from '@src/theme';
-
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   pageContainerRoot: {
-    marginTop: HEADER_HEIGHT_MD,
     width: '100%',
-    [theme.breakpoints.up('md')]: {
-      marginTop: HEADER_HEIGHT,
-    },
   },
 }));
 
diff --git a/src/components/layout/post-container.tsx b/src/components/layout/post-container.tsx
index 6c4c8d30..7e9465f6 100644
--- a/src/components/layout/post-container.tsx
+++ b/src/components/layout/post-container.tsx
@@ -1,18 +1,11 @@
-import { Theme } from '@mui/material';
 import { CSSProperties } from '@mui/material/styles/createTypography';
 import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
-import { HEADER_HEIGHT_MD, HEADER_HEIGHT } from '@src/theme';
-
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
-    marginTop: HEADER_HEIGHT_MD,
     width: '100%',
-    [theme.breakpoints.up('md')]: {
-      marginTop: HEADER_HEIGHT,
-    },
   },
 }));
 
diff --git a/src/components/layout/product-container.tsx b/src/components/layout/product-container.tsx
index 1db51ccf..99a13013 100644
--- a/src/components/layout/product-container.tsx
+++ b/src/components/layout/product-container.tsx
@@ -1,20 +1,7 @@
-import { Theme } from '@mui/material';
 import { CSSProperties } from '@mui/material/styles/createTypography';
-import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
-import { HEADER_HEIGHT, HEADER_HEIGHT_MD } from '@src/theme';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    marginTop: HEADER_HEIGHT_MD,
-    [theme.breakpoints.up('md')]: {
-      marginTop: HEADER_HEIGHT,
-    },
-  },
-}));
-
 type Props = {
   className?: string;
   style?: CSSProperties;
@@ -22,9 +9,8 @@ type Props = {
 };
 
 const ProductContainer = (props: Props) => {
-  const classes = useStyles();
   return (
-    <div style={props.style} className={clsx(classes.root, props.className)}>
+    <div style={props.style} className={clsx(props.className)}>
       {props.children}
     </div>
   );

From 0e527011e0c911c15ef6a1f9297a4b4dccc88c51 Mon Sep 17 00:00:00 2001
From: Matt van Voorst <mattvanvoorst@contentful.com>
Date: Wed, 19 Oct 2022 10:15:27 +0200
Subject: [PATCH 2/2] chore: [] Sticky header - Removed unused import

---
 src/components/layout/page-container.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/layout/page-container.tsx b/src/components/layout/page-container.tsx
index 1b5b9364..651f2014 100644
--- a/src/components/layout/page-container.tsx
+++ b/src/components/layout/page-container.tsx
@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import { CSSProperties } from '@mui/material/styles/createTypography';
 import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';