add back button

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,5 +1,7 @@
 import type { FC } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 
@@ -10,30 +12,52 @@ interface LayoutAppBarProps {
   onToggleDrawer: () => void;
 }
 
-const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
-  <AppBar
-    position="fixed"
-    sx={{
-      width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
-      ml: { md: `${DRAWER_WIDTH}px` },
-      boxShadow: 'none',
-      backgroundColor: '#2e586a'
-    }}
-  >
-    <Toolbar>
-      <IconButton
-        color="inherit"
-        edge="start"
-        onClick={onToggleDrawer}
-        sx={{ mr: 2, display: { md: 'none' } }}
-      >
-        <MenuIcon />
-      </IconButton>
-      <Typography variant="h6" noWrap component="div">
-        {title}
-      </Typography>
-    </Toolbar>
-  </AppBar>
-);
+const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
+  const pathnames = useLocation()
+    .pathname.split('/')
+    .filter((x) => x);
+  const navigate = useNavigate();
+  let show_back = false;
+  if (pathnames.length > 1) {
+    show_back = pathnames[0] !== 'system' || pathnames[1] === 'espsystemstatus';
+  }
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={{
+        width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
+        ml: { md: `${DRAWER_WIDTH}px` },
+        boxShadow: 'none',
+        backgroundColor: '#2e586a'
+      }}
+    >
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          edge="start"
+          onClick={onToggleDrawer}
+          sx={{ mr: 2, display: { md: 'none' } }}
+        >
+          <MenuIcon />
+        </IconButton>
+
+        {show_back && (
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={() => navigate(pathnames[0])}
+          >
+            <ArrowBackIcon />
+          </IconButton>
+        )}
+
+        <Typography variant="h6" noWrap component="div">
+          {title}
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+};
 
 export default LayoutAppBar;