chore: [] Sticky header (#67)

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;

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

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

src/components/layout/layout.css

@@ -5,7 +5,7 @@ html {
 html,
 body,
 #__next {
-  height: 100%;
+  min-height: 100%;
 }
 
 body.is-scroll-locked {

src/components/layout/page-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(() => ({
   pageContainerRoot: {
-    marginTop: HEADER_HEIGHT_MD,
     width: '100%',
-    [theme.breakpoints.up('md')]: {
-      marginTop: HEADER_HEIGHT,
-    },
   },
 }));
 

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

src/components/layout/product-container.tsx

@@ -1,30 +1,16 @@
-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;
   children?: React.ReactNode | React.ReactNode[];
 };
 
 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>
   );