moved internationalization to YAML to allow more complex cards, finis…

…hed terms page, updated about page with contributors fetched from github

app/next-i18next.config.js

@@ -3,4 +3,5 @@ module.exports = {
     defaultLocale: "en",
     locales: ["en", "de", "fr", "nl"], // Add other locales as needed
   },
+  localeExtension: "yml",
 };

app/package.json

@@ -52,7 +52,7 @@
     "jsonwebtoken": "9.0.2",
     "jwt-decode": "3.1.2",
     "next": "13.5.5",
-    "next-i18next": "^14.0.3",
+    "next-i18next": "^15.0.0",
     "polished": "4.2.2",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",

app/public/locales/de/common.yml

@@ -0,0 +1,2 @@
+Search: "Suchen…"
+SearchShort: "Suchen"

app/public/locales/fr/common.yml

@@ -0,0 +1,2 @@
+Search: "Rechercher…"
+SearchShort: "Rechercher"

app/public/locales/nl/common.yml

@@ -0,0 +1,2 @@
+Search: "Zoeken…"
+SearchShort: "Zoeken"

app/src/components/Card.js

@@ -15,10 +15,10 @@ import {
   CardContent as MuiCardContent,
   CardActions as MuiCardActions,
   CardMedia as MuiCardMedia,
-  List,
+  List as MuiList,
   ListItemButton,
   ListItemIcon,
-  ListItemText,
+  ListItemText as MuiListItemText,
   Typography as MuiTypography,
   useMediaQuery,
 } from "@mui/material";
@@ -56,11 +56,21 @@ const CardContent = styled(MuiCardContent)`
 `;
 const CardActions = styled(MuiCardActions)`
   padding-left: 15px;
+  padding-top: 0px;
 `;
-
 const CardMedia = styled(MuiCardMedia)`
   height: 220px;
 `;
+const List = styled(MuiList)`
+  padding-top: 0px;
+`;
+const ListItemText = styled(MuiListItemText)`
+  margin: 0px;
+`;
+const Markdown = styled(ReactMarkdown)`
+  margin-block-start: -0.5em;
+  margin-block-end: -0.5em;
+`;
 
 const ListIcon = styled(FontAwesomeIcon)`
   margin-left: 10;
@@ -74,7 +84,7 @@ const CardItem = ({ link, icon, color, text }) => {
         <ListIcon icon={icon} size="2x" style={{ color: color }} />
       </ListItemIcon>
       <ListItemText>
-        <ReactMarkdown>{text}</ReactMarkdown>
+        <Markdown>{text}</Markdown>
       </ListItemText>
     </ListItemButton>
   );
@@ -123,7 +133,7 @@ const InfoCard = ({ info }) => {
           )}
           {t(`${info.id}.title`)}
         </Typography>
-        <ReactMarkdown>{t(`${info.id}.text`)}</ReactMarkdown>
+        <Markdown>{t(`${info.id}.text`)}</Markdown>
       </CardContent>
       <CardActions>
         <List component="nav">

app/src/components/navbar/Navbar.js

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useState } from "react";
 import styled from "@emotion/styled";
 import { darken } from "polished";
 import { useTranslation } from "next-i18next";
@@ -15,6 +15,7 @@ import {
   IconButton as MuiIconButton,
   Toolbar,
   InputBase,
+  Tooltip,
 } from "@mui/material";
 
 import { SearchProvider, SearchBox } from "@elastic/react-search-ui";
@@ -53,19 +54,10 @@ const SearchWrapper = styled(Box)`
     background-color: ${(props) =>
       darken(
         0.05,
-        props.ecolor ? props.ecolor : props.theme.header.background
+        props.ecolor ? props.ecolor : props.theme.header.background,
       )};
   }
 
