diff --git a/src/apps/experimental/components/AppToolbar/index.tsx b/src/apps/experimental/components/AppToolbar/index.tsx index 8d87961511..0317ae92a3 100644 --- a/src/apps/experimental/components/AppToolbar/index.tsx +++ b/src/apps/experimental/components/AppToolbar/index.tsx @@ -1,3 +1,4 @@ +import ArrowBack from '@mui/icons-material/ArrowBack'; import MenuIcon from '@mui/icons-material/Menu'; import SearchIcon from '@mui/icons-material/Search'; import Box from '@mui/material/Box'; @@ -9,6 +10,7 @@ import React, { FC } from 'react'; import { Link, useLocation } from 'react-router-dom'; import appIcon from 'assets/img/icon-transparent.png'; +import { appRouter } from 'components/router/appRouter'; import { useApi } from 'hooks/useApi'; import globalize from 'scripts/globalize'; @@ -23,6 +25,13 @@ interface AppToolbarProps { onDrawerButtonClick: (event: React.MouseEvent) => void } +const onBackButtonClick = () => { + appRouter.back() + .catch(err => { + console.error('[AppToolbar] error calling appRouter.back', err); + }); +}; + const AppToolbar: FC = ({ isDrawerOpen, onDrawerButtonClick @@ -32,6 +41,7 @@ const AppToolbar: FC = ({ const location = useLocation(); const isDrawerAvailable = isDrawerPath(location.pathname); + const isBackButtonAvailable = appRouter.canGoBack(); return ( = ({ edge='start' color='inherit' aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')} - sx={{ mr: 2 }} onClick={onDrawerButtonClick} > @@ -58,12 +67,28 @@ const AppToolbar: FC = ({ )} + {isBackButtonAvailable && ( + + + + + + )} +