Header uses better separation of server and client components (#72)

nicholeuf · Mar 5, 2024 · 37c2603 · 37c2603 · vercel · Mar 5, 2024
1 parent 2dab003
commit 37c2603
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 48 deletions.
diff --git a/src/app/__snapshots__/loading.test.tsx.snap b/src/app/__snapshots__/loading.test.tsx.snap
@@ -215,14 +215,14 @@ exports[`The Loading Page has expected snapshot 1`] = `
   color: #FA2742;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-bottom: 4px solid;
+  border-bottom-color: rgb(251, 82, 103);
   box-sizing: border-box;
   letter-spacing: 1.25px;
   height: 100%;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
-  border-bottom: 4px solid;
-  border-bottom-color: rgb(251, 82, 103);
   -webkit-transition: color 0.25s ease;
   transition: color 0.25s ease;
 }

diff --git a/src/app/__snapshots__/page.test.tsx.snap b/src/app/__snapshots__/page.test.tsx.snap
@@ -215,14 +215,14 @@ exports[`The Home Page has expected snapshot 1`] = `
   color: #FA2742;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-bottom: 4px solid;
+  border-bottom-color: rgb(251, 82, 103);
   box-sizing: border-box;
   letter-spacing: 1.25px;
   height: 100%;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
-  border-bottom: 4px solid;
-  border-bottom-color: rgb(251, 82, 103);
   -webkit-transition: color 0.25s ease;
   transition: color 0.25s ease;
 }

diff --git a/src/app/about/__snapshots__/page.test.tsx.snap b/src/app/about/__snapshots__/page.test.tsx.snap
@@ -215,14 +215,14 @@ exports[`The About Page has expected snapshot 1`] = `
   color: #FA2742;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-bottom: 4px solid;
+  border-bottom-color: rgb(251, 82, 103);
   box-sizing: border-box;
   letter-spacing: 1.25px;
   height: 100%;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
-  border-bottom: 4px solid;
-  border-bottom-color: rgb(251, 82, 103);
   -webkit-transition: color 0.25s ease;
   transition: color 0.25s ease;
 }

diff --git a/src/app/contact/__snapshots__/page.test.tsx.snap b/src/app/contact/__snapshots__/page.test.tsx.snap
@@ -215,14 +215,14 @@ exports[`The Contact Page has expected snapshot 1`] = `
   color: #FA2742;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-bottom: 4px solid;
+  border-bottom-color: rgb(251, 82, 103);
   box-sizing: border-box;
   letter-spacing: 1.25px;
   height: 100%;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
-  border-bottom: 4px solid;
-  border-bottom-color: rgb(251, 82, 103);
   -webkit-transition: color 0.25s ease;
   transition: color 0.25s ease;
 }

