add breadcrumb to navigation

interface/src/app/settings/APSettings.tsx

@@ -46,7 +46,7 @@ const APSettings = () => {
 
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.SETTINGS_OF(LL.ACCESS_POINT(0)));
+  useLayoutTitle(LL.ACCESS_POINT(0));
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 

interface/src/app/settings/ApplicationSettings.tsx

@@ -121,7 +121,7 @@ const ApplicationSettings = () => {
     });
   };
 
-  useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
+  useLayoutTitle(LL.APPLICATION());
 
   const SecondsInputProps = {
     endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>

interface/src/app/settings/MqttSettings.tsx

@@ -48,7 +48,7 @@ const MqttSettings = () => {
   });
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF('MQTT'));
+  useLayoutTitle('MQTT');
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 

interface/src/app/settings/NTPSettings.tsx

@@ -44,7 +44,7 @@ const NTPSettings = () => {
   });
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF('NTP'));
+  useLayoutTitle('NTP');
 
   const updateFormValue = updateValueDirty(
     origData,

interface/src/app/settings/network/Network.tsx

@@ -13,7 +13,7 @@ import WiFiNetworkScanner from './WiFiNetworkScanner';
 
 const Network = () => {
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
+  useLayoutTitle(LL.NETWORK(0));
 
   const { routerTab } = useRouterTab();
 

interface/src/app/settings/security/Security.tsx

@@ -10,7 +10,7 @@ import SecuritySettings from './SecuritySettings';
 
 const Security = () => {
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF(LL.SECURITY(0)));
+  useLayoutTitle(LL.SECURITY(0));
 
   const { routerTab } = useRouterTab();
 

interface/src/app/status/APStatus.tsx

@@ -41,7 +41,7 @@ const APStatus = () => {
   } = useAutoRequest(APApi.readAPStatus, { pollingTime: 3000 });
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF(LL.ACCESS_POINT(0)));
+  useLayoutTitle(LL.ACCESS_POINT(0));
 
   const theme = useTheme();
 

interface/src/app/status/HardwareStatus.tsx

@@ -30,7 +30,7 @@ function formatNumber(num: number) {
 const HardwareStatus = () => {
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.STATUS_OF(LL.HARDWARE()));
+  useLayoutTitle(LL.HARDWARE());
 
   const {
     data,

interface/src/app/status/MqttStatus.tsx

@@ -61,7 +61,7 @@ const MqttStatus = () => {
   } = useAutoRequest(MqttApi.readMqttStatus, { pollingTime: 3000 });
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF('MQTT'));
+  useLayoutTitle('MQTT');
 
   const theme = useTheme();
 

interface/src/app/status/NTPStatus.tsx

@@ -47,7 +47,7 @@ const NTPStatus = () => {
   const [processing, setProcessing] = useState<boolean>(false);
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF('NTP'));
+  useLayoutTitle('NTP');
 
   const { send: updateTime } = useRequest(
     (local_time: Time) => NTPApi.updateTime(local_time),

interface/src/app/status/NetworkStatus.tsx

@@ -88,7 +88,7 @@ const NetworkStatus = () => {
   } = useAutoRequest(NetworkApi.readNetworkStatus, { pollingTime: 3000 });
 
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF(LL.NETWORK(1)));
+  useLayoutTitle(LL.NETWORK(1));
 
   const theme = useTheme();
 

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,9 +1,12 @@
-import { useLocation, useNavigate } from 'react-router';
+import { Link, useLocation, useNavigate } from 'react-router';
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 
+import { useI18nContext } from 'i18n/i18n-react';
+
 export const DRAWER_WIDTH = 210;
 
 interface LayoutAppBarProps {
@@ -12,11 +15,12 @@ interface LayoutAppBarProps {
 }
 
 const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
+  const { LL } = useI18nContext();
+  const navigate = useNavigate();
+
   const pathnames = useLocation()
     .pathname.split('/')
     .filter((x) => x);
-  const back_path = pathnames.length > 1 ? '/' + pathnames[0] : undefined;
-  const navigate = useNavigate();
 
   return (
     <AppBar
@@ -38,20 +42,33 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
           <MenuIcon />
         </IconButton>
 
-        {back_path && (
+        {pathnames.length > 1 && (
-          <IconButton
+          <>
-            sx={{ mr: 1 }}
+            <IconButton
-            color="inherit"
+              sx={{ mr: 1, fontSize: 20, verticalAlign: 'middle' }}
-            edge="start"
+              color="primary"
-            onClick={() => navigate(back_path)}
+              edge="start"
-          >
+              onClick={() => navigate('/' + pathnames[0])}
-            <ArrowBackIcon />
+            >
-          </IconButton>
+              <ArrowBackIcon />
+            </IconButton>
+
+            <Link
+              to={'/' + pathnames[0]}
+              style={{ textDecoration: 'none', color: 'white' }}
+            >
+              <Typography variant="h6">
+                {pathnames[0] === 'status' ? LL.STATUS_OF('') : LL.SETTINGS(0)}
+                <NavigateNextIcon
+                  sx={{ fontSize: 20, verticalAlign: 'middle' }}
+                  color="primary"
+                />
+              </Typography>
+            </Link>
+          </>
         )}
 
-        <Typography variant="h6" noWrap component="div">
+        <Typography variant="h6">{title}</Typography>
-          {title}
-        </Typography>
       </Toolbar>
     </AppBar>
   );