Set title of header using Portal (#177)

* Set title using Portal

* cleanup

frontend/public/locales/en/translation.json

@@ -1,4 +1,7 @@
 {
+  "home": {
+    "title": "Homepage"
+  },
   "header": {
     "myProjects": "My Projects",
     "myCourses": "My Courses",

frontend/public/locales/nl/translation.json

@@ -1,4 +1,7 @@
 {
+  "home": {
+    "title": "Homepagina"
+  },
   "header": {
     "myProjects": "Mijn Projecten",
     "myCourses": "Mijn Vakken",

frontend/src/components/Header/Header.tsx

@@ -17,7 +17,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import LanguageIcon from "@mui/icons-material/Language";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { TitlePortal } from "./TitlePortal";
 
 /**
  * The header component for the application that will be rendered at the top of the page.
@@ -41,7 +42,6 @@ export function Header(): JSX.Element {
     setLanguageMenuAnchor(null);
   };
 
-  const location = useLocation();
   const [open, setOpen] = useState(false);
   const [listItems, setListItems] = useState([
     { link: "/", text: t("homepage") }
@@ -61,18 +61,14 @@ export function Header(): JSX.Element {
     }
   }, [t]);
 
-  const title = getTitle(location.pathname, t);
-
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="sticky">
         <Toolbar disableGutters>
           <IconButton edge="start" onClick={() => setOpen(!open)} sx={{ color: "white", marginLeft: 0 }}>
             <MenuIcon style={{fontSize:"2rem"}} />
           </IconButton>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            {title}
-          </Typography>
+          <TitlePortal />
           <Button color="inherit">{t("login")}</Button>
           <div>
             <IconButton onClick={handleLanguageMenu} color="inherit">
@@ -107,22 +103,6 @@ function isLoggedIn() {
   return true;
 }
 
-/**
- * Get the title based on the given pathname.
- * @param pathname - The current pathname.
- * @param t - The translation function.
- * @returns The title.
- */
-function getTitle(pathname: string, t: (key: string) => string): string {
-  switch(pathname) {
-  case '/': return t('home');
-  case '/login': return t('login');
-  case '/courses': return t('myCourses');
-  case '/projects': return t('myProjects');
-  default: return t('home');
-  }
-}
-
 /**
  * Renders the drawer menu component.
  * @param open - Whether the drawer menu is open or not.

frontend/src/components/Header/PageTitle.tsx

@@ -0,0 +1,14 @@
+export const PageTitle = ({ title, defaultTitle, className }: {title:string,defaultTitle:string,className:string}) => {
+
+  return (
+    <span className={className}>
+      {!title ? (
+        <span>{defaultTitle}</span>
+      ) : typeof title === 'string' ? (
+        <span>{title}</span>
+      ) : (
+        title
+      )}
+    </span>
+  );
+};

frontend/src/components/Header/Title.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+
+export const Title = (props: TitleProps) => {
+  const { defaultTitle, title } = props;
+  const [container, setContainer] = useState(() =>
+    typeof document !== 'undefined'
+      ? document.getElementById('react-admin-title')
+      : null
+  );
+
+  // on first mount, we don't have the container yet, so we wait for it
+  useEffect(() => {
+    setContainer(container => {
+      const isInTheDom =
+                typeof document !== 'undefined' &&
+                document.body.contains(container);
+      if (container && isInTheDom) return container;
+      return typeof document !== 'undefined'
+        ? document.getElementById('react-admin-title')
+        : null;
+    });
+  }, []);
+
+  if (!container) return null;
+
+  return createPortal(
+    <>{title || defaultTitle}</>,
+    container
+  );
+};
+
+export const TitlePropType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.element,
+]);
+
+Title.propTypes = {
+  defaultTitle: PropTypes.string,
+  className: PropTypes.string,
+  record: PropTypes.any,
+  title: TitlePropType,
+};
+
+export interface TitleProps {
+    className?: string;
+    defaultTitle?: string;
+    title?: string;
+    preferenceKey?: string;
+}

frontend/src/components/Header/TitlePortal.tsx

@@ -0,0 +1,14 @@
+import { Typography, TypographyProps } from '@mui/material';
+
+export const TitlePortal = (props: TypographyProps) => (
+  <Typography
+    flex="1"
+    textOverflow="ellipsis"
+    whiteSpace="nowrap"
+    overflow="hidden"
+    variant="h6"
+    color="inherit"
+    id="react-admin-title"
+    {...props}
+  />
+);

frontend/src/pages/home/Home.tsx

@@ -1,12 +1,16 @@
-
+import { useTranslation } from "react-i18next";
+import { Title } from "../../components/Header/Title";
 /**
  * This component is the home page component that will be rendered when on the index route.
  * @returns - The home page component
  */
 export default function Home() {
+  const { t } = useTranslation("translation", { keyPrefix: "home" });
   return (
-    <div>
-      <h1></h1>
-    </div>
+    <>
+      <Title title={t('title')} />
+      <div>
+      </div>
+    </>
   );
 }