SELab-2 · Vucis · Apr 2, 2024 · Mar 11, 2024 · Mar 12, 2024 · Mar 12, 2024
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/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -0,0 +1,7 @@
+{
+    "homepage": "Homepage",
+    "myProjects": "My Projects",
+    "myCourses": "My Courses",
+    "login": "Login",
+    "home": "Home"
+  }
diff --git a/frontend/public/locales/nl/translation.json b/frontend/public/locales/nl/translation.json
@@ -0,0 +1,7 @@
+{
+    "homepage": "Homepage",
+    "myProjects": "Mijn Projecten",
+    "myCourses": "Mijn Vakken",
+    "login": "Login",
+    "home": "Home"
+  }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Home from "./pages/home/Home";
+import { BrowserRouter } from "react-router-dom";
 import { Header } from "./components/Header/Header";
 
 /**
@@ -10,11 +9,7 @@ function App(): JSX.Element {
   return (
     <BrowserRouter>
       <Header />
-      <Routes>
-        <Route index element={<Home />} />
-      </Routes>
     </BrowserRouter>
   );
 }
-
-export default App;
+export default App;
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -2,30 +2,31 @@ import {
   AppBar,
   Box,
   Button,
-  IconButton,
   Toolbar,
-  Typography,
+  Typography
 } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-
+import Navbar from "./Navbar";
+import { useTranslation } from 'react-i18next';
 /**
  * The header component for the application that will be rendered at the top of the page.
  * @returns - The header component
  */
 export function Header(): JSX.Element {
+  const { t } = useTranslation();
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="sticky">
         <Toolbar>
-          <IconButton size="large" color="inherit">
-            <MenuIcon />
-          </IconButton>
+          <Box sx={{ flexGrow: 1 }}>
+            <Navbar />
+          </Box>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Home
+            {t('home')}
           </Typography>
-          <Button color="inherit">Login</Button>
+          <Button color="inherit">{t('login')}</Button>
         </Toolbar>
       </AppBar>
     </Box>
   );
-}
+}
diff --git a/frontend/src/components/Header/Navbar.tsx b/frontend/src/components/Header/Navbar.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import {
+  IconButton,
+  List,
+  ListItemText,
+  CssBaseline,
+  Drawer,
+  Grid,
+  ListItemButton,
+} from "@mui/material";
+import {
+  Menu
+} from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Renders the navbar.
+ * @returns - A Drawer with a list of navigation items.
+ */
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+  const toggleSlider = (openState:boolean) => () => {
+    setOpen(openState);
+  };
+  const { t } = useTranslation();
+  const listItems = [
+    {link: "/", text: t("homepage")},
+    {link: "/projects", text: t("myProjects")},
+    {link: "/courses", text: t("myCourses")}
+  ]
+
+  const SideList = () => (
+    <Grid container direction="column" sx={{
+      width: 250,
+      background: "#373b42",
+      height: "100%"
+    }}>
+      <Grid item container direction="row" alignItems="flex-start">
+        <IconButton onClick={toggleSlider(!open)} sx={{
+          color: "blue"
+        }}>
+          <Menu style={{fontSize:"3rem"}} />
+        </IconButton>
+      </Grid>
+      <Grid item>
+      </Grid>
+      <Grid item>
+        <List>
+          {listItems.map((listItem,index) => (
+            <ListItemButton key={index}
+              onClick={() => {return navigate(listItem.link)}}
+            >
+              <ListItemText primary={listItem.text} sx={{color:"white"}} />
+            </ListItemButton>
+          ))}
+        </List>
+      </Grid>
+    </Grid>
+  );
+
+  return (
+    <>
+      <CssBaseline />
+      <IconButton sx={{color:"blue"}} onClick={toggleSlider(!open)} style={{ position: 'absolute', top: 0, left: 0 }}>
+        <Menu style={{fontSize:"3rem"}} />
+      </IconButton>
+      <Drawer open={open} anchor="left" onClose={toggleSlider(false)}>
+        <SideList />
+      </Drawer>
+    </>
+  );
+}
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    }
+  });
+
+export default i18n;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import './i18n'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>