add translation keys (#246)

* Fix i18n tsc issue

"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.

* Fix translation in "DefaultNavBar"

key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.

* Enable typing for i18n translation keys

* Add translation keys

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -11,6 +11,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { styled } from '@mui/system';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',
@@ -29,6 +30,7 @@ interface IProps {
 }
 
 export default function DesktopSideBar({ navBarItems }: IProps) {
+    const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
 
@@ -48,7 +50,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
                     <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                         <ListItem disableRipple button key={title}>
                             <ListItemIcon sx={{ minWidth: '0' }}>
-                                <Tooltip placement="right" title={title}>
+                                <Tooltip placement="right" title={t(title)}>
                                     {iconFor(path, IconComponent, SelectedIconComponent)}
                                 </Tooltip>
                             </ListItemIcon>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -11,6 +11,7 @@ import { styled, Box } from '@mui/system';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 const BottomNavContainer = styled('div')(({ theme }) => ({
     bottom: 0,
@@ -38,6 +39,7 @@ interface IProps {
 }
 
 export default function MobileBottomBar({ navBarItems }: IProps) {
+    const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
 
@@ -68,7 +70,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                                             : 'grey.600',
                                 }}
                             >
-                                {title}
+                                {t(title)}
                             </Box>
                         </Box>
                     </ListItem>