-  ${(props) => props.theme.breakpoints.down("md")} {
-    margin-left: ${(props) => props.theme.spacing(8)};
-  }
-
-  ${(props) => props.theme.breakpoints.down("sm")} {
-    margin: 0 auto;
-    display: flex;
-  }
-
   svg {
     width: 19px;
     height: 19px;
@@ -93,14 +85,6 @@ const Input = styled(InputBase)`
     opacity: 0.8;
   }
 
-  ${(props) => props.theme.breakpoints.down("sm")} {
-    & > input::placeholder {
-      width: 47px;
-    }
-    & > input {
-      min-width: 200px;
-    }
-  }
   ${(props) => props.theme.breakpoints.up("md")} {
     & > input {
       min-width: 400px;
@@ -142,6 +126,18 @@ const Brand = styled(ListItemButton)`
   }
 `;
 
+function NavbarSearch({ toggleSearch }) {
+  return (
+    <React.Fragment>
+      <Tooltip title="Search">
+        <IconButton color="inherit" onClick={toggleSearch} size="large">
+          <FontAwesomeIcon icon={faSearch} />
+        </IconButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+}
+
 const SearchBar = memo(({ config }) => {
   const { t } = useTranslation();
 
@@ -178,9 +174,34 @@ const SearchBar = memo(({ config }) => {
   );
 });
 
+const SearchContainer = ({ ecolor }) => {
+  return (
+    <SearchWrapper
+      ecolor={ecolor}
+      sx={{
+        display: "flex",
+        alignItems: "flex-end",
+      }}
+    >
+      <FontAwesomeIcon icon={faSearch} />
+      <SearchBar config={searchConfig} />
+    </SearchWrapper>
+  );
+};
+
+const SearchMiniBar = ({ ecolor }) => {
+  return (
+    <Toolbar sx={{ display: { xs: "block", md: "none" } }}>
+      <SearchContainer ecolor={ecolor} />
+    </Toolbar>
+  );
+};
+
 SearchBar.displayName = "Search";
 
 const Navbar = ({ onDrawerToggle, ecolor }) => {
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
   return (
     <React.Fragment>
       <AppBar position="sticky" elevation={0} ecolor={ecolor}>
@@ -196,7 +217,6 @@ const Navbar = ({ onDrawerToggle, ecolor }) => {
                 <MenuIcon />
               </IconButton>
             </Grid>
-
             <Grid item>
               <BrandIcon />
               <Brand ecolor={ecolor}>
@@ -206,27 +226,28 @@ const Navbar = ({ onDrawerToggle, ecolor }) => {
               </Brand>
             </Grid>
             <Grid item xs sx={{ display: { xs: "block", sm: "none" } }} />
-            <Grid item>
-              <SearchWrapper
-                ecolor={ecolor}
-                sx={{
-                  display: "flex",
-                  alignItems: "flex-end",
-                }}
-              >
-                <FontAwesomeIcon icon={faSearch} />
-                <SearchBar config={searchConfig} />
-              </SearchWrapper>
+            <Grid item sx={{ display: { xs: "none", md: "block" } }}>
+              <SearchContainer ecolor={ecolor} />
             </Grid>
             <Grid item xs />
             <Grid item>
-              <NavbarNotificationsDropdown />
-              <NavbarLanguagesDropdown />
-              <NavbarCreationDropdown />
-              <NavbarUserDropdown />
+              <Grid container>
+                <Grid item xs sx={{ display: { xs: "block", md: "none" } }}>
+                  <NavbarSearch
+                    toggleSearch={() => setShowSearchBar((prev) => !prev)}
+                  />
+                </Grid>
+                <Grid item>
+                  <NavbarCreationDropdown />
+                  <NavbarNotificationsDropdown />
+                  <NavbarLanguagesDropdown />
+                  <NavbarUserDropdown />
+                </Grid>
+              </Grid>
             </Grid>
           </Grid>
         </Toolbar>
+        {showSearchBar && <SearchMiniBar ecolor={ecolor} />}
       </AppBar>
     </React.Fragment>
   );

app/src/layouts/Dashboard.js

@@ -4,7 +4,6 @@ import styled from "@emotion/styled";
 import { Box, CssBaseline, Paper as MuiPaper, Grid } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { useRouter } from "next/router";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import { spacing } from "@mui/system";
 
 import GlobalStyle from "../components/GlobalStyle";