diff --git a/interface/src/app/settings/APSettings.tsx b/interface/src/app/settings/APSettings.tsx index 0f1f8b462..7c9aee614 100644 --- a/interface/src/app/settings/APSettings.tsx +++ b/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(); diff --git a/interface/src/app/settings/ApplicationSettings.tsx b/interface/src/app/settings/ApplicationSettings.tsx index 0789fee40..ef45485fd 100644 --- a/interface/src/app/settings/ApplicationSettings.tsx +++ b/interface/src/app/settings/ApplicationSettings.tsx @@ -121,7 +121,7 @@ const ApplicationSettings = () => { }); }; - useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION())); + useLayoutTitle(LL.APPLICATION()); const SecondsInputProps = { endAdornment: {LL.SECONDS()} diff --git a/interface/src/app/settings/MqttSettings.tsx b/interface/src/app/settings/MqttSettings.tsx index cd41a45e4..66f653861 100644 --- a/interface/src/app/settings/MqttSettings.tsx +++ b/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(); diff --git a/interface/src/app/settings/NTPSettings.tsx b/interface/src/app/settings/NTPSettings.tsx index 277744e0d..cf42b5e19 100644 --- a/interface/src/app/settings/NTPSettings.tsx +++ b/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, diff --git a/interface/src/app/settings/network/Network.tsx b/interface/src/app/settings/network/Network.tsx index 67ef0bc1a..3e6b663d3 100644 --- a/interface/src/app/settings/network/Network.tsx +++ b/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(); diff --git a/interface/src/app/settings/security/Security.tsx b/interface/src/app/settings/security/Security.tsx index ab9ad32ac..23bd82a53 100644 --- a/interface/src/app/settings/security/Security.tsx +++ b/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(); diff --git a/interface/src/app/status/APStatus.tsx b/interface/src/app/status/APStatus.tsx index 2f4903976..d9c9f24db 100644 --- a/interface/src/app/status/APStatus.tsx +++ b/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(); diff --git a/interface/src/app/status/HardwareStatus.tsx b/interface/src/app/status/HardwareStatus.tsx index 6c872468e..45384e3c1 100644 --- a/interface/src/app/status/HardwareStatus.tsx +++ b/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, diff --git a/interface/src/app/status/MqttStatus.tsx b/interface/src/app/status/MqttStatus.tsx index d2808b3b6..3ba7943fd 100644 --- a/interface/src/app/status/MqttStatus.tsx +++ b/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(); diff --git a/interface/src/app/status/NTPStatus.tsx b/interface/src/app/status/NTPStatus.tsx index a65ee8620..aefd81802 100644 --- a/interface/src/app/status/NTPStatus.tsx +++ b/interface/src/app/status/NTPStatus.tsx @@ -47,7 +47,7 @@ const NTPStatus = () => { const [processing, setProcessing] = useState(false); const { LL } = useI18nContext(); - useLayoutTitle(LL.STATUS_OF('NTP')); + useLayoutTitle('NTP'); const { send: updateTime } = useRequest( (local_time: Time) => NTPApi.updateTime(local_time), diff --git a/interface/src/app/status/NetworkStatus.tsx b/interface/src/app/status/NetworkStatus.tsx index 86a9994c2..696e02155 100644 --- a/interface/src/app/status/NetworkStatus.tsx +++ b/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(); diff --git a/interface/src/components/layout/LayoutAppBar.tsx b/interface/src/components/layout/LayoutAppBar.tsx index 39540fc3c..0df253247 100644 --- a/interface/src/components/layout/LayoutAppBar.tsx +++ b/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 ( { - {back_path && ( - navigate(back_path)} - > - - + {pathnames.length > 1 && ( + <> + navigate('/' + pathnames[0])} + > + + + + + + {pathnames[0] === 'status' ? LL.STATUS_OF('') : LL.SETTINGS(0)} + + + + )} - - {title} - + {title} );