merged with dev

SELab-2 · Apr 2, 2024 · d70e61a · d70e61a
2 parents 17c597e + 8886893
commit d70e61a
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 23 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/logo_ugent.png" />

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,8 +17,11 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.1",
     "styled-components": "^6.1.8"
   },

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,8 +1,7 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Home from "./pages/home/Home";
+import { BrowserRouter,Route,Routes } from "react-router-dom";
 import { Header } from "./components/Header/Header";
 import { AllCoursesTeacher, CourseDetailTeacher } from "./components/Courses/Teacher";
-
+import Home from "./pages/home/Home";
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
  * @returns - The main application component
@@ -19,5 +18,4 @@ function App(): JSX.Element {
     </BrowserRouter>
   );
 }
-
-export default App;
+export default App;
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -1,33 +1,109 @@
-import {
-  AppBar,
-  Box,
-  Button,
-  IconButton,
-  Toolbar,
-  Typography,
-} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import { useTranslation } from "react-i18next";
+import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItemButton, ListItemText, Toolbar, Typography } from "@mui/material";
+import { Menu } from "@mui/icons-material";
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { useEffect, useState } from "react";
 
 /**
- * The header component for the application that will be rendered at the top of the page.
- * @returns - The header component
+ * Renders the header component.
+ * @returns JSX.Element representing the header.
  */
 export function Header(): JSX.Element {
   const { t } = useTranslation();
+  const location = useLocation();
+  const [open, setOpen] = useState(false);
+  const [listItems, setListItems] = useState([
+    { link: "/", text: t("homepage") }
+  ]);
+
+  useEffect(() => {
+    const baseItems = [{ link: "/", text: t("homepage") }];
+    const additionalItems = [
+      { link: "/projects", text: t("myProjects") },
+      { link: "/courses", text: t("myCourses") }
+    ];
+    if (isLoggedIn()) {
+      setListItems([...baseItems, ...additionalItems]);
+    }
+    else {
+      setListItems(baseItems);
+    }
+  }, [t]);
+
+  const title = getTitle(location.pathname, t);
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="sticky">
-        <Toolbar>
-          <IconButton size="large" color="inherit">
-            <MenuIcon />
+        <Toolbar disableGutters>
+          <IconButton edge="start" onClick={() => setOpen(!open)} sx={{ color: "white", marginLeft: 0 }}>
+            <Menu style={{fontSize:"2rem"}} />
           </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            {t('home')}
+            {title}
           </Typography>
-          <Button color="inherit">Login</Button>
+          <Box sx={{ flexGrow: 1 }} />
+          <Button color="inherit">{t('login')}</Button>
         </Toolbar>
       </AppBar>
+      <DrawerMenu open={open} onClose={() => setOpen(false)} listItems={listItems}/>
     </Box>
   );
 }
+/**
+ * @returns Whether a user is logged in or not.
+ */
+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.
+ * @param onClose - Function to handle the close event of the drawer menu.
+ * @param listItems - Array of objects representing the list items in the drawer menu.
+ * @returns The Side Bar
+ */
+function DrawerMenu({ open, onClose, listItems }: { open: boolean, onClose: () => void, listItems: { link: string, text: string }[] }) {
+
+  return (
+    <Drawer open={open} anchor="left" onClose={onClose}>
+      <Grid container direction="column" sx={{
+        width: 250,
+        height: "100%",
+        backgroundColor: "primary.main"
+      }}>
+        <Grid item container direction="row" alignItems="flex-start">
+          <IconButton onClick={onClose} sx={{
+            color: "white"
+          }}>
+            <Menu style={{fontSize:"2rem"}} />
+          </IconButton>
+        </Grid>
+        <List>
+          {listItems.map((listItem, index) => (
+            <ListItemButton key={index} component={Link} to={listItem.link} role="listitem" onClick={onClose}>
+              <ListItemText primary={listItem.text} sx={{color:"white"}} />
+            </ListItemButton>
+          ))}
+        </List>
+      </Grid>
+    </Drawer>
+  );
+}