Add new header

public/index.html

@@ -20,9 +20,11 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo512.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>PolicyEngine</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:[email protected]&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];

src/layout/Responsive.jsx

@@ -2,15 +2,32 @@ import { useEffect, useMemo, useState } from "react";
 
 const DisplaySize = {
   Mobile: 0,
+  Tablet: 768,
   Desktop: 1200,
 };
 
 const determineDisplayCategory = (width) => {
-  if (width < DisplaySize.Desktop) {
+  if (width < DisplaySize.Tablet) {
     return "mobile";
-  } else {
-    return "desktop";
+  } else if (width < DisplaySize.Desktop) {
+    return "tablet";
   }
+  return "desktop";
+};
+
+const useDisplayCategory = () => {
+  const [currentDisplayCategory, setcurrentDisplayCategory] = useState(
+    determineDisplayCategory(window.innerWidth)
+  );
+
+  useEffect(() => {
+    const handler = () =>
+      setcurrentDisplayCategory(determineDisplayCategory(window.innerWidth));
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+
+  return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
 const useMobile = () => {
@@ -30,4 +47,16 @@ const useMobile = () => {
   return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
+function ResponsiveComponent(props) {
+  const displayCategory = useDisplayCategory();
+  if (displayCategory === "mobile") {
+    return props.mobile;
+  } else if (displayCategory === "tablet") {
+    return props.tablet;
+  }
+  return props.desktop;
+}
+
 export default useMobile;
+
+export { useDisplayCategory, ResponsiveComponent };

src/pages/HomePage.jsx

@@ -17,7 +17,6 @@ import SimonDuffy from "../images/headshots/simon-duffy.jpeg";
 import MartinFarley from "../images/headshots/martin-farley.jpeg";
 import TorrinWilkins from "../images/headshots/torrin-wilkins.webp";
 import ChrisHolmes from "../images/headshots/chris-holmes.webp";
-
 import BrianHiatt from "../images/headshots/brian-hiatt.png";
 import DarrylFinkton from "../images/headshots/darryl-finkton.jpeg";
 import NateGolden from "../images/headshots/nate-golden.jpg";
@@ -32,7 +31,6 @@ import UBILabs from "../images/logos/orgs/ubilabs.png";
 import UKEU from "../images/logos/orgs/ukeu.svg";
 import ASI from "../images/logos/orgs/asi.webp";
 import CEC from "../images/logos/orgs/cec.svg";
-
 import CGO from "../images/logos/orgs/cgo.jpg";
 import EPMT from "../images/logos/orgs/epmt.jpg";
 import F4GI from "../images/logos/orgs/f4gi.jpg";