feat: minimal implementation of go back button

polyflix · Feb 17, 2023 · 36e6539 · 36e6539
1 parent c5b39bc
commit 36e6539
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/apps/polyflix/public/locales/en/common.json b/apps/polyflix/public/locales/en/common.json
@@ -28,7 +28,8 @@
     "delete": "delete",
     "closeModal": "Close modal",
     "report": "report",
-    "seeMore": "See more"
+    "seeMore": "See more",
+    "goBack": "Go back"
   },
   "navbar": {
     "tooltip": {
@@ -97,4 +98,4 @@
       "informations": "Activate the dark mode to preserve your eyes."
     }
   }
-}
+}
diff --git a/apps/polyflix/public/locales/fr/common.json b/apps/polyflix/public/locales/fr/common.json
@@ -28,7 +28,8 @@
     "delete": "supprimer",
     "report": "signaler",
     "closeModal": "Fermer la modale",
-    "seeMore": "Voir Plus"
+    "seeMore": "Voir Plus",
+    "goBack": "Retour"
   },
   "navbar": {
     "tooltip": {
@@ -93,4 +94,4 @@
       "informations": "Activer le mode sombre pour préserver vos yeux."
     }
   }
-}
+}
diff --git a/apps/polyflix/src/modules/core/components/Dashboard/Navbar/Navbar.component.tsx b/apps/polyflix/src/modules/core/components/Dashboard/Navbar/Navbar.component.tsx
@@ -1,17 +1,19 @@
 import { ManageSearch, Person, Settings } from '@mui/icons-material'
 import {
+  Button,
   IconButton,
   List,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   Stack,
   Tooltip,
+  Typography,
   useTheme,
 } from '@mui/material'
 import Box from '@mui/material/Box'
 import React, { PropsWithChildren, useEffect } from 'react'
-import { Link as RouterLink, useLocation } from 'react-router-dom'
+import { Link as RouterLink, useLocation, useHistory } from 'react-router-dom'
 
 import { Icon } from '@core/components/Icon/Icon.component'
 import { Logo } from '@core/components/Logo/Logo.component'
@@ -70,6 +72,11 @@ export const DashboardNavbar: React.FC<PropsWithChildren<{}>> = () => {
     }
   }, [])
 
+  const history = useHistory()
+  const goBack = () => {
+    history.goBack()
+  }
+
   return (
     <RootStyle>
       <ToolbarStyle ref={toolBarRef}>
@@ -100,6 +107,20 @@ export const DashboardNavbar: React.FC<PropsWithChildren<{}>> = () => {
             <Icon name="eva:menu-fill" />
           </Box>
           <Logo />
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'grey.500',
+              alignSelf: 'center',
+              paddingX: 2,
+              cursor: 'pointer',
+              fontSize: '0.8rem',
+              textTransform: 'uppercase',
+            }}
+            onClick={goBack}
+          >
+            {t('actions.goBack')}
+          </Typography>
           <Box sx={{ flexGrow: 1 }} />
           <Stack
             direction="row"