issue #196: improve logo breakpoint-based responsiveness

ai-cfia · Oct 26, 2024 · b696dc0 · b696dc0
1 parent b12420d
commit b696dc0
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 79 deletions.
diff --git a/src/app/theme.ts b/src/app/theme.ts
@@ -4,20 +4,11 @@ const theme = createTheme({
   typography: {
     fontFamily: "Roboto, Arial, sans-serif",
   },
-  logoSizes: {
+  logoSize: {
     width: {
-      xs: "40vw",
-      sm: "35vw",
-      md: "30vw",
-      lg: "25vw",
-      xl: "20vw",
-    },
-    height: {
-      xs: "100%",
-      sm: "90%",
-      md: "80%",
-      lg: "70%",
-      xl: "50%",
+      xs: "290px",
+      sm: "390px",
+      md: "512px",
     },
   },
   cssVariables: true,
@@ -119,6 +110,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           backgroundColor: "#05486C", // Dark Blue background
+          height: "64px", // Height of the AppBar
         },
       },
     },

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import theme from "@/app/theme";
 import styled from "@emotion/styled";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import MenuIcon from "@mui/icons-material/Menu";
@@ -8,7 +9,7 @@ import {
   IconButton,
   Toolbar,
   Typography,
-  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
@@ -32,7 +33,7 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ setSideNavOpen }) => {
-  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 
   /**
    * Function to handle the toggling of the side navigation menu
@@ -42,72 +43,57 @@ const Header: React.FC<HeaderProps> = ({ setSideNavOpen }) => {
   };
 
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      {/* AppBar component for the header */}
-      <AppBar position="static">
-        <Toolbar>
-          {/* Navigation menu toggle button */}
-          <IconButton
-            color="inherit"
-            edge="start"
-            aria-label="menu"
-            onClick={handleSideNavToggle}
-          >
-            <MenuIcon />
-          </IconButton>
+    <AppBar position="static">
+      <Toolbar sx={{ justifyContent: "space-between", height: "100%" }}>
+        {/* Navigation menu toggle button on the left */}
+        <IconButton edge="start" onClick={handleSideNavToggle}>
+          <MenuIcon />
+        </IconButton>
 
-          {/* Logo container in the center */}
-          <Box
-            position="relative"
-            sx={{ width: "100%", display: "flex", justifyContent: "center" }}
-          >
-            <Box
-              sx={{
-                ...theme.logoSizes,
-              }}
-            >
-              {/* Link to the home page with the logo */}
-              <Link href="https://inspection.canada.ca">
-                <Logo
-                  src="/img/CFIA_FIP_FR_WHITE_1.png"
-                  alt="logo"
-                  fill={true}
-                  priority
-                />
-              </Link>
-            </Box>
-          </Box>
+        {/* Logo container in the center */}
+        <Box
+          sx={{
+            ...theme.logoSize,
+          }}
+        >
+          <Link href="https://inspection.canada.ca">
+            <Logo
+              src="/img/CFIA_FIP_FR_WHITE_1.png"
+              alt="logo"
+              fill={true}
+              priority
+            />
+          </Link>
+        </Box>
 
-          {/* User interaction components */}
-          <Box
+        {/* User interaction components on the right */}
+        <Box
+          sx={{
+            display: "flex",
+          }}
+        >
+          {/* Language toggle button */}
+          <Button
             sx={{
-              display: "flex",
+              alignSelf: "center",
+              textTransform: "unset",
             }}
           >
-            {/* Language toggle button */}
-            <Button
-              sx={{
-                alignSelf: "center",
-                textTransform: "unset",
-              }}
-            >
-              <Typography sx={{ textDecoration: "underline" }}>
-                Français
-              </Typography>
-            </Button>
+            <Typography sx={{ textDecoration: "underline" }}>
+              {isSmallScreen ? "FR" : "Français"}
+            </Typography>
+          </Button>
 
-            {/* User account icon button */}
-            <IconButton
-              color="inherit"
-              sx={{ alignSelf: "center" }}
-              onClick={() => console.log("User Account Clicked")}
-            >
-              <AccountCircleIcon fontSize="inherit" />
-            </IconButton>
-          </Box>
-        </Toolbar>
-      </AppBar>
-    </Box>
+          {/* User account icon button */}
+          <IconButton
+            sx={{ alignSelf: "center" }}
+            onClick={() => console.log("User Account Clicked")}
+          >
+            <AccountCircleIcon />
+          </IconButton>
+        </Box>
+      </Toolbar>
+    </AppBar>
   );
 };
 

diff --git a/src/type/theme.d.ts b/src/type/theme.d.ts
@@ -10,16 +10,16 @@ import { ResponsiveStyleValue } from "@mui/system";
 
 declare module "@mui/material/styles" {
   interface Theme {
-    // Custom sizes for logo, defined by responsive width and height
-    logoSizes: {
+    // Custom size for logo, defined by responsive width and height
+    logoSize: {
       width: ResponsiveStyleValue<string | number>;
       height: ResponsiveStyleValue<string | number>;
     };
   }
 
   interface ThemeOptions {
-    // Optional custom sizes for logo, with partial responsive width and height
-    logoSizes?: {
+    // Optional custom size for logo, with partial responsive width and height
+    logoSize?: {
       width?: ResponsiveStyleValue<string | number>;
       height?: ResponsiveStyleValue<string | number>;
     };