diff --git a/src/app/work/__snapshots__/page.test.tsx.snap b/src/app/work/__snapshots__/page.test.tsx.snap
@@ -188,14 +188,14 @@ exports[`The Work Page has expected snapshot 1`] = `
   color: #FA2742;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-bottom: 4px solid;
+  border-bottom-color: rgb(251, 82, 103);
   box-sizing: border-box;
   letter-spacing: 1.25px;
   height: 100%;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
-  border-bottom: 4px solid;
-  border-bottom-color: rgb(251, 82, 103);
   -webkit-transition: color 0.25s ease;
   transition: color 0.25s ease;
 }

diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
@@ -15,20 +15,20 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
 }) => {
   return (
     <Box
-      sx={(theme) => ({
+      sx={{
         typography: 'sacramento',
         fontSize: '30px',
         height: '100%',
         width,
-        borderRight: `${theme.spacing(1)} solid`,
+        borderRight: '8px solid',
         borderRightColor: color,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         '&:hover': {
           cursor: 'pointer',
         },
-      })}
+      }}
       data-testid="header-logo"
     >
       <NextLink

diff --git a/src/components/Header/MainNavigation.tsx b/src/components/Header/MainNavigation.tsx
@@ -0,0 +1,28 @@
+'use client';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Theme } from '@mui/material/styles';
+
+import MobileNavigation from './MobileNavigation';
+import Navigation from './Navigation';
+
+interface MainNavigationProps {
+  color: string;
+  activeColor: string;
+}
+
+const MainNavigation: React.FC<MainNavigationProps> = ({
+  color,
+  activeColor,
+}) => {
+  const isMobile = useMediaQuery<Theme>((theme) =>
+    theme.breakpoints.down('sm')
+  );
+
+  return isMobile ? (
+    <MobileNavigation activeColor={activeColor} />
+  ) : (
+    <Navigation color={color} activeColor={activeColor} />
+  );
+};
+
+export default MainNavigation;
diff --git a/src/components/Header/MobileNavigation.tsx b/src/components/Header/MobileNavigation.tsx
@@ -1,10 +1,6 @@
-import React, {
-  useState,
-  forwardRef,
-  Fragment,
-  useRef,
-  useEffect,
-} from 'react';
+'use client';
+
+import { useState, forwardRef, Fragment, useRef, useEffect } from 'react';
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';

diff --git a/src/components/Header/MobileNavigationItem.tsx b/src/components/Header/MobileNavigationItem.tsx
@@ -16,6 +16,11 @@ const MobileNavigationItem: React.FC<MobileNavigationItemProps> = ({
   href,
   name,
 }) => {
+  const activeStyle = {
+    borderBottom: '4px solid',
+    borderBottomColor: activeColor,
+  };
+
   return (
     <ListItem
       key={href}
@@ -28,14 +33,14 @@ const MobileNavigationItem: React.FC<MobileNavigationItemProps> = ({
         onClick={onClick}
         variant="h3"
         aria-current={isActive ? 'page' : undefined}
-        sx={(theme) => ({
-          color: theme.palette.background.default,
-          borderBottom: isActive ? `${theme.spacing(0.5)} solid` : '',
-          borderBottomColor: isActive ? activeColor : '',
+        sx={{
+          ...(isActive && activeStyle),
+          color: 'background.default',
+
           '&:hover': {
             textDecoration: 'none',
           },
-        })}
+        }}
       >
         {name}
       </NextLink>

diff --git a/src/components/Header/NavigationItem.tsx b/src/components/Header/NavigationItem.tsx
@@ -16,6 +16,11 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
   href,
   name,
 }) => {
+  const activeStyle = {
+    borderBottom: '4px solid',
+    borderBottomColor: activeColor,
+  };
+
   return (
     <ListItem
       key={href}
@@ -29,20 +34,19 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
       <NextLink
         href={href}
         aria-current={isActive ? 'page' : undefined}
-        sx={(theme) => ({
+        sx={{
+          ...(isActive && activeStyle),
           boxSizing: 'border-box',
           letterSpacing: '1.25px',
           height: '100%',
           textDecoration: 'none',
           color,
-          borderBottom: isActive ? `${theme.spacing(0.5)} solid` : '',
-          borderBottomColor: isActive ? activeColor : '',
           transition: 'color 0.25s ease',
           '&:hover': {
             color: activeColor,
             textDecoration: 'none',
           },
-        })}
+        }}
       >
         {name}
       </NextLink>

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,12 +1,7 @@
-'use client';
 import AppBar from '@mui/material/AppBar';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { Theme } from '@mui/material/styles';
-
-import HeaderLogo from './HeaderLogo';
-import Navigation from './Navigation';
 import constants from '@/app/styles/constants';
-import MobileNavigation from './MobileNavigation';
+import HeaderLogo from './HeaderLogo';
+import MainNavigation from './MainNavigation';
 
 interface HeaderProps {
   color?: string;
@@ -19,17 +14,13 @@ const Header: React.FC<HeaderProps> = ({
   activeColor = 'primary.light',
   height = constants.header.height,
 }) => {
-  const isMobile = useMediaQuery<Theme>((theme) =>
-    theme.breakpoints.down('sm')
-  );
-
   return (
     <AppBar
       data-testid="header"
       position="fixed"
-      sx={(theme) => ({
+      sx={{
         backgroundColor: 'background.default',
-        border: `${theme.spacing(1)} solid`,
+        border: '8px solid',
         borderColor: color,
         minHeight: height,
         height,
@@ -39,19 +30,15 @@ const Header: React.FC<HeaderProps> = ({
         justifyContent: 'space-between',
         alignItems: 'center',
         boxShadow: 'none',
-      })}
+      }}
     >
       <HeaderLogo
         // width === height of header to make logo a box
         width={height}
         color={color}
         activeColor={activeColor}
       />
-      {isMobile ? (
-        <MobileNavigation activeColor={activeColor} />
-      ) : (
-        <Navigation color={color} activeColor={activeColor} />
-      )}
+      <MainNavigation color={color} activeColor={activeColor} />
     </AppBar>
   );
 };