refactor: print media query

Author: OliverDudgeon

src/components/legal/CookiesBanner.tsx

@@ -24,6 +24,7 @@ export const CookiesBanner = () => {
         left: 0,
         padding: "0.5rem",
         boxShadow: 10,
+        displayPrint: "none",
       }}
     >
       <Container>

src/layouts/Footer.tsx

@@ -19,7 +19,7 @@ export const Footer = () => {
   const itemStyles = { justifyContent: small ? "right" : "left" };
 
   return (
-    <Paper square component="footer" sx={{ marginTop: "auto" }}>
+    <Paper square component="footer" sx={{ marginTop: "auto", displayPrint: "none" }}>
       <Container maxWidth="md">
         <Grid container sx={{ p: 2 }}>
           <Grid size={{ sm: 6, xs: 12 }}>

src/layouts/Header.tsx

@@ -5,7 +5,7 @@ import { NavBarContents } from "./navigation/NavBarContents";
 
 const Header = () => {
   return (
-    <AppBar position="static">
+    <AppBar position="static" sx={{ displayPrint: "none" }}>
       <Toolbar>
         <HeaderLogo />
 

src/layouts/Layout.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 
-import { Box, LinearProgress, NoSsr, useMediaQuery } from "@mui/material";
+import { Box, LinearProgress, NoSsr } from "@mui/material";
 
 import { CookiesBanner } from "../components/legal/CookiesBanner";
 import { useIsTransitioning } from "../hooks/useIsTransitioning";
@@ -12,20 +12,21 @@ export interface LayoutProps {
 }
 
 const Layout = ({ children }: LayoutProps) => {
-  const isPrint = useMediaQuery("print");
   const isTransitioning = useIsTransitioning(false);
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
-      {!isPrint && <Header />}
+      <Header />
       {!!isTransitioning && <LinearProgress />}
       {/* <Slide appear direction="right" in={!isTransitioning}> */}
       <Box component="main" sx={{ paddingY: 2 }}>
         {children}
       </Box>
       {/* </Slide> */}
-      {!isPrint && <Footer />}
-      <NoSsr>{!isPrint && <CookiesBanner />}</NoSsr>
+      <Footer />
+      <NoSsr>
+        <CookiesBanner />
+      </NoSsr>
     </Box>
   );
 };